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

能拖动菜单

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

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

以下是程序代码

<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/34166' title='苹果多色彩！葫芦里究竟卖的什么药' target="_blank">
                        苹果多色彩！葫芦里究竟卖的什么药</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34245' title='568倍PE，“长跑者”亚马逊的高估值之谜' target="_blank">
                        568倍PE，“长跑者”亚马逊的高估值之谜</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34137' title='国网公司将加快组建 业界人士称困难重重' target="_blank">
                        国网公司将加快组建 业界人士称困难重重</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34153' title='高德百度地图免费背后：李彦宏暗斗马云周鸿祎' target="_blank">
                        高德百度地图免费背后：李彦宏暗斗马云周鸿祎</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34285' title='京东确定IPO定价区间 最高募资16.9亿美元' target="_blank">
                        京东确定IPO定价区间 最高募资16.9亿美元</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34107' title='“宽带中国”计划已正式上升为国家战略' target="_blank">
                        “宽带中国”计划已正式上升为国家战略</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/6913' title='PC迎9年来出货量新低 平板电脑渐成主流' target="_blank">
                        PC迎9年来出货量新低 平板电脑渐成主流</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/16163' title='马云寄厚望于物流 “菜鸟”行情暂难持续' target="_blank">
                        马云寄厚望于物流 “菜鸟”行情暂难持续</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34275' title='阿里巴巴450亿勾画“现代服务业”藏宝图' target="_blank">
                        阿里巴巴450亿勾画“现代服务业”藏宝图</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 爱易网页 当前在线：222人　
        网站在1时57分7秒内访问总人数：16400人
    当前 11.36%
　<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>