fmj.me

FMJ.me

一个靠自学的菜鸟,只会html+css,JavaScript是什么鬼?php?我靠,好高大上!

冯美杰就是我。单纯的个人博客,只做记录,别无其他。

Powered By Z-BlogPHP,Theme By zblog模板

当前位置:网站首页 技术学习 正文

滑动tab切换特效

FMJ发布于3周前 (09-26) 103 浏览 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)可以获取到顺序编号;

jq特效 tab滑动特效

请在这里放置你的在线分享代码

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

请填写验证码