jquery实现遮罩

最新推荐文章于 2024-05-06 00:28:27 发布

蒲小若

最新推荐文章于 2024-05-06 00:28:27 发布

阅读量484

点赞数

分类专栏：前端开发经验总结录文章标签： javascript css html 图片 jquery

本文链接：https://blog.csdn.net/qq_39585562/article/details/77968139

版权

前端开发经验总结录专栏收录该内容

40 篇文章 1 订阅

订阅专栏

要想实现一下效果，需要下载一个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>