图片放大镜效果

最新推荐文章于 2021-11-10 16:54:59 发布

忆成风

最新推荐文章于 2021-11-10 16:54:59 发布

阅读量262

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/lhzau1996/article/details/90268401

版权

html 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>图片放大镜效果</title>
		<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
		<style type="text/css">
			.original-image {
				float: left;
			}
			
			.slidingBlock {
				position: absolute !important;
				width: 190px;
				height: 190px;
				background-color: #ff720a;
				opacity: 0.5;
				pointer-events: none;
			}
			
			.enlarged-image {
				background-color: white;
				width: 400px;
				height: 380px;
				position: absolute;
				margin-left: 381px;
				z-index: 10;
			}
			
			.big-picture {
				width: 380px;
				height: 380px;
				margin-left: 19px;
				overflow: hidden;
				border: 1px solid #e4e4e4;
			}
			.slidingBlock{
				margin-left: 9px;
				margin-top: 8px;
			}
		</style>
	</head>

	<body>
		<div class="original-image" id="originalImage">
			<span>
				<img id="largeImage" style="height: 380px;width: 380px;cursor: move;" src="img/picture.jpg"/>
				<span id="slidingBlock" class="slidingBlock" style="display: none;"></span>
			</span>
		</div>
		<div class="enlarged-image" id="enlargedImage" style="display: none;">
			<div class="big-picture" id="bigPicture">
				<img id="bigImage" style="position: relative;height: 760px;width: 760px;" src="img/picture.jpg" />
			</div>
		</div>
		<script type="text/javascript">
			$(function() {
				$("#originalImage").mousemove(function(event) {
					$("#enlargedImage").show();
					$("#slidingBlock").show();
					var leftDiv = event.offsetX;
					var topDiv = event.offsetY;
					var widthValue = 95;
					if((leftDiv < widthValue)) {
						document.getElementById("slidingBlock").style.left = 0 + "px";
						document.getElementById("bigImage").style.left = 0 + "px";
					} else if((leftDiv + widthValue) > 380) {
						document.getElementById("slidingBlock").style.left = (380 - widthValue * 2) + "px";
						document.getElementById("bigImage").style.left = -380 + "px";
					} else {
						document.getElementById("slidingBlock").style.left = (leftDiv - widthValue) + "px";
						document.getElementById("bigImage").style.left = -2 * (leftDiv - widthValue) + "px";
					}
					if((topDiv < widthValue)) {
						document.getElementById("slidingBlock").style.top = 0 + "px";
						document.getElementById("bigImage").style.top = 0 + "px";
					} else if((topDiv + widthValue) > 380) {
						document.getElementById("slidingBlock").style.top = (380 - widthValue * 2) + "px";
						document.getElementById("bigImage").style.top = -380 + "px";
					} else {
						document.getElementById("slidingBlock").style.top = (topDiv - widthValue) + "px";
						document.getElementById("bigImage").style.top = -2 * (topDiv - widthValue) + "px";
					}
				});
				$("#originalImage").mouseleave(function() {
					$("#enlargedImage").hide();
					$("#slidingBlock").hide();
				});
			})
		</script>
	</body>

</html>

忆成风

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片放大镜效果

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>图片放大镜效果</title> <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script&g...
复制链接

扫一扫

专栏目录