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

 

转载于:https://www.cnblogs.com/webdm/archive/2011/07/28/2119320.html