jQuery实现选项卡Tab菜单滚动

代码简介：

jQuery 让你的Tab菜单滚动的代码,先运行一下看看效果咋样?是不是超不错,让你的网页变得灵动起来,不再静止,学习jquery的朋友也可作为范例来参考吧.

代码内容：

View Code

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>jQuery实现选项卡Tab菜单滚动_网页代码站(www.webdm.cn)</title>
<script type="text/javascript" src="http://www.webdm.cn/themes/script/jquery.js"></script>
<style>

    body {
        font-family:arial;
        font-size:12px;
    }

    a {
        color:#333;
        text-decoration:none;
        display:block;
    }

    a:hover {
        color:#888;
        text-decoration:none;
    }

    #moving_tab {
        overflow:hidden;
        width:300px;
        position:relative
        border:1px solid #ccc;
        margin:0 auto;
    }

        #moving_tab .tabs {
            position:relative;
            height:30px;
            padding-top:5px;
            cursor:default;
        }

        #moving_tab .tabs .item {
            position:relative;
            z-index:10;
            float:left;
            display:block;
            width:150px;
            text-align:center;
            font-size:14px;
            font-weight:700;
        }

        #moving_tab .tabs .lava {
            position:absolute;
            top:0; left:0;
            z-index:0;
            width:150px;
            height:30px;
            background:#abe3eb;

        }

        #moving_tab .content {
            position:relative;
            overflow:hidden;
            background:#abe3eb;
            border-top:1px solid #d9fafa;
        }

        #moving_tab .panel {
            position:relative;
            width:600px;
        }

        #moving_tab .panel ul {
            float:left;
            width:300px;
            padding:0;
            margin:0;
            list-style:none;
        }
            #moving_tab .panel ul li {
                padding:5px 0 5px 10px;
                border-bottom:1px dotted #fff;
            }
    </style>
    <script>
    $(document).ready(function () {
        $('.lava').css({left:$('span.item:first').position()['left']});
        $('.item').mouseover(function () {
            $('.lava').stop().animate({left:$(this).position()['left']}, {duration:200});
            $('.panel').stop().animate({left:$(this).position()['left'] * (-2)}, {duration:200});
        });

    });

    </script>
</head>
<body>

<div id="moving_tab">
    <div class="tabs">
        <div class="lava"></div>
        <span class="item">Popular Posts</span>
        <span class="item">Recent Posts</span>

    </div>

    <div class="content">
        <div class="panel">
            <ul>
                <li><a href='/'>Panel 01 Item 01</a></li>
                <li><a href='http://www.webdm.cn'>Panel 01 Item 02</a></li>
                <li><a href='#'>Panel 01 Item 03</a></li>
                <li><a href='#'>Panel 01 Item 04</a></li>
                <li><a href='#'>Panel 01 Item 05</a></li>
            </ul>
            <ul>
                <li><a href='#'>Panel 02 Item 01</a></li>
                <li><a href='#'>Panel 02 Item 02</a></li>
                <li><a href='#'>Panel 02 Item 03</a></li>
                <li><a href='#'>Panel 02 Item 04</a></li>
                <li><a href='#'>Panel 02 Item 05</a></li>
            </ul>
        </div>

    </div>
</div>
<br />
<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码！</p>
</body>
</html>
代码来自：http://www.webdm.cn/webcode/cde6a378-e9e6-4004-ac96-f56b1d46016a.html

posted @ 2011-07-28 11:22 网页代码站阅读(897) 评论(0) 编辑收藏举报

刷新页面返回顶部

jQuery实现选项卡Tab菜单滚动

公告