素材网 素材网

jQuery图片遮罩层判断鼠标进入图片方向代码

下载资源()次

阅读次数()次

发布时间:2016-07-10

jQuery图片遮罩层判断鼠标进入图片方向代码
分享到:

用法简介:

来源:xw素材网

jQuery图片遮罩层判断鼠标进入图片方向代码 。
文件引用:

<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>


   

网友评论:

评论

发表 剩余字数:20

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

@ 2013 xwcms.net . All Rights Reserved. xw素材网 | 备案号:晋ICP备13005902号 联系管理员
×

邮箱订阅

什么是邮箱订阅?

邮箱订阅是xw素材网为jquery爱好者与web程序员提供一项以邮箱的方式发送最新jquery资源与素材资源的模式,用户只需在左侧填写正确的邮箱用户名与邮箱地址我们将每天推荐最新优质资源到用户邮箱。当然每份邮箱都会有一个取消订阅按钮,当用户点击取消按钮时我们将会停止对用户发送邮箱资源推送。再次感谢大家对xw素材网的支持与关注。