ホームページ > ウェブフロントエンド > jsチュートリアル > jQuery はメニュー形式の画像スライドを実装します switching_jquery

jQuery はメニュー形式の画像スライドを実装します switching_jquery

WBOY
リリース: 2016-05-16 16:09:29
オリジナル
1200 人が閲覧しました

jQuery メニュー形式の画像スライド切り替えは、マウスを画像上でスライドさせたときの Tmall 公式 Web サイトのナビゲーション メニューの特殊効果です。

コードをコピーします コードは次のとおりです:

$(関数(){
// フロアコンスライド
$(".floorCon-slide .floorConSlideImgNav リパン").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}//涓嶅鐞嗘ARCzan Chong姸镐人殑
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);
})
})

デモ画像:

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート