漂亮的鼠標移動特效

時間 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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。