js小效果：上移和下移！

来源：互联网发布：用php写99乘法表编辑：程序博客网时间：2024/05/20 04:30

<!DOCTYPE html>

<html>

<head>

<metacharset="UTF-8">

<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">

</div>

</li>

<li>

<spanclass="name">Happy birthday to you!</span>

<divclass="btn">

</div>

</li>

<li>

<spanclass="name">There was genuine joy</span>

<divclass="btn">

</div>

</li>

<li>

<spanclass="name">happy cheerful glad</span>

<divclass="btn">

</div>

</li>

<li>

<spanclass="name">a joyous family </span>

<divclass="btn">

</div>

</li>

<li>

<spanclass="name">She is a happy girl. </span>

<divclass="btn">

</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

0 0