jquery水平滑动tab选项卡

1 、我们先来写一个

tag下面的移动的箭头。一般我们都会采用图片的形式。但是在这里就不用图片，纯的css也可以做到这样的效果。

<div style="width:150px; height:10px; overflow:hidden;">
    <div style="width:150px; height:3px; background:#ff6600;"></div>
    <div style=" width:0px;height:0px; border-width:5px; border-color:#ff6600 #fff #fff #fff; border-style:solid dashed dashed dashed; margin:0 auto; z-index:10;"></div>
</div>

采用以上的样式就可以得到一个下箭头。

 2 编写jquery效果

代码如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="js/jquery-1.8.2.js" type="text/javascript"></script>
    <style type="text/css">
    *{ margin:0px; padding:0px; text-decoration:none; font-family:"微软雅黑"; font-size:12px;color:Black;}
    .tag{width:400px;height:400px;border:1px solid gray;border-radius:3px;box-shadow:0px 0px 30px gray;}
    .top{width:400px;height:30px;}
    .top ul {width:400px;height:30px;overflow:hidden; margin:0px; padding:0px;}
    .top ul li{width:100px; height:30px; display:block; float:left;}
    .top ul li a {width:100px; height:30px; line-height:30px;display:inline-block; text-align:center;}
    .on{color:#ff6600 !important; font-weight:600;}
    .slide{width:400px;height:10px; overflow:hidden; position:relative;}
    .slide_01{width:100px; height:10px; position:absolute;top:0px;left:0px;}
    .slide_01_01{width:100px; height:3px; background:#ff6600;}
    .slide_01_02{width:0px; height:0px; border-width:5px; border-color:#ff6600 #fff #fff #fff; margin:0 auto; border-style:solid dashed dashed dashed;}
    .text{ width:400px; height:360px;}
    </style>
</head>
<body>
    <div class="tag">
        <div class="top">
            <ul class="tagTop">
                <li><a href="#" class="on">画册</a></li>
                <li><a href="#">优惠券</a></li>
                <li><a href="#">会员卡</a></li>
                <li><a href="#">友情链接</a></li>
            </ul>
        </div>
        <div class="slide">
            <div class="slide_01">
                <div class="slide_01_01"></div>
                <div class="slide_01_02"></div>
            </div>
        </div>
        <div class="text"></div>
    </div>
    <script type="text/javascript">
        $(function () {
            $.fn.tag = function (options) {
                var o = $.extend({}, options || {});
                var tagTop = $(o.tagTop);
                var slide = $(o.slide);
                
                //Index 拿到 Ul li  的Index, 移动slide
                var slideMove = function (Index) {
                    slide.stop().animate({ left: 100 * Index + "px" }, 1000, function () {
                    });
                };
                var tagMouseover = function () {
                    tagTop.children("li").mouseenter(function () {
                        tagTop.children("li").find("a").removeClass("on");
                        $(this).children("a").addClass("on");
                        var Index = $(this).index();
                        slideMove(Index);
                    });
                };
                tagMouseover();
            };
            $(window).load(function () {
                $(".tag").tag({
                    tagTop: ".tagTop",
                    slide: ".slide_01",
                    text: ".text"
                });
            });
        });
    </script>
</body>
</html>

 刚和Q群上的人聊天，说到一个弹性的运动的功能，其实就是加上了“easeOutElastic”特效。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="js/jquery.easing.js" type="text/javascript"></script>
    <style type="text/css">
    *{ margin:0px; padding:0px; text-decoration:none; font-family:"微软雅黑"; font-size:12px;color:Black;}
    .tag{width:400px;height:400px;border:1px solid gray;border-radius:3px;box-shadow:0px 0px 30px gray;}
    .top{width:400px;height:30px;}
    .top ul {width:400px;height:30px;overflow:hidden; margin:0px; padding:0px;}
    .top ul li{width:100px; height:30px; display:block; float:left;}
    .top ul li a {width:100px; height:30px; line-height:30px;display:inline-block; text-align:center;}
    .on{color:#ff6600 !important; font-weight:600;}
    .slide{width:400px;height:10px; overflow:hidden; position:relative;}
    .slide_01{width:100px; height:10px; position:absolute;top:0px;left:0px;}
    .slide_01_01{width:100px; height:3px; background:#ff6600;}
    .slide_01_02{width:0px; height:0px; border-width:5px; border-color:#ff6600 #fff #fff #fff; margin:0 auto; border-style:solid dashed dashed dashed;}
    .text{ width:400px; height:360px;}
    </style>
</head>
<body>
    <div class="tag">
        <div class="top">
            <ul class="tagTop">
                <li><a href="#" class="on">画册</a></li>
                <li><a href="#">优惠券</a></li>
                <li><a href="#">会员卡</a></li>
                <li><a href="#">友情链接</a></li>
            </ul>
        </div>
        <div class="slide">
            <div class="slide_01">
                <div class="slide_01_01"></div>
                <div class="slide_01_02"></div>
            </div>
        </div>
        <div class="text"></div>
    </div>
    <script type="text/javascript">
        $(function () {
            $.fn.tag = function (options) {
                var o = $.extend({}, options || {});
                var tagTop = $(o.tagTop);
                var slide = $(o.slide);
                
                //Index 拿到 Ul li  的Index, 移动slide
                var slideMove = function (Index) {
                    slide.stop().animate({ left: 100 * Index + "px" }, 1000,"easeOutElastic", function () {
                    });
                };
                var tagMouseover = function () {
                    tagTop.children("li").mouseenter(function () {
                        tagTop.children("li").find("a").removeClass("on");
                        $(this).children("a").addClass("on");
                        var Index = $(this).index();
                        slideMove(Index);
                    });
                };
                tagMouseover();
            };
            $(window).load(function () {
                $(".tag").tag({
                    tagTop: ".tagTop",
                    slide: ".slide_01",
                    text: ".text"
                });
            });
        });
    </script>
</body>
</html>


全部贴代码出来，功能什么的如果不够好，你可以提出来，为啥你就爱说别人抄袭......再说这样的功能再简单不过了.......

posted @ 2014-02-25 22:15  菠萝君  阅读(2014)  评论(0)    收藏  举报