jQuery判斷鼠標滑過方向遮罩層滑動代碼



118 469 157



特效描述:jQuery 判斷鼠標滑過方向 遮罩層滑動代碼,jQuery判斷鼠標滑過方向遮罩層滑動代碼

代碼結構

1. 引入JS

<script type="text/javascript" src="jquery-1.11.1.min.js"></script>

2. HTML代碼

<ul id="container" class="clearfix">
   <li>
	   <img class="img" src="images/huodong1.png">
	   <p>
		   <span>如果有來生,我要做一棵樹,站成永恒,沒有悲歡的姿勢。</span>
		   <a target="_blank"  href="#"></a>
		   <i></i>
	   </p>
   </li>
   <li>
	   <img class="img" src="images/huodong2.png">
	   <p>
		   <span>一半在土里安詳,一半在風里飛揚,一半灑落陰涼,一半沐浴陽光。</span>
		   <a target="_blank"  href="#"></a>
		   <i></i>
	   </p>
   </li>
   <li>
	   <img class="img" src="images/huodong3.png">
	   <p>
		   <span>非常沉默非常驕傲,從不依靠從不尋找。</span>
		   <a target="_blank"  href="#"></a>
		   <i></i>
	   </p>
   </li>
   <li>
	   <img class="img" src="images/huodong4.png">
	   <p>
		   <span>如果有來生,有沒有人愛,我也要努力做一個可愛的人。</span>
		   <a target="_blank"  href="#"></a>
		   <i></i>
	   </p>
   </li>
   <li>
	   <img class="img" src="images/huodong5.png">
	   <p>
		   <span>不埋怨誰,不嘲笑誰,也不羨慕誰,陽光下燦爛,風雨中奔跑,做自己的夢,走自己的路。</span>
		   <a target="_blank"  href="#"></a>
		   <i></i>
	   </p>
   </li>
   <li>
	   <img class="img" src="images/huodong6.png">
	   <p>
		   <span>如果有來生——三毛</span>
		   <a target="_blank" href="#"></a>
		   <i></i>
	   </p>
   </li>
</ul>
<img src="images/a2.jpg" class="explain">
<script>
   $("#container li").each(function(){
	   $(this).on('mouseenter',function(e){
		   var e=e||window.event;
		   var angle=direct(e,this)
		   mouseEvent(angle,this,'in')
	   })
	   $(this).on('mouseleave',function(e){
		   var e=e||window.event;
		   var angle=direct(e,this)
		   mouseEvent(angle,this,'off')
	   })
   })
   function direct(e,o){
	 var w=o.offsetWidth;
	 var h=o.offsetHeight;
	 var top= o.offsetTop;                    //包含滾動條滾動的部分
	 var left= o.offsetLeft;
	 var scrollTOP=document.body.scrollTop||document.documentElement.scrollTop;
	 var scrollLeft=document.body.scrollLeft||document.documentElement.scrollLeft;
	 var offTop=top-  scrollTOP;
	 var offLeft= left- scrollLeft;
	 //console.log(offTop+";"+offLeft)
	// e.pageX|| e.clientX;
			//pageX 是從頁面0 0 點開始  clientX是當前可視區域0 0開始  即當有滾動條時clientX  小于  pageX
		   //ie678不識別pageX
		   //PageY=clientY+scrollTop-clientTop;(只討論Y軸,X軸同理,下同) 頁面上的位置=可視區域位置+頁面滾動條切去高度-自身border高度
	 var ex= (e.pageX-scrollLeft)|| e.clientX;
	 var ey=(e.pageY-scrollTOP)|| e.clientY;
	 var x=(ex-offLeft-w/2)*(w>h?(h/w):1);
	 var y=(ey-offTop-h/2)*(h>w?(w/h):1);
	 var angle=(Math.round((Math.atan2(y,x)*(180/Math.PI)+180)/90)+3)%4 //atan2返回的是弧度 atan2(y,x)
	 var directName=["上","右","下","左"];
	 return directName[angle];  //返回方向  0 1 2 3對應 上 右 下 左
   }
   function mouseEvent(angle,o,d){ //方向  元素  鼠標進入/離開
	   var w=o.offsetWidth;
	   var h=o.offsetHeight;
	   if(d=='in'){
		   switch(angle){
			   case '上':
				   $(o).find("p").css({left:0,top:-h+"px"}).stop(true).animate({left:0,top:0},300)
					setTimeout(function(){
						$(o).find("p a").css({left:'50%',top:-h+"px"}).stop(true).animate({left:'50%',top:'20px'},300)
					},200)
				   break;
			   case '右':
				   $(o).find("p").css({left:w+"px",top:0}).stop(true).animate({left:0,top:0},300)
				   setTimeout(function(){
					   $(o).find("p a").css({left:w+"px",top:'20px'}).stop(true).animate({left:'50%',top:'20px'},300)
				   },200)
				   break;
			   case '下':
				   $(o).find("p").css({left:0,top:h+"px"}).stop(true).animate({left:0,top:0},300)
				   setTimeout(function(){
					   $(o).find("p a").css({left:'50%',top:h+"px"}).stop(true).animate({left:'50%',top:'20px'},300)
				   },200)
				   break;
			   case '左':
				   $(o).find("p").css({left:-w+"px",top:0}).stop(true).animate({left:0,top:0},300)
				   setTimeout(function(){
					   $(o).find("p a").css({left:-w+"px",top:'20px'}).stop(true).animate({left:'50%',top:'20px'},300)
				   },200)
				   break;
		   }
	   }else if(d=='off'){
		   switch(angle){
			   case '上':
				   $(o).find("p a").stop(true).animate({left:'50%',top:-h+"px"},300)
				   setTimeout(function(){
					   $(o).find("p").stop(true).animate({left:0,top:-h+"px"},300)
				   },200)
				   break;
			   case '右':
				   $(o).find("p a").stop(true).animate({left:w+"px",top:'20px'},300)
				   setTimeout(function(){
					   $(o).find("p").stop(true).animate({left:w+"px",top:0},300)
				   },200)
				   break;
			   case '下':
				   $(o).find("p a").stop(true).animate({left:'50%',top:h+"px"},300)
				   setTimeout(function(){
					   $(o).find("p").stop(true).animate({left:0,top:h+"px"},300)
				   },200)
				   break;
			   case '左':
				   $(o).find("p a").stop(true).animate({left:-w+"px",top:'20px'},300)
				   setTimeout(function(){
					   $(o).find("p").stop(true).animate({left:-w+"px",top:0},300)
				   },200)
				   break;
		   }
	   }
   }
</script> 



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滑動 滑塊 滑動門 觸屏滑動 滑動插件 滑塊插件 滑動星星打分 收縮展開 展開收縮 收縮 展開 其他 文字收縮展開 文字收縮 文字展開 文字滑動 文字滑塊 鼠標滑過 鼠標懸停 跟隨鼠標移動
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

湖北30选5开奖结果走势图表