js realisiert die Bewegung der oberen und unteren Ebenen, die mit IE- und FF_javascript-Kenntnissen kompatibel sind-js-Tutorial-php.cn

js realisiert die Bewegung der oberen und unteren Ebenen, die mit IE- und FF_javascript-Kenntnissen kompatibel sind

WBOY

Freigeben： 2016-05-16 16:01:20

Original

1048 Leute haben es durchsucht

Was ich hier mit Ihnen teile, ist eine kleine Anforderung im Projekt. Es war ursprünglich sehr einfach, aber es hat lange gedauert, bis die Kompatibilität mit FF erreicht war.

<!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&#63;'hidden':'visible';
c[1].style.visibility=x==panels.length-1&#63;'hidden':'visible';
panels[x].index=x;
}
}
function moveup(evt){
var p=evt&#63;evt.target:event.srcElement;
p=p.parentNode.parentNode;
swap(p,panels[p.index-1]);
}
function movedown(evt){
var p=evt&#63;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&#63;h2:-h2);
arr2=makeArr(t2,t1<t2&#63;-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>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>

Nach dem Login kopieren

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.