自己动手丰衣足食之tab选项卡(第一个可拓展轮播图)

  1. 云栖社区>
  2. 博客>
  3. 正文

自己动手丰衣足食之tab选项卡(第一个可拓展轮播图)

cometwo123 2016-02-21 12:58:00 浏览1270
展开阅读全文

下载地址http://download.csdn.net/detail/cometwo/9393614

(用这个) 下载地址:http://download.csdn.net/detail/cometwo/9467997

这里写图片描述


<!DOCTYPE html>
<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>tab标签选项卡切换jQuery特效</title>

        <style>
            * {
                margin: 0;
                padding: 0;
                list-style: none;
            }

            body {
                font-size: 12px;
                color: #666;
                text-align: left;
            }

            h1 {
                text-align: center;
                border: 1px solid red;
            }
            h1 a{
                text-decoration: none;
            }
            .tabbox {
                width: 500px;
                height: 140px;
                margin: 100px auto;
                background: #f0f0f0;
                font-family: '微软雅黑';
                border: 1px solid red;
            }

            .tabbox .tab {
                overflow: hidden;
                background: yellow;
            }

            .tabbox .tab a {
                display: block;
                padding: 10px 20px;
                float: left;
                text-decoration: none;
                color: blue;
            }

            .tabbox .tab a:hover {
                background: red;
                color: green;
                text-decoration: none;
            }

            .tabbox .tab a.on {
                background: red;
                color: green;
                text-decoration: none;
            }

            .tabbox .content {
                overflow: hidden; 
                width: 500px;
                height: 100px;
                position: relative;
            }

            .tabbox .content ul {
                position: absolute;
                left: 0;
                top: 0;
                width: 500px;
                height: 100px;
            }

            .tabbox .content li {
                width: 500px;
                height: 100px;
                float: left;
            }

            .tabbox .content li p {
                padding: 30px;
            }
        </style>

    </head>

    <body>

        <!-- 代码部分begin -->
        <div class="tabbox">
            <div class="tab">
                <a href="javascript:;" class="on">tab1</a>
                <a href="javascript:;">tab2</a>
                <a href="javascript:;">tab3</a>
                <a href="javascript:;">tab4</a>
            </div>
            <div class="content">
                <ul>
                    <li>
                        <p>tab1内容1</p>
                    </li>
                    <li>
                        <p>tab1内容2</p>
                    </li>
                    <li>
                        <p>tab1内容3</p>
                    </li>
                    <li>
                        <p>tab1内容4</p>
                    </li>
                </ul>
            </div>
        </div>

        <h1><a href="index.html">效果一</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="index2.html">效果二</a></h1>

        <script src="js/jquery-1.8.3.min.js"></script>
        <script>
            $(function() {
                $('.tabbox .content ul').width(500 * $('.tabbox .content li').length + 'px');
                $(".tabbox .tab a").mouseover(function() {
                    $(this).addClass('on').siblings().removeClass('on');
                    var index = $(this).index();      //检索当前元素的位置是第几个
                    number = index;      //定义全局变量
                    var distance = -500 * index;
                    $('.tabbox .content ul').stop().animate({
                        left: distance
                    });
                });
                var auto = 1; //等于1则自动切换,其他任意数字则不自动切换,轮播图的原理就是这样做的
                if (auto == 1) {
                    var number = 0;
                    var maxNumber = $('.tabbox .tab a').length;

                    function autotab() {
                        number++;
                        number == maxNumber ? number = 0 : number;
                        $('.tabbox .tab a:eq(' + number + ')').addClass('on').siblings().removeClass('on');
                        var distance = -500 * number;
                        $('.tabbox .content ul').stop().animate({
                            left: distance
                        });
                    }
                    var tabChange = setInterval(autotab, 3000);
                    //鼠标悬停暂停切换
                    $('.tabbox').mouseover(function() {
                        clearInterval(tabChange);
                    });
                    $('.tabbox').mouseout(function() {
                        tabChange = setInterval(autotab, 3000);
                    });
                }
            });
        </script>
        <!-- 代码部分end -->

    </body>

</html>

拓展:增加滑动选项卡下过http://blog.csdn.net/libin_1/article/details/50379286

这里写图片描述

源码:

