js小效果：上移和下移！
<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<title></title>
<scriptsrc="http://wangshixiong.vip/zp/move.js"></script>
<styletype="text/css">
body{
background:#D9D1CB;
margin:0;
}
ul,li {
list-style:none;
padding:0;
margin:0;
}
.box{
width:1200px;
height:800px;
margin:0 auto;
position:relative;
background:url(http://cdn.attach.qdfuns.com/notes/pics/201701/20/195424zwu5vxeuw1xlzl25.jpg)no-repeat;
}
.content{
position:absolute;
width:400px;
top:200px;
left:50px;
}
li{
height:40px;
padding:0 10px 0 10px;
margin-bottom:6px;
background:#745857;
border-radius:6px;
line-height:40px;
position:relative;
}
.name{
float:left;
font-family:simhei;
color:white;
font-size:18px;
}
.btn{
float:right;
display:inline-block;
}
.btnspan {
text-align:center;
/*margin-top:3px;*/
vertical-align:middle;
line-height:30px;
margin-right:6px;
display:inline-block;
border-radius:6px;
background:#EFEEF4;
width:50px;
height:30px;
cursor:pointer;
border:1px solid #1A222D;
}
.btnspan:hover {
background: mediumpurple;
color:white;
}
</style>
</head>
<body>
<divclass="box">
<ulclass="content">
<li>
<spanclass="name">Happy New Year to yo</span>
<divclass="btn">
<span>上移</span>
<span>下移</span>
</div>
</li>
<li>
<spanclass="name">Happy birthday to you!</span>
<divclass="btn">
<span>上移</span>
<span>下移</span>
</div>
</li>
<li>
<spanclass="name">There was genuine joy</span>
<divclass="btn">
<span>上移</span>
<span>下移</span>
</div>
</li>
<li>
<spanclass="name">happy cheerful glad</span>
<divclass="btn">
<span>上移</span>
<span>下移</span>
</div>
</li>
<li>
<spanclass="name">a joyous family </span>
<divclass="btn">
<span>上移</span>
<span>下移</span>
</div>
</li>
<li>
<spanclass="name">She is a happy girl. </span>
<divclass="btn">
<span>上移</span>
<span>下移</span>
</div>
</li>
</ul>
</div>
</body>
<scripttype="text/javascript">
varul = document.getElementsByTagName('ul')[0];
varlis = ul.children; //獲取到所有的li
vartips = document.getElementsByClassName('tips');
for(vari = 0; i < lis.length; i++) {
varpreMove = lis[i].children[1].children[0]; //上移按鈕
vardownMove = lis[i].children[1].children[1]; //下移按鈕
//點選上移
preMove.onclick= function() {
varthisLi = this.parentElement.parentElement; //當前點選的li
varpreLi = this.parentElement.parentElement.previousElementSibling; //當前點選的li的上一個
if(!preLi){ //當沒有上一個元素時停止執行
return;
}else {
move(thisLi,{top: -46}, 300, 'linear', end)
move(preLi,{top: 46}, 300, 'linear', end)
}
//調換位置
functionend() {
thisLi.style.top= 0;
preLi.style.top= 0;
ul.insertBefore(thisLi,preLi);
}
};
//點選下移
downMove.onclick= function() {
varthisLi = this.parentElement.parentElement; //當前點選的li
varnextLi = this.parentElement.parentElement.nextElementSibling; //當前點選的li的下一個
if(!nextLi){ //當沒有下一個元素時，停止
console.log('沒有下一個了');
return;
}else {
move(thisLi,{top: 46}, 300, 'linear', end)
move(nextLi,{top: -46}, 300, 'linear', end)
}
//調換位置
functionend() {
thisLi.style.top= 0;
nextLi.style.top= 0;
ul.insertBefore(nextLi,thisLi);
}
};
}
</script>
</html>
需要web前端課程工具和電子書，可以加君羊120342833