当前位置：网站首页>JQ picture amplifier

JQ picture amplifier

2022-06-28 05:51:00 【Yuanxiaobai】 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.div{
				width:500px;
				height: 282px;
				border: 1px solid gray;
			}
			.dv{
				width:100px;
				height: 100px;
				//display: none;
				border: 1px solid gray;
				border-radius: 50px;
				background-image: url(img/1.jpg);
				position: absolute;
			}
		</style>
	</head>
	<body>
		<div class="div"><img src="img/1.jpg" width="500px"/></div>
	</body>
	<script src="jq/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="jq/jquery-1.7.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function(e){
			$(".div").mousemove(function(e){
				var x=e.pageX;
				var y=e.pageY;
				$(".div").append("<div class='dv'></div>");
				$(".dv").css({"left":x,"top":y});
				x=x*2-70;
				y=y*2-65;
				//console.log(x+"\t"+y);
				if(x<=0){
					x=0;
				}
				if(y<=0){
					y=0;
				}
				if(x>=900){
					x=900;
				}
				if(y>=460){
					y=460;
				}
				//$(".dv").show();
				$(".dv").css("backgroundPositionX",-x);
				$(".dv").css("backgroundPositionY",-y);
			});
			$(".div").mouseout(function(e){
				//$(".dv").hide();
				$(".dv").remove();
			});
		})
	</script>
</html>

Effect screenshots

原网站

版权声明
本文为[Yuanxiaobai]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/179/202206280521410263.html

边栏推荐

猜你喜欢

随机推荐