一个小的tab切换插件
1//使用 var t1=new Tab({
etype:'onmou',//默认点击触发,如果事件写错了,当作单击
autoplay:2000,//有时间值(按照事件自动播放)和false(不自动播放)
invoke:3,//默认是第一项。
});
//插件的基本结构
;(function(){
function Tab(options){//options:配置参数
this.tab=document.querySelector('.tab');
this.tabBtn=document.querySelector('.tab_btn');
this.btns=this.tabBtn.getElementsByTagName('li');
this.divs=this.tab.querySelectorAll('.tab_item');
this.num=0;
this.timer=null;
this.options=options;
this.settings={//默认参数
etype:'onclick',//默认点击触发,如果事件写错了,当作单击
autoplay:3000,//有时间值(按照事件自动播放)和false(不自动播放)
invoke:1,//默认是第一项。
effect:'display'//display/opacity
}
this.init();
} Tab.prototype.init=function(){
var that=this;
extend(this.settings,this.options);
if(this.settings.etype=='onclick' || this.settings.etype!='onmouseover'){
this.tabSwitch('onclick');
}else if(this.settings.etype=='onmouseover'){
this.tabSwitch(this.settings.etype);
}
if(this.settings.autoplay){//如果配置参数传入一个时间,允许自动轮播,轮播的时间传过去
this.autoplay(this.settings.autoplay);
}
if(this.settings.invoke>1 && this.settings.invoke<=this.btns.length){
this.num=this.settings.invoke-1;
this.tabchange();
}
this.tab.onmouseover=function(){
clearInterval(that.timer);
}
this.tab.onmouseout=function(){
that.autoplay(that.settings.autoplay);
}
} Tab.prototype.tabSwitch=function(e){
var that=this;
for(var i=0;i<this.btns.length;i++){
this.btns[i].index=i;
this.btns[i][e]=function(){
that.num=this.index;
that.tabchange();
}
}
}
Tab.prototype.tabchange=function(){
for(var i=0;i<this.btns.length;i++){
this.btns[i].className='';
this.divs[i].className='hide';
if(this.settings.effect=='opacity'){
buffermove(this.divs[i],{opacity:0});
this.divs[i].style.display='none';
}
}
this.btns[this.num].className='active';
if(this.settings.effect=='display' || this.settings.effect!='opacity'){
this.divs[this.num].className='show';
}else if(this.settings.effect=='opacity'){
this.divs[this.num].style.display='block';
buffermove(this.divs[this.num],{opacity:100});
}
}
Tab.prototype.autoplay=function(time){
var that=this;
this.timer=setInterval(function(){
that.num++;
if(that.num>=that.btns.length){
that.num=0;
}
that.tabchange();
},time);
} function extend(obj1,obj2){
for(var i in obj2){
obj1[i]=obj2[i];
}
return obj1;
}
window.Tab=Tab;
})();
一个小的tab切换插件的更多相关文章
- jquery做一个小的轮播插件---有BUG,后续修改
//首页无缝轮播 ; (function($, window, document, undefined) { $.fn.slider = function(options) { var default ...
- 微信小程序tab切换,可滑动切换,导航栏跟随滚动实现
简介 看到今日头条小程序页面可以滑动切换,而且tab导航条也会跟着滚动,点击tab导航,页面滑动,切导航栏也会跟着滚动,就想着要怎么实现这个功能 像商城类商品类目如果做成左右滑动切换类目用户体验应该会 ...
- iTabs Tab切换插件
最近项目中使用到Tab切换,切换的页面不变,内容发生变化,随手写了份简单的插件,附带源码.先看样子: 本人也考虑到是否使用jquery ui tab,但是还是热衷于自己写一份,首先好处之一是易于培训, ...
- 根据id来实现小程序tab切换,
本例根据绑定id来实现tab切换,但本例仍有缺陷,用for循环数据,无法实现切换.如有大神能够有更好方法,欢迎留言更正 WXML: <view class="tab"> ...
- 编写tab切换插件
html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- 小程序tab切换 点击左右滑动
wxml <scroll-view scroll-x="true" class="navbar-box"> <block wx:for=&qu ...
- 关于一个页面的tab切换整体页面刷新而tab标签处是同一个文件怎么做焦点的问题
解决方法,不能直接写点击效果就要在超链接中加一个参数,根据参数的值去给变焦点的效果,实现方法如下: <div class="vip_search"> ...
- 从一个简单的Tab切换开始——与AJAX的结合
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 小程序——Tab切换
<view class="body"> <view class="nav bc_white"> <view class=" ...
随机推荐
- CentOS 6.5 Web服务器搭建
安装MySQL 首先,进入终端,输入 [root@localhost ~]# yum install mysql mysql-server 即可安装Mysql 按照成功以后,让MySQL随系统启动 [ ...
- AI 学习新的开始
推荐入门学习 http://www.cnblogs.com/subconscious/p/6240151.html
- memcached安装与使用详解
一.memcache的简介 memcache是高速,分布式的内存缓存服务器 php的缓存方式一般可以使用memcache技术和redis技术,其中各有优劣,因不同的情况而选择较为适合的缓存技术,其中m ...
- ionic2+Angular web端 实现微信分享以及如何跳转回分享出去的页面
微信分享,首先参考微信JS-SDK开发文档. step1:在启动文件index.html中引入微信js文件: <script src="http://res.wx.qq.com/ope ...
- Ubuntu16.04解决无法切换root权限的问题
在su root时发现无法切换到root权限.显示: /usr/local/bin/zsh 没有文件或目录 想了想问题所在,突然想起来前段时间想要更换shell主题,于是装了zsh和oh-my-zsh ...
- MySQL数据库基础(四)(子查询与链接)
1.子查询简介 其中,所谓的"外层查询"并不是指"查找",指的是所有SQL语句的统称:结构化查询语言(Structured Query Language),简称 ...
- java12 - 正则表达式
正则表达式简介 常用搭配说明: ^a 表示这个位置只能是字母 a [1,2,3,4] 表示这个位置只能在 1,2,3,4 中取一个 [[a-z][A-Z]] 表示可以任意大小写字母 ([a-z]{1, ...
- 关于HTTP,你知道哪些?
HTTP简介 HTTP 的全称是 Hypertext Transfer Protocol,超文本传输协议 规定客户端和服务器之间的数据传输格式 让客户端和服务器能有效地进行数据沟通 HTTP 协议是网 ...
- uva 1151最小生成树
先求一次最小生成树,可以排除n*(n*1)/2-(n-1)条边,每次利用二进制法枚举套餐的选择,套餐中的点直接处理,如果两个套餐有公共点直接合并,他们一定连通,然后枚举第一步最小生成树得到的n-1条边 ...
- Redux:从action到saga
前端应用消失的部分 一个现代的.使用了redux的前端应用架构可以这样描述: 一个存储了应用不可变状态(state)的store 状态(state)可以被绘制在组件里(html或者其他的东西).这个绘 ...