js手风琴

最新推荐文章于 2022-04-07 15:26:05 发布

Shimmer-612

最新推荐文章于 2022-04-07 15:26:05 发布

阅读量145

点赞数

分类专栏： js、html、css 文章标签： js css dom

本文链接：https://blog.csdn.net/weixin_45892086/article/details/104567165

版权

js、html、css 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>海贼王悬赏</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            margin:25px auto;

            width: 900px;
            height: 600px;
            position: relative;
            overflow: hidden;
            border: 1px solid black;
            display: block;
            list-style: none;
        }
        ul li{
            padding: 0;
           position: absolute;
            width: 900px;
            height: 600px;
            
        }
    </style>
</head>
<body>
    <div id="div">
        <ul id="ul">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
<script src="hd.js"></script>
    <script>   
       var lis = document.querySelectorAll("li")
       var div  = document.querySelector("#div")


    //    获取元素  实现左移  右移
    // 缓动动画
       for(var i = 0;i<lis.length;i++){  //遍历数组
           lis[i].index = i   //获取下标
           lis[i].style.backgroundImage = "url(images/"+(i+1)+".jpg)"
           lis[i].style.left = 100*i+"px"



        //    鼠标移入事件
           lis[i].onmouseover = function () {

                for(var i =0;i<lis.length;i++){
                   if(i<=this.index){
                       move(lis[i],(i*30),10)   //左移
                   }else if(i>this.index){
                move(lis[i],(i*30+630),10)       //右移
                   }
               }
             }                         
              }
    //    鼠标移出事件   恢复原样
            div.onmouseout = function () { 
                for(var i = 0;i<lis.length;i++){
                move(lis[i],100*i,10)

                }
                
             }
    
    </script>
</body>
</html>

function move(element,target,num) { 
    clearInterval(element.time)
 element.time  =   setInterval( function () {

  var current = element.offsetLeft //获取div到左边的距离
             
  var step = (target-current)/num;   //变速移动

//   if(step>=0){
//  step = Math.ceil(step)  //向上取整函数Math.ceil()  让step的最小值为1px
//                         //这样  div  就一定能到达终点
//   }else{
//      step=Math.floor(step)//向下取整
//   }
  step =step>0 ? Math.ceil(step) :Math.floor(step)  //等于上面的 if else 判断
 current +=step
// div距离左边越来越大  就移动起来了
element.style.left = current+"px" 

// 清除定时器
if(current==target){
      clearInterval(element.time)
} 
 },30)
 }