首页 网站特效 PHP/Mysql 网站模板 视频教程 整站源码 云服务器 免责声明

素材码 > 选项卡 > jQuery点击标签选项卡上下滑动切换代码

jQuery点击标签选项卡上下滑动切换代码

更新时间:2018-05-05 码币:1
357058607
jQuery点击标签选项卡上下滑动切换代码 应用简介

jQuery点击标签选项卡上下滑动切换代码,tab选项卡在左侧竖排、右侧图文内容比较丰富,滑动切换效果非常流畅!

js代码

<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> 
<script type="text/javascript"
$(".main-page .nav div").mouseenter(function () { 
    var $this = $(this); 
    var index = $this.index(); 
}).mouseleave(function () { 
    var $this = $(this); 
    var index = $this.index(); 
}).click(function () { 
    var $this = $(this); 
    var index = $this.index(); 
    var l = -(index * 800); 
    $(".main-page .nav div").removeClass("on"); 
    $(".main-page .nav div").eq(index).addClass("on"); 
    $(".main-page .content .con-ggh:eq(0)").stop().animate({ "margin-top": l }500); 
}); 
</script>


  • 收藏
  • 投诉
评论列表