首页>>Jquery图片>>jQuery判断鼠标划入图片方向显示遮罩层特效(2018-08-29)

jQuery判断鼠标划入图片方向显示遮罩层特效

jQuery判断鼠标划入图片方向显示遮罩层特效
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="mkeContentBox">  
  2. <!--效果html开始-->  
  3. <ul id="container" class="clearfix">  
  4.   <li> <img class="img" src="images/huodong1.png">  
  5.     <p style="left: 0px; top: 152px;"> <span>如果有来生，我要做一棵树，站成永恒，没有悲欢的姿势。</span> <a target="_blank" href="#" style="left: 50%; top: 152px;"></a> <i></i> </p>  
  6.   </li>  
  7.   <li> <img class="img" src="images/huodong2.png">  
  8.     <p style="left: -232px; top: 0px;"> <span>一半在土里安详，一半在风里飞扬，一半洒落阴凉，一半沐浴阳光。</span> <a target="_blank" href="#" style="left: -232px; top: 20px;"></a> <i></i> </p>  
  9.   </li>  
  10.   <li> <img class="img" src="images/huodong3.png">  
  11.     <p style="left: 0px; top: 152px;"> <span>非常沉默非常骄傲，从不依靠从不寻找。</span> <a target="_blank" href="#" style="left: 50%; top: 20px;"></a> <i></i> </p>  
  12.   </li>  
  13.   <li> <img class="img" src="images/huodong4.png">  
  14.     <p style="left: 232px; top: 0px;"> <span>如果有来生，有没有人爱，我也要努力做一个可爱的人。</span> <a target="_blank" href="#" style="left: 232px; top: 20px;"></a> <i></i> </p>  
  15.   </li>  
  16.   <li> <img class="img" src="images/huodong5.png">  
  17.     <p style="left: 232px; top: 0px;"> <span>不埋怨谁，不嘲笑谁，也不羡慕谁，阳光下灿烂，风雨中奔跑，做自己的梦，走自己的路。</span> <a target="_blank" href="#" style="left: 232px; top: 20px;"></a> <i></i> </p>  
  18.   </li>  
  19.   <li> <img class="img" src="images/huodong6.png">  
  20.     <p style="left: 0px; top: 0px;"> <span>如果有来生——三毛</span> <a target="_blank" href="#" style="left: 50%; top: 20px;"></a> <i></i> </p>  
  21.   </li>  
  22. </ul>  
  23. <img src="images/a2.jpg" class="explain">   
  24. <script>  
  25.    $("#container li").each(function(){  
  26.        $(this).on('mouseenter',function(e){  
  27.            var ee=e||window.event;  
  28.            var angle=direct(e,this)  
  29.            mouseEvent(angle,this,'in')  
  30.        })  
  31.        $(this).on('mouseleave',function(e){  
  32.            var ee=e||window.event;  
  33.            var angle=direct(e,this)  
  34.            mouseEvent(angle,this,'off')  
  35.        })  
  36.    })  
  37.    function direct(e,o){  
  38.      var w=o.offsetWidth;  
  39.      var h=o.offsetHeight;  
  40.      var top= o.offsetTop;                    //包含滚动条滚动的部分  
  41.      var left= o.offsetLeft;  
  42.      var scrollTOP=document.body.scrollTop||document.documentElement.scrollTop;  
  43.      var scrollLeft=document.body.scrollLeft||document.documentElement.scrollLeft;  
  44.      var offTop=top-  scrollTOP;  
  45.      var offLeft= left- scrollLeft;  
  46.      //console.log(offTop+";"+offLeft)  
  47.     // e.pageX|| e.clientX;  
  48.             //pageX 是从页面0 0 点开始  clientX是当前可视区域0 0开始  即当有滚动条时clientX  小于  pageX  
  49.            //ie678不识别pageX  
  50.            //PageY=clientY+scrollTop-clientTop;(只讨论Y轴,X轴同理,下同) 页面上的位置=可视区域位置+页面滚动条切去高度-自身border高度  
  51.      var ex= (e.pageX-scrollLeft)|| e.clientX;  
  52.      var ey=(e.pageY-scrollTOP)|| e.clientY;  
  53.      var x=(ex-offLeft-w/2)*(w>h?(h/w):1);  
  54.      var y=(ey-offTop-h/2)*(h>w?(w/h):1);  
  55.   
  56.      var angle=(Math.round((Math.atan2(y,x)*(180/Math.PI)+180)/90)+3)%4 //atan2返回的是弧度 atan2(y,x)  
  57.      var directName=["上","右","下","左"];  
  58.      return directName[angle];  //返回方向  0 1 2 3对应 上 右 下 左  
  59.    }  
  60.    function mouseEvent(angle,o,d){ //方向  元素  鼠标进入/离开  
  61.        var w=o.offsetWidth;  
  62.        var h=o.offsetHeight;  
  63.   
  64.        if(d=='in'){  
  65.            switch(angle){  
  66.                case '上':  
  67.                    $(o).find("p").css({left:0,top:-h+"px"}).stop(true).animate({left:0,top:0},300)  
  68.                     setTimeout(function(){  
  69.                         $(o).find("p a").css({left:'50%',top:-h+"px"}).stop(true).animate({left:'50%',top:'20px'},300)  
  70.                     },200)  
  71.                    break;  
  72.                case '右':  
  73.                    $(o).find("p").css({left:w+"px",top:0}).stop(true).animate({left:0,top:0},300)  
  74.                    setTimeout(function(){  
  75.                        $(o).find("p a").css({left:w+"px",top:'20px'}).stop(true).animate({left:'50%',top:'20px'},300)  
  76.                    },200)  
  77.                    break;  
  78.                case '下':  
  79.                    $(o).find("p").css({left:0,top:h+"px"}).stop(true).animate({left:0,top:0},300)  
  80.                    setTimeout(function(){  
  81.                        $(o).find("p a").css({left:'50%',top:h+"px"}).stop(true).animate({left:'50%',top:'20px'},300)  
  82.                    },200)  
  83.                    break;  
  84.                case '左':  
  85.                    $(o).find("p").css({left:-w+"px",top:0}).stop(true).animate({left:0,top:0},300)  
  86.                    setTimeout(function(){  
  87.                        $(o).find("p a").css({left:-w+"px",top:'20px'}).stop(true).animate({left:'50%',top:'20px'},300)  
  88.                    },200)  
  89.                    break;  
  90.            }  
  91.        }else if(d=='off'){  
  92.            switch(angle){  
  93.                case '上':  
  94.                    $(o).find("p a").stop(true).animate({left:'50%',top:-h+"px"},300)  
  95.                    setTimeout(function(){  
  96.                        $(o).find("p").stop(true).animate({left:0,top:-h+"px"},300)  
  97.                    },200)  
  98.                    break;  
  99.                case '右':  
  100.                    $(o).find("p a").stop(true).animate({left:w+"px",top:'20px'},300)  
  101.                    setTimeout(function(){  
  102.                        $(o).find("p").stop(true).animate({left:w+"px",top:0},300)  
  103.                    },200)  
  104.                    break;  
  105.                case '下':  
  106.                    $(o).find("p a").stop(true).animate({left:'50%',top:h+"px"},300)  
  107.                    setTimeout(function(){  
  108.                        $(o).find("p").stop(true).animate({left:0,top:h+"px"},300)  
  109.                    },200)  
  110.                    break;  
  111.                case '左':  
  112.                    $(o).find("p a").stop(true).animate({left:-w+"px",top:'20px'},300)  
  113.                    setTimeout(function(){  
  114.                        $(o).find("p").stop(true).animate({left:-w+"px",top:0},300)  
  115.                    },200)  
  116.                    break;  
  117.            }  
  118.        }  
  119.    }  
  120. </script>  
  121. <!--效果html结束-->  
  122. </div>  

 


原文地址:http://www.freejs.net/article_jquerytupiantexiao_687.html