JS实现网站菜单拖拽移位效果的方法

网络编程 2024/11/17 佚名

3 1 2

本文实例讲述了JS实现网站菜单拖拽移位效果的方法。分享给大家供大家参考。具体如下：

这是一个基于JavaScript的层手动实例，让网站的菜单可以拖拽移位，记得土豆网的“豆单”有这种功能。本效果还尚未彻底完成，部分地方因没有写入对应内容，因此JS可能会提示有错误。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-web-menu-tzyw-style-codes/

具体代码如下：

<html>
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>层拖动</title>
<style type="text/css">
*{ margin:0; padding:0}
li{ list-style:none}
.wapper{ width:500px; margin:50px;height:auto; overflow:hidden; position:relative; border:1px #e6e6e6 solid}
.wapper ol{ position:absolute;top:0; left:0}
.wapper li{width:30px; height:32px; line-height:32px; padding:3px 0; text-align:center;}
.wapper .m-li{ padding:3px 3px 3px 30px;height:32px;position:relative}
.wapper .m-li div,.wapper .m-li-cur div{ line-height:30px; height:30px;background:#ECF3F9; border:1px #ccc solid; padding:0 0 0 16px;color:#316DA9; font-size:14px;cursor:move;}
.wapper .m-li .m-sub-cur,.wapper .m-li-cur .m-sub-cur{opacity:0.35;filter:Alpha(opacity=35);}
.wapper .m-li-cur{ padding:0 3px 3px 30px; border-top:3px #FFDAAD solid}
.wapper .m-li-cur span{ padding:0 0 3px;}
#tips{ position:absolute; top:0;left:0;cursor:move; z-index:2;display:none}
#tips div{background:#FDFFDA;line-height:30px; height:30px;border:1px #ccc solid; padding:0 0 0 16px;color:#316DA9; font-size:14px;}
</style>
</head>
<body>
<div class="wapper" id="box">
<div class="m-wapper">
<div class="m-li"><div class="m-sub">ASP源码</div></div>
<div class="m-li"><div class="m-sub">PHP源码</div></div>
<div class="m-li"><div class="m-sub">JSP源码</div></div>
<div class="m-li"><div class="m-sub">JAVA源码</div></div>
</div>
<ol id="m-num"></ol>
<div id="tips"></div>
</div>
<script type="text/javascript">
document.getElementsByClassName=function(eleClassName){
 var getEleClass = [];
 var myclass = new RegExp("\\b"+eleClassName+"\\b");
 var elem = this.getElementsByTagName("*");
 for(var h=0;h<elem.length;h++){
  var classes = elem[h].className;
  if (myclass.test(classes)) getEleClass.push(elem[h]);
 }
 return getEleClass;
}
function $(o){
 var t = document.getElementById(o);
 return t" "+cls;
}
function removeClass(ele,cls) {
 if (hasClass(ele,cls)) {
   var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
 ele.className=ele.className.replace(reg,' ');
 }
}
function getStyle(o,n){
 return o.currentStyle"").getPropertyValue(n))
}
function f(){
 var d=document;
 var mNum = document.getElementById("m-num");
 var ols = document.getElementsByClassName("m-wapper")[0];
 var lis = document.getElementsByClassName("m-li");
 var divs = document.getElementsByClassName("m-sub");
 var tips = document.getElementById("tips");
 for(var i=0;i<divs.length;i++){
  var mnumNode=document.createElement("li");
  mNum.appendChild(mnumNode);
  mNum.getElementsByTagName("li")[i].innerHTML=i+1;
  divs[i].onmouseover=function(e){
   show(this);
  }
 }
 function show(obj){
  for(var i=0;i<divs.length;i++){
   if(divs[i]==obj){
    var voidNum=i;
    obj.onmousedown=function(e){
     var cloneNode=obj.cloneNode(true);/*克隆节点*/
     tips.appendChild(cloneNode);
     //alert(i)
     tips.style.width=obj.offsetWidth+"px";
     tips.style.display="block";
     //alert(voidNum);
     tips.style.top=(38*voidNum)+3+"px";
     tips.style.left="30px"
     for(var j=0;j<divs.length;j++){ /*恢复行默认样式*/
      divs[j].className="m-sub";
     }
     obj.className="m-sub-cur"; /*选中行添加新样式*/
     tips.onmouseover=function(e){
      window.getSelection "px";
       if(tipsTop <= 3){
        tips.style.top="3px";
       }
       if(tipsTop >= (38*(i-1)+3)){
        tips.style.top=38*(i-1)+3+"px";
       }
       lisNum = Math.round((tipsTop-3)/38);
       if(lisNum>=i){
         lisNum=i;
        }
       for(var n=0; n<divs.length; n++){
        lis[n]["className"]="m-li";
        lis[lisNum]["className"]="m-li-cur";
       }
       //obj.style.left=e.clientX-y+"px";
      }
      d.onmouseup = function(){ 
       d.onmouseup=d.onmousemove="";
       tips.style.display="none";
       for(var n=0; n<lis.length; n++){
        lis[n]["className"]="m-li";
       }
       obj.className="m-sub";
       var newNode=document.createElement("div");
       var delNode=tips.getElementsByTagName("div")[0];/*清空节点*/
       var delNode2=lis[voidNum];/*清空节点*/
       newNode.appendChild(delNode);
       newNode.className="m-li";
       ols.insertBefore(newNode,lis[lisNum]);
       ols.removeChild(delNode2);
       tips.removeChild(delNode);
      }
     }
    }
   }
  }
 }
}
f();
</script>
</body>
</html>

希望本文所述对大家的JavaScript程序设计有所帮助。

JS,网站菜单,拖拽移位,JS菜单

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“JS实现网站菜单拖拽移位效果的方法”

暂无评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年11月17日

JS实现网站菜单拖拽移位效果的方法

JS+CSS实现简易的滑动门效果代码

jQuery实现的经典竖向伸缩菜单效果代码

评论“JS实现网站菜单拖拽移位效果的方法”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接