jQuery實現(xiàn)菜單式圖片滑動切換

更新時間：2015年03月14日 11:11:51 投稿：hebedich

這篇文章主要介紹了jQuery實現(xiàn)菜單式圖片滑動切換效果，主要是依托于jQuery Lightbox插件來實現(xiàn)，非常炫酷，這里推薦給小伙伴們

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

$(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);

    })

})

演示圖：

以上就是本文的全部內(nèi)容了，希望大家能夠喜歡。

您可能感興趣的文章:

相關(guān)文章

如何編寫jquery插件
編寫插件的目的是給已經(jīng)有的一系列方法或函數(shù)做一個封裝，以便在其他地方重復使用，提高開發(fā)效率和方便后期維護。本文將詳細介紹如何編寫jQuery插件
2017-03-03
jQuery插件開發(fā)基礎(chǔ)簡單介紹
jquery插件開發(fā)基礎(chǔ)：開發(fā)jQuery 插件的基本格式,開發(fā)全局函數(shù)的基本格式，接下來為您詳細介紹，感興趣的朋友可以了解哦
2013-01-01
通過Jquery的Ajax方法讀取將table轉(zhuǎn)換為Json
這篇文章主要介紹了通過Jquery的Ajax方法讀取將table轉(zhuǎn)換為Json,需要的朋友可以參考下
2014-05-05
Jquery中CSS選擇器用法分析
這篇文章主要介紹了Jquery中CSS選擇器用法,實例分析了jQuery中常用的5種css選擇器的使用技巧,需要的朋友可以參考下
2015-02-02
jQuery如何取id有.的值一般的方法是取不到的
這篇文章主要介紹了jQuery如何取id有.的值一般的方法是取不到的,需要的朋友可以參考下
2014-04-04
jQuery實現(xiàn)數(shù)秒后自動提交form的方法
這篇文章主要介紹了jQuery實現(xiàn)數(shù)秒后自動提交form的方法,實例分析了jQuery實現(xiàn)form表單延時提交的技巧,需要的朋友可以參考下
2015-03-03
簡單的jquery左側(cè)導航欄和頁面選中效果
這篇文章主要介紹一個簡單的jquery左側(cè)導航欄和頁面選中效果,此功能需引用jquery，需要的朋友可以參考下
2014-08-08
jQuery CSS()方法改變現(xiàn)有的CSS樣式表
使用CSS()方法改變現(xiàn)有的CSS樣式表，css()方法在使用上具有多樣性，比如要改變鏈接顏色，如果需要改變多個樣式屬性，可先定義屬性變量，然后直接賦值給css()方法
2014-09-09
jQuery實現(xiàn)下拉菜單滑動效果
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)下拉菜單滑動效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-08-08
jquery+CSS實現(xiàn)懸浮登錄框遮罩
這篇文章主要為大家詳細介紹了jquery+CSS實現(xiàn)懸浮登錄框遮罩，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-03-03