<!DOCTYPE HTML>
<html>

    <head>
        <meta charset="UTF-8" />
        <title>实例:jQuery弹性滑动导航菜单</title>
        <style type="text/css">
            body {
                font-size: 100%;
                font-family: "Microsoft YaHei", "Arial";
                background: #fff;
            }

            #nav {
                position: relative;
                width: 832px;
                border: 1px solid green;
                margin: 100px auto 0 auto;
                border-bottom: 3px solid #00FFFF;
            }

            #nav .nav-menu {
                height: 50px;
            }

            #nav .nav-menu a {
                display: block;
                float: left;
                height: 50px;
                padding: 0 40px;
                line-height: 50px;
                color: black;
                font-size: 16px;
                text-decoration: none;
            }

            #nav .nav-current {
                position: absolute;
                bottom: -3px;
                height: 3px;
                overflow: hidden;
                background: red;
            }
        </style>
        <script id="jquery_172" type="text/javascript" class="library" src="js/jquery-2.1.0.min.js"></script>
        <script type="text/javascript">
            $(function() {
                (function() {
                    //                  var $navcur = $(".nav-current");
                    //                  var $nav = $("#nav");
                    //                  var current = ".current";
                    var itemW = $("#nav").find(".current").innerWidth(); //默认当前位置宽度
                    var defLeftW = $("#nav").find(".current").position().left; //默认当前位置Left值
                    alert(itemW + '' + defLeftW);
                    //添加默认下划线
                    $(".nav-current").css({
                        width: itemW,
                        left: defLeftW
                    });
                    //hover事件
                    $("#nav").find("a").hover(function() {
                        var index = $(this).index(); //获取滑过元素索引值
                        var leftW = $(this).position().left; //获取滑过元素Left值
                        var currentW = $("#nav").find("a").eq(index).innerWidth(); //获取滑过元素Width值
                        $(".nav-current").stop().animate({
                            left: leftW,
                            width: currentW
                        }, 300);
                    }, function() {
                        $(".nav-current").stop().animate({
                            //                          left: defLeftW,
                            //                          width: itemW
                            left: leftW,
                            width: currentW            //鼠标离开不动
                        }, 300)
                    })
                })();
            });
        </script>
    </head>

    <body>
        <div id="nav">
            <div class="nav-menu">
                <a href="#" class="current">首页</a>
                <a href="#">了解我们</a>
                <a href="#">产品展示</a>
                <a href="#">服务报价</a>
                <a href="#">最新消息</a>
                <a href="#">联系方式</a>
            </div>
            <div class="nav-current"></div>
        </div>
    </body>

</html>

这里写图片描述

