【Little Demo】左右按钮tab选项卡双切换
通过前一篇文章 从简单的Tab标签到Tab图片切换 的说明,相关效果也就可以实现了。
1.左右按钮tab选项卡双切换
很明显,左右两个按钮是 absolute 布局,另外就是内容部分和Tab标签部分。
1) 先实现Tab内容和标签部分的显示:
HTML代码:
<div class="tab-Infomations">
<div class="arrows"></div>
<div class="tab-content">
<div class="tab-info">
<div class="info info1">
<p>
We provide a full spectrum of online advertising...
<br />
<a href="#" class="GlobalButton"><span>Tour Our Services</span></a>
</p>
</div>
<div class="info info2 hidden">...</div>
<div class="info info3 hidden">... </div>
<div class="info info4 hidden">... </div>
</div>
<div class="tab-thumbs">
<ul>
<li class="selected"><a href="javascript:;">What We Do</a></li>
<li><a href="javascript:;">Who We Are</a></li>
<li><a href="javascript:;">Why Choose Us</a></li>
<li><a href="javascript:;">How We Work</a></li>
</ul>
</div>
</div>
</div>
CSS代码:
body, ul, li { margin:; padding:; }
body, button, input, select, textarea { font: 12px/1.5 tahoma, arial, \5b8b\4f53; }
ul, ol,li { list-style: none; }
a { text-decoration: none;}
.hidden {display: none;}
/*---------- tab ------------*/
.tab-Infomations {position: relative;width: 959px;margin: 10px auto;}
.tab-content {width:912px;height:324px;background: url("../imgs/tab-for-infomation/slidebg.jpg") no-repeat;
overflow: hidden;margin: 0 auto;}
/*---------- tab-thumbs ------------*/
.tab-thumbs{ position: absolute;bottom:;}
.tab-thumbs li { float: left;width: 228px;height: 50px;}
.tab-thumbs li a { width: 228px;height: 50px;display: block;color: #ffffff;font-size: 18px;font-family: Arial,sans-serif;line-height: 50px;text-align: center; }
.tab-thumbs li.selected a{ cursor: default;text-shadow: 1px 1px 1px #374f10;}
/*---------- tab-info ------------*/
.tab-info { width:912px;height:324px;}
.info {width: 912px;height: 324px;position: absolute;}
.info p{ color:#1d1d1d;font-size: 12px;line-height: 20px;margin-left: 326px;margin-top: 142px;width: 542px; }
.info1 { background: url("../imgs/tab-for-infomation/billboard1.png") no-repeat; }
.info2 { background: url("../imgs/tab-for-infomation/billboard2.png") no-repeat; }
.info3 { background: url("../imgs/tab-for-infomation/billboard3.png") no-repeat; }
.info4 { background: url("../imgs/tab-for-infomation/billboard4.png") no-repeat; }
.GlobalButton {background: url("../imgs/tab-for-infomation/btn_right.png") no-repeat top right;display: block;float: left;font-weight: bold;height: 31px;margin-top: 20px;padding-right: 20px;}
.GlobalButton span { background: transparent url("../imgs/tab-for-infomation/btn_left.png") no-repeat 0 0;line-height: 18px;line-height: 18px;padding: 7px 0 6px 20px;color: #252525;display: block;}
/*---------- tab-info ------------*/
.arrows { position: absolute;}
效果:
2) 然后我们把两边的按钮加上
这里稍微调整下HTML:
<div class="tab-Infomations">
<div class="arrows">
<a class="arrows-left prev"></a>
<a class="arrows-right next"></a>
</div>
<div class="tab-border">
<div class="tab-content">
...
</div>
</div>
</div>
然后是CSS代码:
.tab-border { border: 1px solid #cccccc;margin: 0 auto;padding:3px;width: 912px;}
/*---------- tab-arrows ------------*/
.arrows a { display: block;height: 41px;width:41px;top: 143px;z-index:;position: absolute;cursor: pointer;}
.arrows-left {background: url("../imgs/tab-for-infomation/arrows.png") no-repeat 0 0;left:;}
.arrows-right {background: url("../imgs/tab-for-infomation/arrows.png") no-repeat -41px 0px;right:;}
.arrows-left:hover,.arrows-right:hover {background-position-y: -41px;}
显示效果如下:
3) 然后就是添加jQuery方法
$(document).ready(function () {
var mIndex = 0;
var maxIndex = $(".tab-thumbs li").length-1;
$(".tab-thumbs li").click(function () {
var mIndex = $(this).index();
changeTab(mIndex);
});
$(".arrows-right").click(function () {
if(mIndex<maxIndex){
mIndex++;
}else {
mIndex = 0;
}
changeTab(mIndex);
});
$(".arrows-left").click(function () {
if(mIndex>0){
mIndex--;
}else {
mIndex = maxIndex;
}
changeTab(mIndex);
});
})
function changeTab(theIndex) {
$(".tab-thumbs li").removeClass("selected");
$(".tab-thumbs li").eq(theIndex).addClass("selected")
$(".info").stop();
$(".info").fadeOut();
$(".info").eq(theIndex).fadeIn();
}
源码见 tab-for-infomation.html || tab-for-infomation.js || tab-for-infomation.css
2.左右滚动效果
前面是用的淡入淡出的效果,但是一般来说还有左右滚动的效果。我们来实现看看:
为了和之前的对比,我们就不更改HTML 和CSS 文件中的代码。但是滚动效果是通过设置偏移值 left 来进行滚动的,而这里的信息展示部分不仅仅是图片,所以需要设置展示位的布局为相对布局,然后设置好展示位下的每个展示信息的left值,我们通过JS代码来操作:
...
var maxIndex = $(".tab-thumbs li").length-1;
var imgWidth = $(".tab-info").eq(0).width();
// 为了对比,这里用JS 实现;实际上可以CSS直接添加的直接添加
$(".tab-thumbs").attr("z-index","10"); //保持Tab 按钮在最上面
// 设置图片的父元素为相对布局
$(".tab-info").css({"position":"relative","overflow":"hidden"});
// 去除隐藏类 hidden
$(".info").removeClass("hidden");
// 给每个类名为info 的元素设置左边缘位置
for(var i=0;i<=maxIndex;i++){
$(".info").eq(i).css({"left":imgWidth*i+"px"});
}
...
然后我们的切换效果函数也需要修改下:
function changeTab(theIndex) {
var nowIndex = $(".selected").index();
var leftNum = $(".tab-info").eq(0).width()*(nowIndex-theIndex);
$(".tab-thumbs li").removeClass("selected");
$(".tab-thumbs li").eq(theIndex).addClass("selected");
$(".info").animate({left:"+="+leftNum }); //进行元素左移效果
}
这样左右滚动的效果就实现了:
相关源码:tab-for-infomation-scrolling.js
补充:
如果不想通过设置滚动模块的偏移值 left 来进行滚动的话,可以通过设置其父元素的 margin-left 值的变换来实现滚动效果。
HTML代码保持不变。但我们不能再让滚动模块绝对定位了,更改其 CSS样式如下:
.info {width: 912px;height: 324px; float: left;position: static;}
然后更改JS控制其父元素 .tab-info 的 margin-left 值的变换。当 margin-left 为0,自然显示第一个模块;让 margin-left 为负的模块宽度时,显示第二个模块。以此类推。JS代码如下:
$(document).ready(function () {
var mIndex = 0;
var maxIndex = $(".tab-thumbs li").length-1;
var imgWidth = $(".info").eq(0).width();
// 为了对比,这里用JS 实现;实际上可以CSS直接添加的直接添加
$(".tab-thumbs").attr("z-index","10"); //保持Tab 按钮在最上面
// 设置图片的父元素为相对布局
$(".tab-info").css({"position":"relative","width":imgWidth*$(".tab-thumbs li").length+"px"});
// 去除隐藏类 hidden
$(".info").removeClass("hidden");
$(".tab-thumbs li").click(function () {
mIndex = $(this).index();
changeTab(mIndex);
});
$(".arrows-right").click(function () {
if(mIndex<maxIndex){
mIndex++;
}else {
mIndex = 0;
}
changeTab(mIndex);
});
$(".arrows-left").click(function () {
if(mIndex>0){
mIndex--;
}else {
mIndex = maxIndex;
}
changeTab(mIndex);
});
}) function changeTab(theIndex) {
var imgWidth = $(".info").eq(0).width();
var marginValue = "-"+theIndex*imgWidth+"px";
$(".tab-thumbs li").removeClass("selected");
$(".tab-thumbs li").eq(theIndex).addClass("selected");
$(".tab-info").css({"margin-left":marginValue,"transition-property":"margin-left","transition-duration":"0.2s"}); //进行元素左移效果
}
【Little Demo】左右按钮tab选项卡双切换的更多相关文章
- 基于HTML5 Tab选项卡动画切换特效
基于HTML5 Tab选项卡动画切换特效.这是一款基于HTML5+CSS3实现的带有动画切换效果的Tab选项卡插件cbpFWTabs.效果图如下: 在线预览 源码下载 实现的代码. html代码: ...
- Tab选项卡 自动切换效果js实现
try.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
- Tab选项卡 延迟切换效果js实现
try.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
- iOS开发-iPad侧边栏Tab选项卡切换
Android中习惯了叫侧边栏,iOS中如果不习惯侧边栏称呼的话可以叫dock,侧边栏的切换,类似于Android中的底部导航栏的切换,iPad尺寸大了一些,导航的栏目放在侧边会显示的更好耐看一些.选 ...
- 微信小程序Tab选项卡切换大集合
代码地址如下:http://www.demodashi.com/demo/14028.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...
- react tab选项卡切换
Tab选项卡切换是个很常见也很简单的小功能,用原生js和jq去写的话可能不到20行代码就搞定so easy.但是用react去实现就没那么容易了(是自己react比较菜).由于最近在重新学习react ...
- 纯CSS实现tab选项卡切换
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta cont ...
- 下拉菜单效果和tab选项卡切换
//下拉菜单效果和tab选项卡切换. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- 纯js实现网页tab选项卡切换效果
纯js实现网页tab选项卡切换效果 百度搜索 js 点击菜单项就可以切换内容的效果
随机推荐
- VIM 键盘符号
:h key-notation //查询键盘符号说明<>> 等于shift + > % 是跳到对应的括号 x 是删除当前字符,即右括号 '' 是跳回左括号 x 删除左括号
- php文件路径获取文件名
物理截取: $file = '/www/htdocs/inc/lib.inc.php'; $filename = basename($file); echo $filename, '<br/&g ...
- bzoj1036点权模板题
/* HYSBZ1036 树上有1-n个结点,每个节点都有一个权值w 操作 CHANGE u t:把结点u的权值改为t QMAX u v:询问从点u到v的路径上的节点的最大权值 QSUM u v:询问 ...
- zoj3299 线段树区间更新,坐标建立线段树的方式
/* 平台和砖块的坐标离散化,边缘坐标转换成单位长度 处理下落信息,sum数组维护区间的砖块数量 把平台按高度从高到低排序,询问平台区间的砖块有多少,询问后将该区域砖块数置0 */ #include& ...
- PTA之简单阶乘计算
本题要求实现一个计算非负整数阶乘的简单函数. 时间限制: 400ms 内存限制: 64MB 代码长度限制: 16KB 函数接口定义: int Factorial( const int N ); 其中N ...
- python全栈开发day21-2 几个装饰器总结
1 @property 将一个方法伪装成属性 2.@propertty @f.setter 设置伪装成方法的属性 3.@propertty @f.deleter 删除一个伪装成方法的属性. class ...
- asp.net core2.0大白话带你入门
本系列包括: 1.新建asp.net core项目2.web项目目录解读3.配置访问地址4.环境变量详解5.配置文件6.日志7.DI容器8.服务的生命周期9.session的使用10.cookie的使 ...
- 【Java】 剑指offer(62) 圆圈中最后剩下的数字
本文参考自<剑指offer>一书,代码采用Java语言. 更多:<剑指Offer>Java实现合集 题目 0, 1, …, n-1这n个数字排成一个圆圈,从数字0开始每 ...
- P1862输油管道问题
P1862输油管道问题. . . . .-----------------. . . . . .图像大体是这样,是带权平均数问题,设答案是k,sigama(abs(yi-k*wi))最小,这里的wi是 ...
- Angular 个人深究(二)【发布与订阅】
Angular 个人深究(二)[发布与订阅] 1. 再入正题之前,首先说明下[ 发布与订阅模式](也叫观察者模式) 1) 定义:定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主题对象.这个 ...