JavaScript内面内容上移、下移效果代码

发布时间：2018-08-18 06:28:19 所属栏目：交互来源：站长网

导读：Java Script内面内容上移、下移效果代码，这个不用详细解释了吧，看帖子标题我们就明白了，烈火网小编给大家介绍的是类似《烈火上网导航LiehuoWMS网址管理系统》中的内容上移、下移的功能，只不过这里实现的是简单功能，不多说了，自己看示例代码吧。示例

　　JavaScript内面内容上移、下移效果代码，这个不用详细解释了吧，看帖子标题我们就明白了，烈火网小编给大家介绍的是类似《烈火上网导航LiehuoWMS网址管理系统》中的内容上移、下移的功能，只不过这里实现的是简单功能，不多说了，自己看示例代码吧。

　　示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head> <meta content="text/html; charset=gbk" http- equiv="Content-Type"> <title>myOrder上移、下移效果</title> <style type="text/css"> * { padding:0; margin:0; } .content {width:500px;margin:20px auto;} #pCon {width:500px;list-style:none;} #pCon li {height:20px;display:block;border-bottom:1px #ccc solid;} #pCon li a{margin-left:5px;text- decoration:none;} #pCon li a:hover{cursor:hand;} .context {float:left;display:inline;} .control {float:right;display:inline;} .control img {width:50px;height:12px;overflow:hidden;float:l eft;display:inline;} hr {margin:30px auto;} #pCon1 {width:500px;list-style:none;} #pCon1 li {height:20px;display:block;border-bottom:1px #ccc solid;} #pCon1 li a{margin-left:5px;text- decoration:none;} #pCon1 li a:hover{cursor:hand;} </style> </head> <body> <div class="content"> <ul id="pCon"> <li><div class="context">神马都是浮云 A</div></li> <li><div class="context">神马都是浮云 B</div></li> <li><div class="context">神马都是浮云 C</div></li> <li><div class="context">神马都是浮云 D</div></li> <li><div class="context">神马都是浮云 E</div></li> </ul> <hr/> <ul id="pCon1"> <li><div class="context">神马都是浮云 A</div></li> <li><div class="context">神马都是浮云 B</div></li> <li><div class="context">神马都是浮云 C</div></li> <li><div class="context">神马都是浮云 D</div></li> <li><div class="context">神马都是浮云 E</div></li> </ul> </div> <script> function moveSonU(tag,pc){ var tagPre=get_previoussibling(tag); var t=document.getElementById(pc); if(tagPre!=undefined){ t.insertBefore(tag,tagPre); } } function moveSonD(tag){ var tagNext=get_nextsibling(tag); if(tagNext!=undefined){ insertAfter(tag,tagNext); } } function get_previoussibling(n){ if(n.previousSibling!=null){ var x=n.previousSibling; while (x.nodeType!=1) { x=x.previousSibling; } return x; } } function get_nextsibling(n){ if(n.nextSibling!=null){ var x=n.nextSibling; while (x.nodeType!=1) { x=x.nextSibling; } return x; } } function insertAfter(newElement,targetElement){ var parent=targetElement.parentNode; if(parent.lastChild==targetElement){ parent.appendChild(newElement); }else{ parent.insertBefore (newElement,targetElement.nextSibling); } } function myOrder(myList,m,mO,mT){ //myList为ul的id值，m为0显示文字，m为1显示图片，mO、mT为文字或图片内容 var pCon=document.getElementById (myList); var pSon=pCon.getElementsByTagName ("li"); for(i=0;i<pSon.length;i++){ var conTemp=document.createElement("div"); conTemp.setAttribute ("class","control"); var clickUp=document.createElement("a"); var clickDown=document.createElement("a"); if(m==0){ var upCon=document.createTextNode(mO); var downCon=document.createTextNode(mT); }else{ var upCon=document.createElement("img"); var downCon=document.createElement("img"); upCon.setAttribute("src",mO); downCon.setAttribute("src",mT); } clickUp.appendChild(upCon); clickUp.setAttribute ("href","#"); clickDown.appendChild(downCon); clickDown.setAttribute ("href","#"); pSon[i].appendChild(conTemp); conTemp.appendChild(clickUp); conTemp.appendChild(clickDown); clickUp.onclick=function(){ moveSonU (this.parentNode.parentNode,myList); } clickDown.onclick=function(){ moveSonD (this.parentNode.parentNode); } } } myOrder ("pCon",1,"http://bbs.blueidea.com/images/smili es/default/rolleyes.gif","http://bbs.blueidea.c om/images/smilies/default/han.gif"); myOrder("pCon1",0,"上移","下移"); </script> </body> </html> <br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：上饶站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!