首页 > 代码库 > js小效果:上移和下移!

js小效果:上移和下移!

<!DOCTYPE html>

<html>

 

         <head>

                   <meta charset="UTF-8">

                   <title></title>

                   <script src="http://wangshixiong.vip/zp/move.js"></script>

                   <style type="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;

                            }

                            .btn span {

                                     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;

                            }

                            .btn span:hover {

                                     background: mediumpurple;

                                     color: white;

                            }

                   </style>

         </head>

 

         <body>

                   <div class="box">

                            <ul class="content">

                                     <li>

                                               <span class="name">Happy New Year to yo</span>

                                               <div class="btn">

                                                        <span>上移</span>

                                                        <span>下移</span>

                                               </div>

                                     </li>

                                     <li>

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

                                               <div class="btn">

                                                        <span>上移</span>

                                                        <span>下移</span>

                                               </div>

                                     </li>

                                     <li>

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

                                               <div class="btn">

                                                        <span>上移</span>

                                                        <span>下移</span>

                                               </div>

                                     </li>

                                     <li>

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

                                               <div class="btn">

                                                        <span>上移</span>

                                                        <span>下移</span>

                                               </div>

                                     </li>

                                     <li>

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

                                               <div class="btn">

                                                        <span>上移</span>

                                                        <span>下移</span>

                                               </div>

                                     </li>

                                     <li>

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

                                               <div class="btn">

                                                        <span>上移</span>

                                                        <span>下移</span>

                                               </div>

                                     </li>

                            </ul>

                   </div>

         </body>

         <script type="text/javascript">

                   var ul = document.getElementsByTagName(‘ul‘)[0];

                   var lis = ul.children; //获取到所有的li

                   var tips = document.getElementsByClassName(‘tips‘);

 

                   for(var i = 0; i < lis.length; i++) {

                            var preMove = lis[i].children[1].children[0]; //上移按钮

                            var downMove = lis[i].children[1].children[1]; //下移按钮

 

                            //点击上移

                            preMove.onclick = function() {

                                     var thisLi = this.parentElement.parentElement; //当前点击的li

                                     var preLi = this.parentElement.parentElement.previousElementSibling; //当前点击的li的上一个

 

                                     if(!preLi) { //当没有上一个元素时 停止运行

                                               return;

                                     } else {

                                               move(thisLi, {top: -46}, 300, ‘linear‘, end)

                                               move(preLi, {top: 46}, 300, ‘linear‘, end)

                                     }

 

                                     //调换位置

                                     function end() {

                                               thisLi.style.top = 0;

                                               preLi.style.top = 0;

                                               ul.insertBefore(thisLi, preLi);

                                     }

                            };

 

                            //点击下移

                            downMove.onclick = function() {

                                     var thisLi = this.parentElement.parentElement; //当前点击的li

                                     var nextLi = 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)

                                     }

                                     //调换位置

                                     function end() {

                                               thisLi.style.top = 0;

                                               nextLi.style.top = 0;

                                               ul.insertBefore(nextLi,thisLi );

                                     }

                            };

                   }

         </script>

 

</html>

 

需要web前端课程工具和电子书,可以加群120342833

 

js小效果:上移和下移!