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 }
【全都是流水账,仅仅记录进步的点滴】