开发者社区> 嗯哼9925> 正文

【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: 0; padding: 0; }
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: 0;}
.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: 10;position: absolute;cursor: pointer;}
.arrows-left {background: url("../imgs/tab-for-infomation/arrows.png") no-repeat  0 0;left: 0;}
.arrows-right {background: url("../imgs/tab-for-infomation/arrows.png") no-repeat  -41px 0px;right: 0;}
.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"}); //进行元素左移效果
}
复制代码

 






本文转自叶超Luka博客园博客,原文链接:http://www.cnblogs.com/yc-755909659/p/6590210.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
24851 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
18111 0
修复duilib CEditUI控件和CWebBrowserUI控件中按Tab键无法切换焦点的bug
转载请说明原出处,谢谢~~:http://blog.csdn.net/zhuhongshu/article/details/41556615         在duilib中,按tab键会让焦点在Button一类的控件中切换,但是切换焦点一直存在bug,具体的描述如下:         1、在主窗体里弹出新的窗体,当新窗体中存在CEditUI控件并且焦点在此CEditUI控件上,那么按tab键将无法切换焦点而一直处于CEditUI中。
1039 0
Android捕获View焦点事件,LinearLayout结合HorizontalScrollView实现ViewPgaer和选项卡Tabs联动
 《Android捕获View焦点事件,LinearLayout结合HorizontalScrollView实现ViewPgaer和选项卡Tabs联动。
990 0
6个出色的基于JQuery的Tab选项卡实例
今天在修整博客侧栏信息时,利用到了Tab选项卡方式,因为ZBlog封装的是JQuery库,所以很自然地就想到了IdTabs。顺便也找来了不少优秀的Tab选项卡实例,在这里与大家分享一下。当然,最终我没有用到IdTabs以及如下任何一个实例,我只是很不服气的自己写了个小插件,尚不完善,就不于此共享了。
718 0
Android实现连续并排的若干个TextView单击改变背景颜色达到选项卡Tab栏切换效果
《Android实现连续并排的若干个TextView单击改变背景颜色达到选项卡Tab栏切换效果》 实现的组件交互目的很简单,就是要达到类似tab选项卡的导航栏一样,当用户点击了连续并排的若干个TextView其中之一时候,要产生一定的交互效果(背景颜色改变等)。
810 0
Iphone [Tab Bar实现多view切换,Picker,DataPicter实现
用Tab Bar Controller处理IPhone多个view切换, 而且还附有创建空项目,picker和DataPicker的实现! 具体步骤: 1.创建一个空项目,选择User Interface->View,命名为rootView。
874 0
+关注
4716
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
OceanBase 入门到实战教程
立即下载
阿里云图数据库GDB,加速开启“图智”未来.ppt
立即下载
实时数仓Hologres技术实战一本通2.0版(下)
立即下载