DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jQuery實現菜單式圖片滑動切換
jQuery實現菜單式圖片滑動切換
編輯:JQuery特效代碼     

jQuery菜單式圖片滑動切換是一款天貓官方網站的鼠標滑過圖片切換導航菜單特效。

代碼如下:
$(function(){
    // floorCon-slide
    $(".floorCon-slide .floorConSlideImgNav li span").css({opacity:0.95})
    $(".floorCon-slide .floorConSlideImgNav li.hover").find("span").css({left:0})//鍒濆
    $(".floorCon-slide .floorConSlideImgNav li").mouseover(function(){
        if($(this).hasClass("hover")){return}//涓嶅鐞嗘弧瓒崇姸鎬佺殑
          var imgleft=$(this).index()*200*(-1)+"px";
          $(this).addClass("hover").find("span").stop().animate({left:0},400)
          $(this).siblings().removeClass("hover").find("span").stop().animate({left:"-20px"},600)
          //鍥劇墖鏄劇ず
          $(this).parent().prev(".floorConSlideImg").stop().animate({left:imgleft},400);
    })
})

演示圖:

以上就是本文的全部內容了,希望大家能夠喜歡。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved