漂亮的鼠标移动特效

时间 2019-11-24

标签漂亮鼠标移动特效栏目无线繁體版

原文原文链接

<!DOCTYPE html>

<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
      html, body {
         height: 92%;
      }

      html {
         overflow: hidden;
      }

      .box {
         margin: 0;
         padding: 0;
         height: 80%;
         width: 100%;
         margin: 10% auto 0;
      }

      .boxm {
         width: 14.28%;
         height: 100%;
         position: relative;
         float: left;
         overflow: hidden;
      }

      img {
         position: absolute;
         width: 100%;
         top: 80%;
      }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
      window.onload = function () {
         var arr = [];
         var imgs = {};
         for (var i = 0; i < $('.boxm').length; i++) {
            //把每一个img中间位置的水平坐标放在数组arr里
            arr.push(($('.boxm').eq(i).offset().left) + ($('.boxm').width() / 2));
            //把每一个img打包成jquery对象放在imgs对象里作成一个对象合集，方便使用
            //键：0,1,2,3,4,5,6
            //值：打包好的jquery对象
            //imgs {
            // 0 : $(img0)
            // 1 : $(img1)
            // . : ..
            // . : ..
            // }
            imgs = $('#img' + i);
         }
         //每一个对象定义一个属性flag做为节流阀，for in 循环让每一个对象的节流阀初始状态关闭
         for (var k in imgs) {
            imgs[k].flag = false;
         }
         //鼠标移入大盒子，用100毫秒时间让每一个img缓慢移到对应位置
         $('.box').mouseenter(function (e) {
            for (var i in imgs) {
                  //每一个对象定义一个属性t肯定本身的位置：鼠标离本身中心水平位置越远，t越大
                  imgs.t = (imgs[0].width() * 5 - Math.abs(arr - e.pageX)) / 25;
                  imgs.t = imgs.t > 0 ? imgs.t : 0;
                  imgs.animate({
                     'top': (80 - (imgs.t)) + '%'
                  }, 100, function () {
                     //animate函数回调函数让每一个对象的节流阀打开，打开后鼠标移动事件才起做用
                     imgs[$(this).parent().index()].flag = true;
                  });
            }
         })
         //鼠标移动事件
         $('.box').mousemove(function (e) {
            //for in 循环根据鼠标坐标肯定每一个对象的位置t
            for (var i in imgs) {
                  if (imgs.flag) {
                     imgs.t = (imgs[0].width() * 5 - Math.abs(arr - e.pageX)) / 25;
                     imgs.t = imgs.t > 0 ? imgs.t : 0;
                     imgs.css({
                        'top': (80 - (imgs.t) ) + '%'
                     });
                  }
            }
         })
         //鼠标移出事件
         $('.box').mouseleave(function () {
            //for in循环关闭每一个对象的节流阀，让每一个对象缓慢回到初始位置
            for (var i in imgs) {
                  imgs.flag = false;
                  imgs.animate({'top': 80 + '%'}, 100);
            }
         })
      }
</script>
</head>
<body>
<div class="box">
<div class="boxm"><img id="img0" src="http://ww3.sinaimg.cn/mw690/df6cb486jw1fam5ij9j3kj20e70rw0ui.jpg" alt=""/></div>
<div class="boxm"><img id="img1" src="http://ww2.sinaimg.cn/mw690/df6cb486jw1fam5igyttbj20e70rwgmv.jpg" alt=""/></div>
<div class="boxm"><img id="img2" src="http://ww2.sinaimg.cn/large/df6cb486jw1fam5ijvycxj20e70rwt9y.jpg" alt=""/></div>
<div class="boxm"><img id="img3" src="http://ww2.sinaimg.cn/mw690/df6cb486jw1fam5igh5pij20e70rwmyc.jpg" alt=""/></div>
<div class="boxm"><img id="img4" src="http://ww1.sinaimg.cn/mw690/df6cb486jw1fam5iezl5xj20e70rwgmu.jpg" alt=""/></div>
<div class="boxm"><img id="img5" src="http://ww2.sinaimg.cn/mw690/df6cb486jw1fam5ig5fgij20e70rwwfp.jpg" alt=""/></div>
<div class="boxm"><img id="img6" src="http://ww2.sinaimg.cn/mw690/df6cb486jw1fam5iigtjjj20e70rw402.jpg" alt=""/></div>
</div>
</body>
</html>
更多web前端免费试学课程、学习资料，加群434623999领取
css