<!DOCTYPE html>
<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>鼠标滑过Tab选项卡切换特效</title>
        <style type="text/css">
            /*reset*/

            html,
            body,
            p,
            h1,
            h2,
            h3,
            h4,
            h5,
            h6,
            form,
            input,
            textarea,
            select,
            button,
            fieldset,
            legend,
            img,
            ul,
            ol,
            li,
            dl,
            dt,
            dd,
            th,
            td,
            pre,
            blockquote {
                margin: 0;
                padding: 0
            }

            html {
                height: 100%;
                -webkit-text-size-adjust: 100%;
                -ms-text-size-adjust: 100%;
                -webkit-font-smoothing: antialiased
            }

            body {
                background-color: #eee;
                color: #666;
                min-height: 100%;
                height: auto!important;
                height: 100%
            }

            body,
            button,
            input,
            select,
            textarea,
            h1,
            h2,
            h3,
            h4,
            h5,
            h6 {
                font: 12px/1 "宋体", "Microsoft Yahei", arial, simhei
            }

            table {
                border-collapse: collapse;
                border-spacing: 0
            }

            img,
            fieldset {
                border: 0;
                vertical-align: middle
            }

            a {
                text-decoration: none
            }

            a:visited {}

            a:hover {
                text-decoration: underline
            }

            a:active {}

            ul,
            li,
            ol {
                list-style: none
            }

            strong,
            b {
                font-weight: normal
            }

            em,
            i {
                font-style: normal
            }

            iframe {
                display: block
            }

            fieldset {
                border: 1px solid #c0c0c0;
                margin: 0 2px 18px;
                padding: 0.35em 0.625em 0.75em
            }

            legend {
                border: 0;
                padding: 0;
                white-space: normal;
                *margin-left: -7px
            }

            sup {
                vertical-align: text-top
            }

            sub {
                vertical-align: text-bottom
            }

            s {
                text-decoration: none;
            }
            /*public*/

            .fl {
                display: inline;
                float: left
            }

            .fr {
                display: inline;
                float: right
            }

            .cf:after {
                content: "";
                clear: both;
                display: block;
                height: 0;
                overflow: hidden
            }

            .cf {
                zoom: 1
            }

            .pb10 {
                padding-bottom: 10px
            }

            .mt10 {
                margin-top: 10px
            }
            /*main*/

            .case {
                width: 960px;
                margin: 100px auto;
                background: #fff;
                padding: 15px;
                box-shadow: 0 0 10px #ccc;
            }

            .case .title {
                height: 20px;
                border-bottom: 3px solid #e7e7e7;
                padding-bottom: 10px;
            }

            .case .title h2 {
                font-size: 20px;
                font-family: "microsoft yahei";
            }

            .case .title-list {
                position: relative;
                top: 6px;
                border: 1px solid red;
            }

            .case .title-list li {
                width: 146px;
                line-height: 20px;
                text-align: center;
                float: left;
                background: palegreen;
                display: inline;
                cursor: pointer;
            }

            .case .title-list li.on {
                color: red;
                font-weight: bold;
            }

            .case .title-list p {
                position: absolute;
                top: 24px;
                left: 0px;
                width: 146px;
                height: 7px;
                border-top: 3px solid #ff6600;
                overflow: hidden;
                text-align: center;
            }

            .case .title-list b {
                display: inline-block;
                width: 0;
                height: 0;
                margin-top: -3px;
                border-style: solid dashed dashed dashed;
                /*画倒三角*/
                border-width: 9px;
                border-color: #ff6600 #fff #fff #fff;
                /*画倒三角*/
                overflow: hidden;
                zoom: 1;
                font-size: 0;
            }

            .product {
                height: 268px;
                position: relative;
                overflow: hidden;
                display: none;
                margin-top: 20px;
            }

            .product ul {
                position: absolute;
                left: 0px;
            }

            .product-wrap .show {
                display: block;
            }

            .product-wrap .product li {
                float: left;
                display: inline;
                margin-left: 13px;
                background: #f3f3f3;
                border: 2px solid #fafafa;
                transition: 0.4s;
                -webkit-transition: 0.4s;
                -moz-transition: 0.4s;
                -o-transition: 0.4s;
                -ms-transition: 0.4s;
            }

            .product-wrap .product li.ml0 {
                margin-left: 0px;
            }

            .product-wrap .product li a.imgwrap {
                display: block;
                width: 226px;
                height: 200px;
                background: #fff;
                text-align: center;
            }

            .product-wrap .product li p {
                padding-left: 15px;
                color: #666666;
                line-height: 22px;
            }

            .product-wrap .product li p a {
                color: #666666;
                text-decoration: none;
            }

            .product-wrap .product li p a:hover {
                color: #ff6600;
                text-decoration: none;
            }
        </style>
        <script type="text/javascript" src="js/jquery-2.1.0.min.js"></script>
        <script type="text/javascript" src="js/zzsc.js"></script>
    </head>

    <body>

        <div class="case">
            <div class="title cf">
                <h2 class="fl">设计案例</h2>
                <ul class="title-list fr cf ">
                    <li class="on">LOGO</li>
                    <li>宣传单</li>
                    <li>画册</li>
                    <li>优惠券</li>
                    <li>会员卡</li>
                    <p><b></b></p>
                </ul>
            </div>
            <div class="product-wrap">
                <!--案例1-->
                <div class="product show">
                    <ul class="cf">
                        <li class="ml0">
                            <a href="http://www.zzsck.org" target="_blank" class="imgwrap">
                                <img src="images/1.jpg">
                            </a>
                            <p class="mt10"> <a href="http://www.zzsck.org" target="_blank">站长素材网站logo... </a></p>
                            <p class="pb10">行业类别:艺术摄影,文化体育</p>
                        </li>
                        <li>
                            <a href="http://www.zzsck.org" target="_blank" class="imgwrap">
                                <img src="images/1.jpg">
                            </a>
                            <p class="mt10"> <a href="http://www.zzsck.org" target="_blank"> 深圳达文影视传媒有限公司logo... </a></p>
                            <p class="pb10">行业类别:艺术摄影,文化体育</p>
                        </li>
                        <li>
                            <a href="http://www.zzsck.org" target="_blank" class="imgwrap">
                                <img src="images/1.jpg">
                            </a>
                            <p class="mt10"> <a href="http://www.zzsck.org" target="_blank"> 深圳达文影视传媒有限公司logo... </a></p>
                            <p class="pb10">行业类别:艺术摄影,文化体育</p>
                        </li>
                        <li>
                            <a href="http://www.zzsck.org" target="_blank" class="imgwrap">
                                <img src="images/1.jpg">
                            </a>
                            <p class="mt10"> <a href="http://www.zzsck.org" target="_blank"> 深圳达文影视传媒有限公司logo... </a></p>
                            <p class="pb10">行业类别:艺术摄影,文化体育</p>
                        </li>
                    </ul>
                </div>
                <!--案例2-->
                <div class="product">
                    <ul class="cf">
                        <li class="ml0">
                            <a href="http://www.zzsck.org" target="_blank" class="imgwrap">
                                <img src="images/2.jpg">
                            </a>
                            <p class="mt10"> <a href="http://www.zzsck.org" target="_blank"> 深圳达文影视传媒有限公司logo... </a></p>
                            <p class="pb10">行业类别:艺术摄影,文化体育</p>
                        </li>
                        <li>
                            <a href="http://www.zzsck.org" target="_blank" class="imgwrap">
                                <img src="images/2.jpg">
                            </a>
                            <p class="mt10"> <a href="http://www.zzsck.org" target="_blank"> 深圳达文影视传媒有限公司logo... </a></p>
                            <p class="pb10">行业类别:艺术摄影,文化体育</p>
                        </li>
                        <li>
                            <a href="http://www.zzsck.org" target="_blank" class="imgwrap">
                                <img src="images/2.jpg">
                            </a>
                            <p class="mt10"> <a href="http://www.zzsck.org" target="_blank"> 深圳达文影视传媒有限公司logo... </a></p>
                            <p class="pb10">行业类别:艺术摄影,文化体育</p>
                        </li>
                        <li>
                            <a href="http://www.zzsck.org" target="_blank" class="imgwrap">
                                <img src="images/2.jpg">
                            </a>
                            <p class="mt10"> <a href="http://www.zzsck.org" target="_blank"> 深圳达文影视传媒有限公司logo... </a></p>
                            <p class="pb10">行业类别:艺术摄影,文化体育</p>
                        </li>
                    </ul>
                </div>
                <!--案例3-->
                <div class="product">
                    <ul class="cf">
                        <li class="ml0">
                            <a href="http://www.zzsck.org" target="_blank" class="imgwrap">
                                <img src="images/3.jpg">
                            </a>
                            <p class="mt10"> <a href="http://www.zzsck.org" target="_blank"> 深圳达文影视传媒有限公司logo... </a></p>
                            <p class="pb10">行业类别:艺术摄影,文化体育</p>
                        </li>
                        <li>
                            <a href="http://www.zzsck.org" target="_blank" class="imgwrap">
                                <img src="images/3.jpg">
                            </a>
                            <p class="mt10"> <a href="http://www.zzsck.org" target="_blank"> 深圳达文影视传媒有限公司logo... </a></p>
                            <p class="pb10">行业类别:艺术摄影,文化体育</p>
                        </li>
                        <li>
                            <a href="http://www.zzsck.org" target="_blank" class="imgwrap">
                                <img src="images/3.jpg">
                            </a>
                            <p class="mt10"> <a href="http://www.zzsck.org" target="_blank"> 深圳达文影视传媒有限公司logo... </a></p>
                            <p class="pb10">行业类别:艺术摄影,文化体育</p>
                        </li>
                        <li>
                            <a href="http://www.zzsck.org" target="_blank" class="imgwrap">
                                <img src="images/3.jpg">
                            </a>
                            <p class="mt10"> <a href="http://www.zzsck.org" target="_blank"> 深圳达文影视传媒有限公司logo... </a></p>
                            <p class="pb10">行业类别:艺术摄影,文化体育</p>
                        </li>
                    </ul>
                </div>
                <!--案例4-->
                <div class="product">
                    <ul class="cf">
                        <li class="ml0">
                            <a href="http://www.zzsck.org" target="_blank" class="imgwrap">
                                <img src="images/4.jpg">
                            </a>
                            <p class="mt10"> <a href="http://www.zzsck.org" target="_blank"> 深圳达文影视传媒有限公司logo... </a></p>
                            <p class="pb10">行业类别:艺术摄影,文化体育</p>
                        </li>
                        <li>
                            <a href="http://www.zzsck.org" target="_blank" class="imgwrap">
                                <img src="images/4.jpg">
                            </a>
                            <p class="mt10"> <a href="http://www.zzsck.org" target="_blank"> 深圳达文影视传媒有限公司logo... </a></p>
                            <p class="pb10">行业类别:艺术摄影,文化体育</p>
                        </li>
                        <li>
                            <a href="http://www.zzsck.org" target="_blank" class="imgwrap">
                                <img src="images/4.jpg">
                            </a>
                            <p class="mt10"> <a href="http://www.zzsck.org" target="_blank"> 深圳达文影视传媒有限公司logo... </a></p>
                            <p class="pb10">行业类别:艺术摄影,文化体育</p>
                        </li>
                        <li>
                            <a href="http://www.zzsck.org" target="_blank" class="imgwrap">
                                <img src="images/4.jpg">
                            </a>
                            <p class="mt10"> <a href="http://www.zzsck.org" target="_blank"> 深圳达文影视传媒有限公司logo... </a></p>
                            <p class="pb10">行业类别:艺术摄影,文化体育</p>
                        </li>
                    </ul>
                </div>

                <!--案例5-->
                <div class="product">
                    <ul class="cf">
                        <li class="ml0">
                            <a href="http://www.zzsck.org" target="_blank" class="imgwrap">
                                <img src="images/5.jpg">
                            </a>
                            <p class="mt10"> <a href="http://www.zzsck.org" target="_blank"> 深圳达文影视传媒有限公司logo... </a></p>
                            <p class="pb10">行业类别:艺术摄影,文化体育</p>
                        </li>
                        <li>
                            <a href="http://www.zzsck.org" target="_blank" class="imgwrap">
                                <img src="images/5.jpg">
                            </a>
                            <p class="mt10"> <a href="http://www.zzsck.org" target="_blank"> 深圳达文影视传媒有限公司logo... </a></p>
                            <p class="pb10">行业类别:艺术摄影,文化体育</p>
                        </li>
                        <li>
                            <a href="http://www.zzsck.org" target="_blank" class="imgwrap">
                                <img src="images/5.jpg">
                            </a>
                            <p class="mt10"> <a href="http://www.zzsck.org" target="_blank"> 深圳达文影视传媒有限公司logo... </a></p>
                            <p class="pb10">行业类别:艺术摄影,文化体育</p>
                        </li>
                        <li>
                            <a href="http://www.zzsck.org" target="_blank" class="imgwrap">
                                <img src="images/5.jpg">
                            </a>
                            <p class="mt10"> <a href="http://www.zzsck.org" target="_blank"> 深圳达文影视传媒有限公司logo... </a></p>
                            <p class="pb10">行业类别:艺术摄影,文化体育</p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div style="text-align:center;clear:both">
            <p>更多资源请到<a href="http://www.zzsck.org/js">js特效</a>下载!</p>
        </div>
        <script type="text/javascript">
            $(function() {
                //设计案例切换
                $('.title-list li').mouseenter(function() { //可以改为click
                    var liindex = $(this).index();
                    $(this).addClass('on').siblings().removeClass('on');
                    $('.product-wrap div.product').eq(liindex).fadeIn(550).siblings('div.product').hide();
                    var liWidth = $('.title-list li').width();
                    $('.case .title-list p').stop(false, true).animate({
                        'left': liindex * liWidth + 'px'
                    }, 300);
                });








                //设计案例hover效果
                $('.product-wrap .product li').hover(function() {
                    $(this).css("border-color", "blue");
                    $(this).find('p > a').css('color', 'red');
                    $(this).find('p').css('color', 'red');
                }, function() {
                    $(this).css("border-color", "#fafafa");
                    $(this).find('p > a').css('color', '#666666');
                    $(this).find('p').css('color', '#666666');
                });
            });
        </script>
    </body>

