jQuery判断鼠标滑过方向遮罩层滑动代码



111 440 147



特效描述: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

加群请备注:从官网了解到