一款比较简单实用的jQuery滑动选项卡插件,点击tab选项卡标签内容列表滑动切换效果,内容可放文字或图片。
js代码
<script type="text/javascript">
$(function(){
var width = 1101; //跟外面盒子的宽度一样,或者写成 var width = $(".content").width();
var ulNum = $(".content ul").length; //获取ul的个数
var contentWidth = width * ulNum; //获取整个box应该的长度,刚开始box设置成了1100,但是应该把所有的ul防到一行里面去,这样box向左移动的时候才是无缝滚动
$(".box").width(contentWidth); //给box设置宽度 .width() 是获取宽度 .width(value)是设置宽度
$(".nav span").click(function(){
//$(this)表示点击的这个元素 ,.addClass()表示添加的样式名称,.siblings()表示这个元素的所有兄弟级元素,此处表示span,
// .removeClass()表示删除的样式名称
$(this).addClass('active').siblings().removeClass('active');
var clickNum = $(this).index(); //判断点击的是第几个span .index()方法返回第几个,从0开始算起
//alert(clickNum);
var moveLeft = clickNum * width * -1; //应该向左移动的距离
$(".box").animate({'left':moveLeft}, 600); //通过操作box的left来使box向左移动, .animate 是动画函数
//第一个参数用{}包含起来,里面的内容形式为 {'left':100,'top':100},多个用逗号隔开,
// 表示从当前位置移动到left为100px、top为100px的位置(即left:100px;top:100px处),
//第二个参数为时间,表示从当前位置移动到第一个参数用时,单位为ms,1000ms=1秒
//点击的时候一定要点开审查元素,查看box元素的行内样式
})
});
</script>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791