jquery鼠标跟随简单效果

 1     this.mouse_try = function() {
 2         var mouse_box = $('.mouse_box');
 3         var obversepic = $('.mouse_box .obversepic');
 4         var facade = $('.mouse_box .facade');
 5         mouse_box.mousemove(function(e) {
 6             var event =  e || window.event;//window.event 对象可以监听键盘和鼠标的一些动作。可以获取鼠标当前的位置。设置其他对象的坐标就可以实现跟随
 7                //clientY鼠标到屏幕可视区域
 8                //screenX鼠标到窗口大小，包括导航和拉条
 9                //position() 相对于body的位置
10                //定义最大宽度和高度
11                 maxWidth = $(this).width();
12                 maxHeight = $(this).height();
13                 //鼠标跟随返方向
14                 obverseL = $(this).width() - event.screenX;
15                 obverseT = $(this).height() - event.screenY;
16                 //跟随对象的父层到页面窗口的位置
17                 parentOffset = facade.offsetParent().offset();//mouse_box到页面窗口的位置
18                 facadeLeft = e.pageX + 5 - parentOffset.left;//鼠标到mouse_box的位置
19                 facadeTop = e.pageY + 5 - parentOffset.top; 
20                 //判断鼠标跟随效果移动的范围
21                 obversepic.css({'left': obverseL + 'px','top':obverseT + 'px'});    
22                 if(facadeLeft > maxWidth - facade.width()){
23                     facade.css({'left': maxWidth - facade.width() + 'px'});
24                 }
25                 else{
26                     facade.css({'left': facadeLeft + 'px'});
27                 }
28                 if( facadeTop > maxHeight - facade.height() ) {
29                     facade.css({'top': maxHeight - facade.height() + 'px'});
30                 }
31                 else{
32                     facade.css({'top': facadeTop + 'px'});
33                 }
34         });    
35     }

 

转载于:https://www.cnblogs.com/Travel/p/3569639.html