移动都安图片放大镜效果

基本信息

源码名称：移动都安图片放大镜效果

源码大小：0.15M

文件格式：.zip

开发语言：CSS

更新时间：2019-06-10

友情提示：（无需注册或充值，赞助后即可获取资源下载链接）

嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：813200300

本次赞助数额为： 2 元　

源码介绍

<!DOCTYPE html>
<html><head>
		<meta charset="utf-8">
		<title>移动端放大镜</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				border: none;
			}
			#obj {
				width: 300px;
				height: 300px;
				/*	overflow: scroll;*/
				
				border: 1px solid #0ff;
				position: relative;
				float: left;
			}
			#obj img {
				width: 300px;
				height: 300px;
				display: block;
			}
			#drag {
				width: 150px;
				height: 150px;
				background: yellow;
				position: absolute;
				left: 0;
				top: 0;
				opacity: 0.4;
				filter: alpha(opacity=40);/*IE8 及更早的版本支持filter 属性*/
				cursor: move;
				display: none;
			}
			#rightShow {
				float: left;
				margin-left: 20px;
				/*padding: 10px;*/
				
				width: 400px;
				height: 400px;
				border: 1px solid #c0c;
				overflow: hidden;
				display: none;
				position: relative;
			}
			#rightShow img {
				width: 800px;
				height: 800px;
				position: absolute;
				left: 0;
				top: 0;
			}
		</style>
	</head>

	<body>
		<div id="obj">
			<img src="img/1.jpg">
			<div id="drag" style="display: none; left: 150px; top: 43px;"></div>
		</div>
		<div id="rightShow" style="display: none;">
			<img id="rightImg" src="img/2.jpg">
		</div>
	
	<script type="text/javascript">
		var obj = document.getElementById('obj');
		var rightShow = document.getElementById('rightShow');
		var drag = document.getElementById('drag');
		var rightImg = document.getElementById('rightImg');
		obj.ontouchstart = function(){
			//鼠标在obj上移动时显示滤镜和放大图
			drag.style.display = 'block';
			rightShow.style.display = 'block';			
		}
		obj.ontouchmove = function(event) {
			var e = event || window.event;
			//获得鼠标移动后drag应该距离obj盒子左、上边有多远
			var touch=e.touches[0];
			var lefts = touch.clientX - obj.offsetLeft - (drag.offsetWidth) / 2;
			var tops = touch.clientY - obj.offsetTop - (drag.offsetHeight) / 2;
			//计算向右、向下移动的临界值
			var maxmovex = obj.clientWidth - drag.offsetWidth;
			var maxmovey = obj.clientHeight - drag.offsetHeight;
			//超出临界值即维持在临界值上
			if (lefts > maxmovex) {
				lefts = maxmovex;
			}
			if (tops > maxmovey) {
				tops = maxmovey;
			}
			if (lefts < 0) {
				lefts = 0;
			}
			if (tops < 0) {
				tops = 0;
			}
			//鼠标移动后对drag盒子定位
			drag.style.left = lefts   "px";
			drag.style.top = tops   "px";
			//对放大图进行等比反向移动
			var percentageX = lefts/(obj.offsetWidth-drag.offsetWidth);
			var percentageY = tops/(obj.offsetHeight-drag.offsetHeight);
//					alert(drag.offsetLeft)
						rightShow.scrollLeft = (rightImg.offsetWidth-rightShow.offsetWidth) * percentageX;
						rightShow.scrollTop = (rightImg.offsetHeight-rightShow.offsetHeight) * percentageY;
//						alert( -(drag.offsetTop) * num);
//			rightImg.style.left = -(rightImg.offsetWidth-rightShow.offsetWidth) * percentageX "px";
//			rightImg.style.top = -(rightImg.offsetHeight-rightShow.offsetHeight) * percentageY "px";
		}
		obj.ontouchend = function() {
			drag.style.display = 'none';
			rightShow.style.display = 'none';
		}
	</script>

</body></html>