jquery元素跟随鼠标移动

最新推荐文章于 2024-04-16 19:44:59 发布

xlb_123

最新推荐文章于 2024-04-16 19:44:59 发布

阅读量1.2k

点赞数

分类专栏： web前端开发 js相关文章标签： jquery 鼠标移动

web前端开发同时被 2 个专栏收录

153 篇文章 1 订阅

订阅专栏

js相关

89 篇文章 0 订阅

订阅专栏

特效说明：

一款jQuery元素跟随鼠标移动特效代码免费下载，动画载入页面元素，页面元素随鼠标上下左右移动JS特效代码。（兼容测试：IE7及以上、Firefox、Chrome、Opera、Safari、360等主流浏览器）

html：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery元素跟随鼠标移动 - 站长素材</title>
<style type="text/css">
* {
        padding: 0;
        margin: 0;
}
ul li {
        list-style: none;
}
a {
        text-decoration: none;
}
img {
        border: none;
        float: left;
}
.clear {
        clear: both;
}
html, body {
        color: #737373;
        background: url(images/bg.jpg) #E4E7E8 no-repeat center center;
        width: 100%;
        height: 100%;
        overflow: hidden;
        position: absolute
}
#container {
        width: 100%;
        position: absolute
}
#indexgs {
        width: 1128px;
        height: 508px;
        position: relative;
}
#indexgs img {
        position: absolute;
}
#indexg2 {
        left: 1000px;
        top: 1000px;
}
#indexg1 {
        left: -1000px;
        top: 1000px;
        position: absolute
}
#indexg1 a {
        width: 244px;
        height: 51px;
        display: block;
        background: url(images/indexlogo.png);
        position: relative;
        top: 107px;
        left: 109px;
}
#indexg1 a:hover {
        width: 244px;
        height: 51px;
        display: block;
        background: url(images/indexlogo2.png);
}
#indexg0 {
        left: 0;
        top: 1000px;
        position: absolute;
}
#indexg0 a {
        width: 54px;
        height: 54px;
        display: block;
        background: url(images/blog2.png);
        position: relative;
        top: 263px;
        left: 800px;
}
#indexg0 a:hover {
        background: url(images/blog1.png)
}
#indexmask {
        background: url(images/bjd.png);
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
        display: none
}
</style>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript">
$(function () {
         var index_div_pro = [{
                        sx: 0,
                        sy: 0,
                        mw: 3,
                        mh: 1,
                        bx: 8.4,
                        by: 10.4,
                        rx: -0.6
                },
                {
                        sx: 35,
                        sy: 0,
                        mw: 3,
                        mh: 0.5,
                        bx: 6.4,
                        by: 8.4,
                        rx: -0.1
                },
                {
                        sx: 785,
                        sy: 90,
                        mw: 0.3,
                        mh: 0.1,
                        bx: 6.5,
                        by: 7.4,
                        rx: -0.1
                }];
                
                var ePageX = null;
                var ePageY = null;
                
                function getMousePos(expression) {
                        if (ePageX == null || ePageY == null) return null;
                        var _x = $(expression).position().left;
                        _x += ePageX - $(expression).parent().position().left;
                        var _y = $(expression).position().top;
                        _y += ePageY - $(expression).parent().position().top;
                        return {
                                x: _x,
                                y: _y
                        }
                };
                
                var index_xh = setInterval(function () {
                        for (var i = 0; i < 3; i++) {
                                var mousepos = getMousePos("#indexg" + i);
                                if (mousepos != null) {
                                        var left = parseInt($("#indexg" + i).css("left"));
                                        var l = left + (index_div_pro[i].sx + index_div_pro[i].mw - (mousepos.x - 100) / index_div_pro[i].bx * index_div_pro[i].rx - left) * 0.2;
                                        var top = parseInt($("#indexg" + i).css("top"));
                                        var t = top + (index_div_pro[i].sy + index_div_pro[i].mh - (mousepos.y - 100) / index_div_pro[i].by - top) * 0.2;
                                        $("#indexg" + i).css({
                                                left: l,
                                                top: t
                                        })
                                }
                        }
                },
                15);
                
                $("body").mousemove(function (event) {
                        event = event || window.event;
                        ePageX = event.pageX;
                        ePageY = event.pageY;
                });
        
        
});
</script>
</head>
<body>
        <div id="indexgs"> <img id="indexg2" src="images/g3.png" width="364" height="308"/>
        <div id="indexg0"> <img src="images/g1.png" width="918" height="508"/> <a href="#"></a> </div>
        <div id="indexg1"> <img src="images/g2.png" width="353" height="538"/> <a href="#"></a> </div>
      </div>
</body>
</html>

jquery.mousewheel.js:

(function($) {
$.event.special.mousewheel = {
   setup: function() {
      var handler = $.event.special.mousewheel.handler;
      // Fix pageX, pageY, clientX and clientY for mozilla
      if ( $.browser.mozilla )
         $(this).bind('mousemove.mousewheel', function(event) {
            $.data(this, 'mwcursorposdata', {
               pageX: event.pageX,
               pageY: event.pageY,
               clientX: event.clientX,
               clientY: event.clientY
            });
         });
   
      if ( this.addEventListener )
         this.addEventListener( ($.browser.mozilla ? 'DOMMouseScroll' : 'mousewheel'), handler, false);
      else
         this.onmousewheel = handler;
   }, teardown: function() {
      var handler = $.event.special.mousewheel.handler;
      
      $(this).unbind('mousemove.mousewheel');
      
      if ( this.removeEventListener )
         this.removeEventListener( ($.browser.mozilla ? 'DOMMouseScroll' : 'mousewheel'), handler, false);
      else
         this.onmousewheel = function(){};
      
      $.removeData(this, 'mwcursorposdata');
   },
   
   handler: function(event) {
      var args = Array.prototype.slice.call( arguments, 1 );
      
      event = $.event.fix(event || window.event);
      // Get correct pageX, pageY, clientX and clientY for mozilla
      $.extend( event, $.data(this, 'mwcursorposdata') || {} );
      var delta = 0, returnValue = true;
      
      if ( event.wheelDelta ) delta = event.wheelDelta/120;
      if ( event.detail     ) delta = -event.detail/3;
//    if ( $.browser.opera  ) delta = -event.wheelDelta;
      event.data  = event.data || {};
      event.type  = "mousewheel";
      
      // Add delta to the front of the arguments
      args.unshift(delta);
      // Add event to the front of the arguments
      args.unshift(event);

      return $.event.handle.apply(this, args);
   }
};

$.fn.extend({
   mousewheel: function(fn) {
      return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
   },
   
   unmousewheel: function(fn) {
      return this.unbind("mousewheel", fn);
   }
});

})(jQuery);
转载自：http://www.internetke.com/effects/other/2015/0122/1243.html

xlb_123

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery元素跟随鼠标移动

特效说明：一款jQuery元素跟随鼠标移动特效代码免费下载，动画载入页面元素，页面元素随鼠标上下左右移动JS特效代码。（兼容测试：IE7及以上、Firefox、Chrome、Opera、Safari、360等主流浏览器）html：html>head>meta charset="UTF-8">title>jquery元素跟随鼠标移动 - 站长素材title>st
复制链接

扫一扫