</html>

根据以上的例子对第一个做可滑动选项卡(自动滑动关闭)

这里写图片描述

 <!DOCTYPE html>
<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>tab标签选项卡切换jQuery特效</title>
        <meta http-equiv="refresh" content="100">
        <script src="js/jquery-2.1.0.min.js"></script>
        <style>
            * {
                margin: 0;
                padding: 0;
                list-style: none;
            }

            body {
                font-size: 12px;
                color: #666;
                text-align: left;
            }

            .tabbox {
                width: 500px;
                height: 140px;
                margin: 10px auto;
                background: #f0f0f0;
                font-family: '微软雅黑';
                border: 1px solid red;
            }

            .tabbox .tab {
                position: relative;
                overflow: hidden !important;
                background: pink;
                border-bottom: 1px solid blueviolet;
            }

            .tabbox .tab a {
                position: relative;
                display: block;
                padding: 10px 20px;
                float: left;
                text-decoration: none;
                color: blue;
                border: 0px solid red;
            }

            .tabbox .tab a:hover {
                background: red;
                color: green;
                text-decoration: none;
            }

            .tabbox .tab a.on {
                background: red;
                color: green;
                text-decoration: none;
            }

            .tabbox .content {
                overflow: hidden;
                width: 500px;
                height: 100px;
                position: relative;
            }

            .tabbox .content ul {
                position: absolute;
                left: 0;
                top: 0;
                width: 500px;
                height: 100px;
            }

            .tabbox .content li {
                width: 500px;
                height: 100px;
                float: left;
            }

            .tabbox .content li p {
                padding: 30px;
            }

            #btn {
                position: absolute;
                bottom: 0px;
                height: 2px;
                overflow: hidden;
                background: black;
            }
        </style>

    </head>

    <body>

        <!-- 代码部分begin -->
        <div class="tabbox">
            <div class="tab">
                <a href="javascript:;" class="on">tab1</a>
                <a href="javascript:;">tab2</a>
                <a href="javascript:;">tab3</a>
                <a href="javascript:;">tab4</a>
                <div id="btn"></div>
            </div>
            <div class="content">
                <ul>
                    <li>
                        <p>tab1内容1</p>
                    </li>
                    <li>
                        <p>tab1内容2</p>
                    </li>
                    <li>
                        <p>tab1内容3</p>
                    </li>
                    <li>
                        <p>tab1内容4</p>
                    </li>
                </ul>
            </div>
        </div>

        <script>
            $(function() {
                var itemW = $(".tab").find(".on").innerWidth();
                $('#btn').css('width', itemW);
                $(".tab").find("a").hover(function() {
                    var index = $(this).index(); //获取滑过元素索引值
                    var leftW = $(this).position().left; //获取滑过元素Left值
                    var currentW = $(".tab").find("a").eq(index).innerWidth(); //获取滑过元素Width值
                    $('#btn').stop(true, true).animate({
                        left: leftW,
                        width: currentW
                    }, 300);
                }, function() {
                    $('#btn').stop(true, true).animate({
                        //                          left: defLeftW,
                        //                          width: itemW
                        left: leftW,
                        width: currentW //鼠标离开不动
                    }, 300)
                })
                $('.tabbox .content ul').width(500 * $('.tabbox .content li').length + 'px');
                $(".tabbox .tab a").mouseover(function() {
                    $(this).addClass('on').siblings().removeClass('on');
                    var index = $(this).index(); //检索当前元素的位置是第几个
                    number = index; //定义全局变量
                    var distance = -500 * index;
                    $('.tabbox .content ul').stop().animate({
                        left: distance
                    });
                });
                var auto = 0; //等于1则自动切换,其他任意数字则不自动切换
                if (auto == 1) {
                    var number = 0;
                    var maxNumber = $('.tabbox .tab a').length;

                    function autotab() {
                        number++;
                        number == maxNumber ? number = 0 : number;
                        $('.tabbox .tab a:eq(' + number + ')').addClass('on').siblings().removeClass('on');
                        var distance = -500 * number;
                        $('.tabbox .content ul').stop().animate({
                            left: distance
                        });
                    }
                    var tabChange = setInterval(autotab, 300);
                    //鼠标悬停暂停切换
                    $('.tabbox').mouseover(function() {
                        clearInterval(tabChange);
                    });
                    $('.tabbox').mouseout(function() {
                        tabChange = setInterval(autotab, 3000);
                    });
                }
            });
        </script>
        <!-- 代码部分end -->

    </body>

