鼠标拖动导航条

鼠标拖动导航条效果

• 全部
• 航空航天
• 船舶制造
• 机械制造
• 电气制造
• 新一代信息技术
• 节能环保
• 新能源汽车
• 仪器仪表制造
• 有色金属

 

 

<html>  
<head>  
    <title>test</title>  
</head>  
  <style>
    .Tab{width: 1000px;margin: 100px auto;}
    .Tab ul{width: 100%;height: auto;float: left;}
    .Tab ul li{display:block; margin:3px; float: left;}
    #Drag_div{width:400px;overflow-x:hidden;}
</style>
<body>  
    <div id="Drag_div" onselectstart="return false">   

        <div class="Tab" >
            <ul id="Tab_Content">
                <li><a href="javascript:void(0);"/>全部</a></li>
                <li><a href="javascript:void(0);"/>航空航天</a></li>
                <li><a href="javascript:void(0);"/>船舶制造</a></li>
                <li><a href="javascript:void(0);"/>机械制造</a></li>
                <li><a href="javascript:void(0);"/>电气制造</a></li>
                <li><a href="javascript:void(0);"/>新一代信息技术</a></li>
                <li><a href="javascript:void(0);"/>节能环保</a></li>
                <li><a href="javascript:void(0);"/>新能源汽车</a></li>
                <li><a href="javascript:void(0);"/>仪器仪表制造</a></li>
                <li><a href="javascript:void(0);"/>有色金属</a></li>
            </ul>
        </div>
    </div>  
      
    <script type="text/javascript">  
        var x0 =0 ;  
        var drag = false;  
        var i=0;
        var drag_div=document.getElementById('Drag_div');
        drag_div.onmousedown = function (event) {    
            if(!event) event = window.event;  
            x0 = event.clientX;  
            drag = true;  
            var a=document.getElementById("Tab_Content").style.marginLeft.substring(0,document.getElementById("Tab_Content").style.marginLeft.length-2);
            if(a!="")
                i=parseInt(a);
        }  
        drag_div.onmousemove = function (event) {  

            if(drag) {  
                if(!event) event = window.event;  
                var x = event.clientX;  
                document.getElementById("Tab_Content").style.marginLeft =  (i+(x-x0)) + "px";
            }  
        }  
        drag_div.onmouseup = function (event) {  
            if(!event) event = window.event;  
            x0 = 0;  
            drag = false;  
        }  
      
    </script>  
</body>  
  
</html>