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

菜单变换与拖动

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

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

以下是程序代码

脚本说明:
把如下代码加入<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/34430' title='传陌陌或12月赴美IPO 估值约30亿美元' target="_blank">
                        传陌陌或12月赴美IPO 估值约30亿美元</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34335' title='杨元庆去年总薪酬1.33亿元' target="_blank">
                        杨元庆去年总薪酬1.33亿元</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/6855' title='众贷网满月开张 网络金融监管再受质疑' target="_blank">
                        众贷网满月开张 网络金融监管再受质疑</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/16156' title='网曝富士康“二连跳” 疑因推静音模式' target="_blank">
                        网曝富士康“二连跳” 疑因推静音模式</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34234' title='完美入股盛大：一桩各怀心事的交易' target="_blank">
                        完美入股盛大：一桩各怀心事的交易</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34321' title='去看看外面的世界吧！别窝里斗了，中国在线旅游商们' target="_blank">
                        去看看外面的世界吧！别窝里斗了，中国在线旅游商们</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/439' title='工商下月将整治手机市场' target="_blank">
                        工商下月将整治手机市场</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34313' title='京东微信入口战略能否助力618大促创流量巅峰' target="_blank">
                        京东微信入口战略能否助力618大促创流量巅峰</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/10843' title='电信设备商淘金中国4G：华为中兴领衔' target="_blank">
                        电信设备商淘金中国4G：华为中兴领衔</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 爱易网页 当前在线：293人　
        网站在8时23分31秒内访问总人数：86894人
    3秒前 21.01%
　<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>