能拖动菜单-JS特效-爱易网页

能拖动菜单

日期：2014-05-18　浏览次数：20488 次

欢迎光临爱易网网页脚本特效中心，点击运行按钮演示特效：

以下是程序代码

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
<!--
body{background-color:#ffffff;
     margin-top:0px;
     margin-left:0px;
     font-size:12px;
     font-family:宋体;
   color:#996699;
     line-height:18px;
     }
  
.nmodiv{position:absolute;
        left:3px;
        top:100;
        width:135px;
        height:600px;
        border:#996699 1px solid;
        z-index:1}
.bmodiv{position:absolute;
        left:-198px;
        top:-20px;
        width:185px;
        background-color:#EEFFBB;
        border:#996699 1px solid;
        padding:15 15 15 20;
        line-height:21px;
        z-index:3;
        }
.modiv{position:relative;
       left:11px;top:145px;
       width:164px;
       height:20px;
       background-color:#ffffff;
       border:#996699 1px solid;
       padding:3 5 0 20;
       margin-bottom:12px;
       z-index:3;
       }  
.heads1{color:#cc0066;cursor:hand}

/*.modiv{behavior:url(smm.htc)}*/
-->
</style>

var zz=0
function find(obj){
zz=obj
x=document.body.scrollLeft+event.clientX-zz.style.pixelLeft
zz.setCapture();
}
function moves(){
  if(zz==0)return false;
  else{
    if(document.body.scrollLeft+event.clientX-x>365){
      zz.style.pixelLeft=365
    }
    else if(document.body.scrollLeft+event.clientX-x<11){
      zz.style.pixelLeft=11
    }
    else{
      zz.style.pixelLeft=document.body.scrollLeft+event.clientX-x
    }
  }
}//控制拖动的层

function nomoves(){
var ason = new Array()
ason[0]='n01'
ason[1]='n02'
ason[2]='n03'
ason[3]='n04'
ason[4]='n05'
ason[5]='n06'
ason[6]='n07'
ason[7]='n08'
ason[8]='n09'
ason[9]='n10'
ason[10]='n11'
ason[11]='n12'
ason[12]='n13'
ason[13]='b01'
ason[14]='b02'
ason[15]='b03'
ason[16]='b04'
ason[17]='b05'
ason[18]='b06'
ason[19]='b07'
ason[20]='b08'
ason[21]='b09'
ason[22]='b10'
ason[23]='b11'
for(z=0;z<ason.length;z++){
  eval(ason[z]).style.pixelLeft=11
  }
}//控制被拖动的层

function allm(obj){
if(obj.style.pixelLeft<0){
gall.style.pixelLeft=-540
ball.style.pixelLeft=-540
obj.style.pixelLeft=0
}
}//块区的转换控制

function tover(obj){
obj.style.backgroundColor='#EEFFBB'
}
function tout(obj){
obj.style.backgroundColor='#FFFFFF'
}//背景控制

</script>

<title>ss－www.51windows.Net</title>
</head>

<body>

<div class="modiv" id="n01" 
onMouseOver="tover(this)"
onMouseOut="tout(this)"
    onMouseMove="moves()" 
    onMouseUp="this.releaseCapture();zz=0;tout(this)" 
    onMouseDown="find(this);nomoves()">
<span class="heads1">孙燕姿 [ 16 首 ]</span>   
<div  class="bmodiv" onMouseOver="mopopo()" onMouseDown="mopopo()">
01. Leave me alone

02. 爱情证书

03. 爱情字典

04. 不是真的爱我

05. 超快感

06. 乘着风

07. 风筝

08. 开始懂了

09. 零缺点

10. 绿光

11. 任性

12. 随堂测验

13. 逃亡

14. 天黑黑

15. 我是我

16. 我要的幸福

</div>
</div>

<div class="modiv" id="n02"
onMouseOver="tover(this)"
onMouseOut="tout(this)" 
    onMouseMove="moves()" 
    onMouseUp="this.releaseCapture();zz=0;tout(this)" 
    onMouseDown="find(this);nomoves()">
<span class="heads1">蔡依林 [ 07 首 ]</span>
<div class="bmodiv" onMouseOver="mopopo()" onMouseDown="mopopo()">
01. Because of you

02. Don't Stop

03. Lucky Number

04. 爱上了一条街

05. 感觉你的存在

06. 如过不想要

07. 我知道你很难过

</div>
</div>

<div class="clearfix"></div>
                    </div>
                    <nav aria-label="...">
                        <ul class="pager">
                            <li class="previous"><a href="4667">上一篇：狡猾的按钮特效</a></li>

<li class="next"><a href="391">下一篇：很简单的菜单</a></li>
                        </ul>
                    </nav>

<div class="alert alert-warning" role="alert">
                        <strong>免责声明：</strong> 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
                    </div>

<div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34457' title='黑狐病毒疯传播 电脑管家首推 专杀工具' target="_blank">
                        黑狐病毒疯传播 电脑管家首推 专杀工具</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34208' title='小灵通两年都无信号 顾客起诉联通公司' target="_blank">
                        小灵通两年都无信号 顾客起诉联通公司</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34409' title='雷军会做赔钱生意？迅雷跌破发行价 市值仅7亿美元' target="_blank">
                        雷军会做赔钱生意？迅雷跌破发行价 市值仅7亿美元</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34129' title='宽带中国战略明确 运营商建设成本超6000亿' target="_blank">
                        宽带中国战略明确 运营商建设成本超6000亿</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/10827' title='快递企业征收“份子钱” 成全了谁 苦了谁？' target="_blank">
                        快递企业征收“份子钱” 成全了谁 苦了谁？</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34265' title='总部大楼已换微软Logo：回忆诺基亚的兴衰史' target="_blank">
                        总部大楼已换微软Logo：回忆诺基亚的兴衰史</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34097' title='柳传志马云陷舆论漩涡：请不要辜负这个时代' target="_blank">
                        柳传志马云陷舆论漩涡：请不要辜负这个时代</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34386' title='十亿美元的告别礼：三星为何要大举重组？' target="_blank">
                        十亿美元的告别礼：三星为何要大举重组？</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/6851' title='苹果音乐效劳新战略：与唱片商停止流媒体协作' target="_blank">
                        苹果音乐效劳新战略：与唱片商停止流媒体协作</a></li></div>
                   
                
        </ol>
    </div>
</div>

</div>

</div>
            </div>
            <div class="clearfix"></div>

<footer class=" footer navbar-bottom">
<em>友情链接：</em>
    
      <a href="http://www.aiyiweb.com/" target="_blank">爱易网 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">云虚拟主机技术 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">云服务器技术 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">程序设计技术 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">开发网站 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">APP开发教程 </a>            
    
<br />
<script type="text/javascript">(function(){document.write(unescape('%3Cdiv id="bdcs"%3E%3C/div%3E'));var bdcs = document.createElement('script');bdcs.type = 'text/javascript';bdcs.async = true;bdcs.src = 'http://znsv.baidu.com/customer_search/api/js?sid=15239353030108964139' + '&plate_url=' + encodeURIComponent(window.location.href) + '&t=' + Math.ceil(new Date()/3600000);var s = document.getElementsByTagName('script')[0];s.parentNode.insertBefore(bdcs, s);})();</script>

Copyright © 2013-2026 爱易网页 当前在线：243人　
        网站在20时31分7秒内访问总人数：200537人
    当前 14.07%
　<a href="https://beian.miit.gov.cn" target="_blank">粤ICP备18100884号-2 </a>
<script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script>
<script>LA.init({ id: "JszEmKrtpbU59dY5", ck: "JszEmKrtpbU59dY5" })</script>

</footer>

</div>
   
</body>
</html>