冯美杰就是我。单纯的个人博客,只做记录,别无其他。
Powered By wordpress ,Theme By 天兴工作室
滑动tab切换特效
fmj 发布于 2019年09月26日 77 浏览 0 评论
仿一个站,有个滑动tab切换特效,目标站是引入的一个jq插件,看了下页面就只有这一个特效,不想引入插件。于是自己写了一个,凑合能用。
function tabs(tabTit,on,tabCon){ var kd1 =$(window).width(); //获取一个宽度 var kd = ($(window).width() *3);//滑动有三个tab,所以乘以3获取一个宽度 $(tabCon).css({"width": kd}); //给最外面的box设定一个宽度 $(tabCon).children().css({"width": kd1}); //给滚动的每个box设定一个宽度 $(tabTit).children().click(function(){ var index = $(tabTit).children().index(this);//获取滚动box的顺序号 var sj = index * kd1;//顺序号乘以宽度 $(this).addClass(on).siblings().removeClass(on);//给tab的标题部分一个class做样式 $(tabCon).css({"transform":"translateX(-"+ sj + "px)"});//给外部box设置一个translateX值 }); }; tabs(".tab-hd","on",".tab-bd");
html样式大概是这样的:
<div class="tx-box"> <ul class="tab-hd"> <li class="on">第一个</li> <li>第2个</li> <li>第3个</li> </ul> <div class="最外部box"> <div class="滚动的box"> <div>第一个的内容</div> <div>第2个的内容</div> <div>第3个的内容</div> </div> </div> </div>
这个东西让我记住的有两点:
.css里面有()的里面调用变量要用“+变量名称+”;
.index(this)可以获取到顺序编号;
上一篇: 李子柒 流弊
下一篇: 我和我的祖国、中国机长、攀登者
猜你喜欢
- 05-29 好日子还在后头
- 05-24 新路线!
- 03-27 采蘑菇
- 03-14 部队锅??
- 03-11 油菜花
- 03-04 换wordpress了
- 12-30 第一本书
- 12-27 2021网易云年度个人歌曲
- 12-13 秘制酱料
- 11-20 谁特么买小米...
×
欢迎评论
冯美杰就是我。单纯的个人博客,只做记录,别无其他。
Powered By wordpress ,Theme By 天兴工作室