jQuery實(shí)現(xiàn)菜單式圖片滑動(dòng)切換
更新時(shí)間：2015年03月14日 11:11:51 投稿：hebedich
這篇文章主要介紹了jQuery實(shí)現(xiàn)菜單式圖片滑動(dòng)切換效果，主要是依托于jQuery Lightbox插件來實(shí)現(xiàn)，非常炫酷，這里推薦給小伙伴們
jQuery菜單式圖片滑動(dòng)切換是一款天貓官方網(wǎng)站的鼠標(biāo)滑過圖片切換導(dǎo)航菜單特效。
復(fù)制代碼 代碼如下:
$(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)容了，希望大家能夠喜歡。
您可能感興趣的文章:
- jquery實(shí)現(xiàn)簡單Tab切換菜單效果
- 基于jQuery實(shí)現(xiàn)的菜單切換效果
- jQuery實(shí)現(xiàn)Tab菜單滾動(dòng)切換的方法
- jQuery實(shí)現(xiàn)帶幻燈的tab滑動(dòng)切換風(fēng)格菜單代碼
- 基于jQuery插件實(shí)現(xiàn)環(huán)形圖標(biāo)菜單旋轉(zhuǎn)切換特效
- 7款風(fēng)格新穎的jQuery/CSS3菜單導(dǎo)航分享
- jQuery+CSS實(shí)現(xiàn)菜單滑動(dòng)伸展收縮(仿淘寶)
- jquery+css+ul模擬列表菜單具體實(shí)現(xiàn)思路
- 純CSS打造的導(dǎo)航菜單(附j(luò)query版)
- jQuery+css實(shí)現(xiàn)的藍(lán)色水平二級(jí)導(dǎo)航菜單效果代碼
- jQuery+CSS實(shí)現(xiàn)簡單切換菜單示例
相關(guān)文章
編寫插件的目的是給已經(jīng)有的一系列方法或函數(shù)做一個(gè)封裝，以便在其他地方重復(fù)使用，提高開發(fā)效率和方便后期維護(hù)。本文將詳細(xì)介紹如何編寫jQuery插件2017-03-03
jquery插件開發(fā)基礎(chǔ)：開發(fā)jQuery 插件的基本格式,開發(fā)全局函數(shù)的基本格式，接下來為您詳細(xì)介紹，感興趣的朋友可以了解哦2013-01-01
通過Jquery的Ajax方法讀取將table轉(zhuǎn)換為Json
這篇文章主要介紹了通過Jquery的Ajax方法讀取將table轉(zhuǎn)換為Json,需要的朋友可以參考下2014-05-05
這篇文章主要介紹了Jquery中CSS選擇器用法,實(shí)例分析了jQuery中常用的5種css選擇器的使用技巧,需要的朋友可以參考下2015-02-02
這篇文章主要介紹了jQuery如何取id有.的值一般的方法是取不到的,需要的朋友可以參考下2014-04-04
jQuery實(shí)現(xiàn)數(shù)秒后自動(dòng)提交form的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)數(shù)秒后自動(dòng)提交form的方法,實(shí)例分析了jQuery實(shí)現(xiàn)form表單延時(shí)提交的技巧,需要的朋友可以參考下2015-03-03
簡單的jquery左側(cè)導(dǎo)航欄和頁面選中效果
這篇文章主要介紹一個(gè)簡單的jquery左側(cè)導(dǎo)航欄和頁面選中效果,此功能需引用jquery，需要的朋友可以參考下2014-08-08
jQuery CSS()方法改變現(xiàn)有的CSS樣式表
使用CSS()方法改變現(xiàn)有的CSS樣式表，css()方法在使用上具有多樣性，比如要改變鏈接顏色，如果需要改變多個(gè)樣式屬性，可先定義屬性變量，然后直接賦值給css()方法2014-09-09
jQuery實(shí)現(xiàn)下拉菜單滑動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)下拉菜單滑動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
jquery+CSS實(shí)現(xiàn)懸浮登錄框遮罩
這篇文章主要為大家詳細(xì)介紹了jquery+CSS實(shí)現(xiàn)懸浮登錄框遮罩，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03