jquery实现遮罩

2017-09-13 20:38:05来源:CSDN作者:qq_39585562人点击

分享

要想实现一下效果,需要下载一个juery库,下载地址     http://jquery.com/



<!DOCTYPE html><html>	<head>		<meta charset="UTF-8">		<title></title>		<script src="../js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>		<style type="text/css">			ul{				list-style: none;				width: 1250px;				height: 288px;				margin: 0 auto;				clear: both;			}			ul li{				position: relative;				float: left;				width: 397px;				height: 288px;				background-color: pink;				margin-left: 15px;				overflow: hidden;			}			ul li div.zhe{				position: absolute;				width: 397px;				height: 288px;				top: 0;				left: -397px;				background-color: rgba(255,255,255,0.5);			}		</style>	</head>	<body>		<div class="container">			<ul>				<li></li>				<li></li>				<li></li>			</ul>					</div>	</body>	<script type="text/javascript">		$(function(){			$("ul li").each(function(){				$("<div class='zhe'>").appendTo($(this));			})			$("ul li").bind("mouseenter mouseleave", function(e){								$pX = e.pageX;				$pY = e.pageY;				$x = $(this).width();				$y = $(this).height();				$offX = $(this).offset().left;				$offY = $(this).offset().top;								var $k = $y / $x;   //对角线斜率								var $k0 = ($pY - $offY - $y/2) / ($pX - $offX - $x/2);							var direction = "";								if ($k0 > -$k && $k0 < $k) {					if (($pX - $offX - $x/2) > 0 ) {						direction = "right";						console.log("right");					}else{						direction = "left";						console.log("left");					}				}else{					if(($pY - $offY - $y/2) > 0 ){						direction = "bottom";						console.log("bottom")					}else{						direction = "top";						console.log("top");					}				}				if (e.type == "mouseenter") {					switch(direction){						case "top":							$(this).children(".zhe").css({"top":-$(this).height(),"left": 0});							break;						case "left":							$(this).children(".zhe").css({"top":0,"left": -$(this).width()});							break;							case "right":							$(this).children(".zhe").css({"top":0,"left": $(this).width()});							break;						case "bottom":							$(this).children(".zhe").css({"top":$(this).height(),"left": 0});							break;					}					$(this).children(".zhe").stop(true,true).animate({"top":0,"left":0},"fast");				}								else if (e.type == "mouseleave"){					switch(direction){						case "top":							$(this).children(".zhe").stop(true,true).animate({"top":-$(this).height()},"fast");							break;						case "left":							$(this).children(".zhe").stop(true,true).animate({"left":-$(this).width()},"fast");							break;						case "right":							$(this).children(".zhe").stop(true,true).animate({"left":$(this).width()},"fast");							break;						case "bottom":							$(this).children(".zhe").stop(true,true).animate({"top":$(this).height()},"fast");							break;					}				}							});		})	</script></html>




鼠标从左边进去

鼠标从右边进去

鼠标从上方进去

鼠标从下方进去



最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台