菜单变换与拖动-JS特效-爱易网页

菜单变换与拖动

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

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

以下是程序代码

脚本说明:
把如下代码加入<body>区域中
<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>
<div class="nmodiv"></div>
<span id="gall" style="position:absolute;left:0px;z-index:2">

<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="432">下一篇：导航百分比控制</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/34265' title='总部大楼已换微软Logo：回忆诺基亚的兴衰史' target="_blank">
                        总部大楼已换微软Logo：回忆诺基亚的兴衰史</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34369' title='同程旅游融资后变土豪 如何烧钱占领市场？' target="_blank">
                        同程旅游融资后变土豪 如何烧钱占领市场？</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34414' title='高通反垄断案下月有望落定' target="_blank">
                        高通反垄断案下月有望落定</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34359' title='2013年至今中国互联网行业十大并购案汇总' target="_blank">
                        2013年至今中国互联网行业十大并购案汇总</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34237' title='诺基亚称不会更名“微软移动” 5月还将发布新品' target="_blank">
                        诺基亚称不会更名“微软移动” 5月还将发布新品</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34436' title='华为、小米和联想在中国手机市场上演“三国杀”' target="_blank">
                        华为、小米和联想在中国手机市场上演“三国杀”</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/393' title='NEC拟出售移动效劳子公司NEC Mobile ' target="_blank">
                        NEC拟出售移动效劳子公司NEC Mobile </a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/10810' title='网曝富士康500万iphone遭退货是确证的事' target="_blank">
                        网曝富士康500万iphone遭退货是确证的事</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34450' 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-2025 爱易网页 当前在线：231人　
        网站在8时3分14秒内访问总人数：106621人
    当前 5.77%
　<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>