js实现兼容IE和FF的上下层的移动_javascript技巧
这里给大家分享的是项目中的一个小需求,本来很简单,可是整了好久才把FF的兼容性搞定。
<!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> <title>仿265上下层的移动(上移,下移)支持IE、FF</title> <style type="text/css"> /*<![CDATA[*/ ul{ width:400px } li{ border:1px solid gray; list-style:none } .txt{ padding:4px; background-color:#ffffff } /*]]>*/ </style> <script language="javascript" type="text/javascript"> //<![CDATA window.onload=function(){ ggGroup(document.getElementById('test'),5); }; function ggGroup(ele,margin){ margin=margin||0; var bgcolors='#b3d580,#99c9b1,#b4a1d8,#f7c480,#d5d588,#eea2bb'.split(','); var txtUp='上移↑ ',txtDown='下移↓'; var panels=children(ele); for(var i=0,h=0;i<panels.length;i++){ var p=panels[i]; p.style.position='absolute'; p.style.width='100%'; var b=document.createElement('div'); with(b.style){ fontSize='12px'; padding='4px'; backgroundColor=bgcolors[i%bgcolors.length]; textAlign='right'; } b.innerHTML='<span>'+txtUp+'</span><span>'+txtDown+'</span>'; b.firstChild.onclick=moveup; b.firstChild.style.cursor='pointer'; b.lastChild.onclick=movedown; b.lastChild.style.cursor='pointer'; p.insertBefore(b,p.firstChild); p.style.top=h+'px'; p.index=i; h+=p.offsetHeight+margin; } ele.style.height=h+'px'; ele.style.position='relative'; check(0,i-1); function check(){ for(var i=0;i<arguments.length;i++){ var x=arguments[i]; var c=panels[x].firstChild.childNodes; c[0].style.visibility=x==0?'hidden':'visible'; c[1].style.visibility=x==panels.length-1?'hidden':'visible'; panels[x].index=x; } } function moveup(evt){ var p=evt?evt.target:event.srcElement; p=p.parentNode.parentNode; swap(p,panels[p.index-1]); } function movedown(evt){ var p=evt?evt.target:event.srcElement; p=p.parentNode.parentNode; swap(p,panels[p.index+1]); } function swap(p1,p2){ var N=10; var INTV=200; var arr1,arr2; var t1=parseInt(p1.style.top),t2=parseInt(p2.style.top); var h1=p1.offsetHeight+margin,h2=p2.offsetHeight+margin; arr1=makeArr(t1,t1<t2?h2:-h2); arr2=makeArr(t2,t1<t2?-h1:h1); for(var i=0;i<N;i++)(function(){ var j=i; setTimeout(function(){ p1.style.top=arr1[j]+"px"; p2.style.top=arr2[j]+"px"; if(j==N-1){ panels[p1.index]=p2; panels[p2.index]=p1; check(p1.index,p2.index); } },(j+1)*INTV/N); })(); function makeArr(f,x){ var ret=[]; for(var i=0;i<N;i++) ret[i]=Math.round(f+i*x/(N-1)); return ret; } } function children(e){ var ret=[]; for(var i=0,c=e.childNodes;i<c.length;i++) if(c[i].nodeType==1) ret.push(c[i]); return ret; } } //]]> </script> </head> <body> <ul id="test"> <li> <div class="txt"><h2 id="Hello-br-baby">Hello<br />baby</h2></div></li> <li> <div class="txt"> 显示内容1显示内容1显示内容1显示内容1 </div></li> <li> <div class="txt"> <i>人之初,性本善</i> </div></li> <li> <div class="txt"> 显示内容2<br />显示<br />...<br />显示内容2! </div></li> </ul> </body> </html>
以上所述就是本文的全部内容了,希望大家能够喜欢。

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

Python和JavaScript开发者的薪资没有绝对的高低,具体取决于技能和行业需求。1.Python在数据科学和机器学习领域可能薪资更高。2.JavaScript在前端和全栈开发中需求大,薪资也可观。3.影响因素包括经验、地理位置、公司规模和特定技能。

JavaScript是现代Web开发的基石,它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发,极大地提升了用户体验和跨平台开发的灵活性。

如何在JavaScript中将具有相同ID的数组元素合并到一个对象中?在处理数据时,我们常常会遇到需要将具有相同ID�...

学习JavaScript不难,但有挑战。1)理解基础概念如变量、数据类型、函数等。2)掌握异步编程,通过事件循环实现。3)使用DOM操作和Promise处理异步请求。4)避免常见错误,使用调试技巧。5)优化性能,遵循最佳实践。

实现视差滚动和元素动画效果的探讨本文将探讨如何实现类似资生堂官网(https://www.shiseido.co.jp/sb/wonderland/)中�...

探索前端中类似VSCode的面板拖拽调整功能的实现在前端开发中,如何实现类似于VSCode...

深入探讨console.log输出差异的根源本文将分析一段代码中console.log函数输出结果的差异,并解释其背后的原因。�...
