您的位置：首页 > Web前端 > JavaScript
js实现div之间的移动

2018-04-10 00:00 357 查看
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>DIV层上下移动交换位置</title>
<style type="text/css">
ul {
width: 1000px
}

li {
border: 1px solid gray;
list-style: none
}

.txt {
padding: 4px;
background-color: #ffffff
}
</style>
<script language="javascript" type="text/javascript">
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 = 50; 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
7fe0
= 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">
<img src="/images/banner.gif" width="600px" height="300px"/>
</div>
</li>
<li>
<div class="txt" style="height: 200px;">
<i>this is Second div</i>
</div>
</li>
<li>
<div class="txt" style="height: 200px;">
这是第三个div
</div>
</li>
</ul>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签： js div的移动
相关文章推荐
新的分享
章节导航