</html>

根据以上的例子对第一个做可滑动选项卡(自动滑动关闭)

这里写图片描述

这个在做的时候添加样式后看到 li 元素浮动无效

.tabbox .content {
                /*overflow: hidden;*/
                width: 500px;
                height: 100px;
                position: relative;
            }

            .tabbox .content ul {
                position: absolute;
                left: 0;
                top: 0;
                width: 500px;
                height: 200px;
            }

            .tabbox .content li {
                width: 500px;
                height: 200px;
                float: left;
                border: 1px solid chartreuse; 
                /*可以看到浮动无效*/
            }

这里写图片描述

不过不用怕,添加了JS就好了
这里写图片描述

代码:

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>实例:jQuery弹性滑动导航菜单</title>
        <script src="js/jquery-2.1.0.min.js"></script>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                list-style: none;
            }

            body {
                font-size: 100%;
                font-family: "Microsoft YaHei", "Arial";
                background: #fff;
                text-align: left;
            }

            .tabbox {
                width: 500px;
                height: 250px;
                margin: 10px auto;
                background: #f0f0f0;
                font-family: '微软雅黑';
                border: 1px solid red;
            }
            #nav {
                position: relative;
                width:500px;
                border: 1px solid green;
                /*border-bottom: 3px solid #00FFFF;*/
            }

            #nav .nav-menu {
                height: 50px;
            }

            #nav .nav-menu a {
                display: block;
                float: left;
                height: 50px;
                padding: 0 10px;
                line-height: 50px;
                color: black;
                font-size: 16px;
                text-decoration: none;
            }

            #nav .nav-current {
                position: absolute;
                bottom: -3px;
                height: 3px;
                overflow: hidden;
                background: black;
            }

            .tabbox .content {
                /*overflow: hidden;*/
                width: 500px;
                height: 100px;
                position: relative;
            }

            .tabbox .content ul {
                position: absolute;
                left: 0;
                top: 0;
                width: 500px;
                height: 200px;
            }

            .tabbox .content li {
                width: 500px;
                height: 200px;
                float: left;
                border: 1px solid chartreuse; 

            }

            .tabbox .content li p {
                padding: 30px;
            }

        </style>


    </head>

    <body>
        <div class="tabbox">
            <div id="nav">
                <div class="nav-menu">
                    <a href="#" class="current">首页</a>
                    <a href="#">了解我们</a>
                    <a href="#">产品展示</a>
                    <a href="#">服务报价</a>
                    <a href="#">最新消息</a>
                    <a href="#">联系方式</a>
                </div>
                <div class="nav-current"></div>
            </div>
            <div class="content">
                <ul>
                    <li>
                        <p>tab1内容1</p>
                    </li>
                    <li>
                        <p>tab1内容2</p>
                    </li>
                    <li>
                        <p>tab1内容3</p>
                    </li>
                    <li>
                        <p>tab1内容4</p>
                    </li>
                    <li>
                        <p>tab1内容5</p>
                    </li>
                    <li>
                        <p>tab1内容6</p>
                    </li>
                </ul>
            </div>
        </div>
    </body>
    <script type="text/javascript">
        $(function() {
            (function() {
                //                  var $navcur = $(".nav-current");
                //                  var $nav = $("#nav");
                //                  var current = ".current";
                var itemW = $("#nav").find(".current").innerWidth(); //默认当前位置宽度
                var defLeftW = $("#nav").find(".current").position().left; //默认当前位置Left值
                //  alert(itemW + '' + defLeftW);
                //添加默认下划线
                $(".nav-current").css({
                    width: itemW,
                    left: defLeftW
                });
                //hover事件
                $("#nav").find("a").hover(function() {
                    var index = $(this).index(); //获取滑过元素索引值
                    var leftW = $(this).position().left; //获取滑过元素Left值
                    var currentW = $("#nav").find("a").eq(index).innerWidth(); //获取滑过元素Width值
                    $(".nav-current").stop().animate({
                        left: leftW,
                        width: currentW
                    }, 300);
                }, function() {
                    $(".nav-current").stop().animate({
                        //                          left: defLeftW,
                        //                          width: itemW
                        left: leftW,
                        width: currentW //鼠标离开不动
                    }, 300)
                });


        $('.tabbox .content ul').width(500 * $('.tabbox .content li').length + 'px');
              $(".tabbox #nav a").mouseover(function() {
                   $(this).addClass('on').siblings().removeClass('on');
                    var index = $(this).index();      //检索当前元素的位置是第几个
                   number = index;      //定义全局变量
                  var distance = -500 * index;
                  $('.tabbox .content ul').stop().animate({
                       left: distance
                   });
             });   









            })();
        });
    </script>

</html>

网友评论

登录后评论
0/500
评论
cometwo123
+ 关注