淘宝放大镜案例并且兼容ie

你的名字 2021-09-02 04:37 459阅读 0赞

最近项目中想实现一个淘宝放大镜的效果 自己试了试做出来

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70][]

现在把这个案例的代码分享给大家

功能快方面的逻辑  1：当鼠标移入图片拖拽的小方块出现  右面的图片的出现

2：当鼠标离开图片拖拽的小方块消失 右面的图片消失

3: 获取图片在页面之间的距离

4：给拖拽的小方块定义鼠标移动事件

5：获取鼠标位于页面的位置

6：拖拽小方块移动不能离开图片的位置 定义边界

7：移动拖拽的小方块图片随之时时改变 改变图片定位置

8：兼容ie

1:首先结构样式部分

交互方面首先元素id

var box = document.getElementById("box");
    	var glass = document.getElementById("glass");
    	var box1 = document.getElementById("box1");

接下来获取点击事件  这里有一个问题   当使用onmouseenter事件时 当鼠标不断在镜片和box中移动的时候， 只触发glass事件

所以这里我使用mouseover事件，当鼠标不断的在镜片和box中移动的时候，同时触犯glass和box的事件 让它冒泡上上一级元素上去

// mouseenter
    	// box.onmouseenter = function() {
    	// 	console.log("box");
    	// }
    
    	// glass.onmouseenter = function() {
    	// 	console.log("glass");
    	// }
    
    	// 当绑定的是mouseenter事件的时候， 当鼠标不断在镜片和box中移动的时候， 只触发glass事件
    
    
    	// mouseover
    	// box.onmouseover = function() {
    	// 	console.log("box");
    	// }
    
    	// glass.onmouseover = function() {
    	// 	console.log("glass");
    	// }
    
    	// 当绑定的是mouseover事件的时候， 当鼠标不断的在镜片和box中移动的时候，同时触犯glass和box的事件

然后就是逻辑1.2 当鼠标移入图片拖拽的小方块出现  右面的图片的出现

当鼠标离开图片拖拽的小方块消失 右面的图片消失

// mouseenter
    	box.onmouseenter = function() {
    		// 让glass和box1出现
    		glass.style.display = "block";
    		box1.style.display = "block";
    	}
    
    	// 当鼠标离开让glass和box1消失
    	box.onmouseleave = function() {
    		glass.style.display = "none";
    		box1.style.display = "none";
    	}

接下来下一步就是图片到页面之间的距离  这里封装了一个方法 offset 因为ie和高级浏览器之间获取距离的方式不同，ie不需要计算父元素的边框 而高级浏览器需要额外加上父元素边框

下来调用封装的方法 获取图片到页面之间的距离

var box_offset = offset(box);
    	
    	var box_left = box_offset.left;
    	var box_top = box_offset.top;

这时候已经完成了一半了 现在要做的是移动图片时获取鼠标位于页面中的位置 而且拖拽的小方块不能拉开图片的大小 设置边界

然后赋值glass的定位值  这样下来小方块就可以在图片中来回的拖拽了，这里要注意的是 我一开始获取鼠标位于页面中的位置用的pageX与pageY但是在ie中 不支持这个方法 所以后来我改成了clientX与clientY 但是这里要注意因为页面出现滚轮的现象 所以还有要把滚轮的距离加上

// 给box添加mousemove事件
    	box.onmousemove = function(e) {
    		// 获取鼠标位于页面中的位置
    		var x = e.clientX;
    		var y = e.clientY + document.documentElement.scrollTop;
    
    		// 定义变量用于简化书写
    		var resultX =  x - box_left - glass.clientWidth / 2 ;
    		var resultY =  y - box_top - glass.clientHeight / 2 ;
    
    		// 边界限制
    		if (resultX < 0) {
    			resultX = 0;
    		} else if (resultX > box.clientWidth - glass.clientWidth) {
    			resultX = box.clientWidth - glass.clientWidth;
    		}
    
    		// 上下
    		if (resultY < 0) {
    			resultY = 0;
    		} else if (resultY > box.clientHeight - glass.clientHeight) {
    			resultY = box.clientHeight - glass.clientHeight;
    		}
    
    		// 赋值glass的定位值
    		glass.style.left = resultX + "px";
    		glass.style.top = resultY + "px";
    
    ｝

接下来就是让拖拽的小方块移动时 显示图片放大 获取box1中backgroundPositionX与backgroundPositionY然后放大两倍就可以了

// 改变box1中的图片定位
    		box1.style.backgroundPositionX = -resultX * 2 + "px";
    		box1.style.backgroundPositionY = -resultY * 2 + "px";

然后接下来开始兼容ie   ie中因为通过e 获取不到e中事件对象与属性值而是通过window.event;方法获取，所以要加入

// 兼容方式
    		var e = e || window.event;

css中 因为ie获取不到background属性值中的background-size: cover;方法所以 在html中引入img获取你想要图片，而且ie中获取不到background-color: rgba 但是能获取background-color: rgb 但是这时候透明度看不到 这里添加属性filter: alpha(opacity: 50);

只此所有的完成

完整代码

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style type="text/css">
    		* {
    			margin: 0;
    			padding: 0;
    		}
    		#box {
    			position: relative;
    			width: 400px;
    			height: 400px;
    			left: 100px;
    			top: 200px;
    			background-image: url(images/small.jpg);
    			border: 1px solid red;
    			background-size: cover;
    		}
    		#box #glass {
    			position: absolute;
    			width: 200px;
    			height: 200px;
    			background-color: rgb(0, 0, 255);
    			filter: alpha(opacity: 50);
    			background-color: rgba(0, 0, 255, .5);
    			left: 0;
    			top: 0;
    			display: none;
    		} 
    		#box1 {
    			position: absolute;
    			width: 400px;
    			height: 400px;
    			background-image: url(images/big.jpg);
    			left: 550px;
    			top: 200px;
    			border: 1px solid red;
    			display: none;
    		}
    		img {
    			width: 100%;
    			height: 100%;
    		}
    	</style>
    </head>
    <body>
    	<div id="box">
    		<img src="images/small.jpg">
    		<div id="glass"></div>
    	</div>
    	<div id="box1"></div>
    	<script type="text/javascript">
    	// 获取元素
    	var box = document.getElementById("box");
    
    	var glass = document.getElementById("glass");
    
    	var box1 = document.getElementById("box1");
    
    
    
    	// mouseenter
    	box.onmouseenter = function() {
    
    		// 让glass和box1出现
    		glass.style.display = "block";
    
    		box1.style.display = "block";
    	}
    
    	// 当鼠标离开让glass和box1消失
    	box.onmouseleave = function() {
    
    		glass.style.display = "none";
    
    		box1.style.display = "none";
    	}
           
    
           //封装方法兼容ie与高级浏览器获取图片到页面的距离
            function offset(dom) {
    
    	// 获取浏览器的信息
    	var str = window.navigator.userAgent;
    
    	var isIE8 = null;
    
    	if (str.indexOf("MSIE 8.0") >= 0) {
    
    		// console.log("是IE8");
    		isIE8 = true;
    
    	} else {
    
    		// console.log("不是IE8");
    		isIE8 = false;
    	}
    
    	var result = {
    
    		left: dom.offsetLeft,
    
    		top: dom.offsetTop
    	}
    
    	while (dom != document.body) {
    
    		dom = dom.offsetParent;
    
    		// 判断是否是IE8
    		if (isIE8) {
    
    			// 说明是IE8， 不需要额外的计算父元素的边框
    			result.left += dom.offsetLeft;
    
    			result.top += dom.offsetTop;
    
    		} else {
    			// 说明不是IE8, 要额外加上父元素的边框
    			result.left += dom.offsetLeft + dom.clientLeft;
    
    			result.top += dom.offsetTop + dom.clientTop;
    		}
    		
    	}
    
    	return result;
    } 
    
    
    
    
    	// 获取box到页面之间的距离
    	var box_offset = offset(box);
    
    	var box_left = box_offset.left;
    
    	var box_top = box_offset.top;
    
    	// 给box添加mousemove事件
    	box.onmousemove = function(e) {
    		// 兼容方式
    		var e = e || window.event;
    
    		// 获取鼠标位于页面中的位置
    		var x = e.clientX;
    
    		var y = e.clientY + document.documentElement.scrollTop;
    
    		// 定义变量用于简化书写
    		var resultX =  x - box_left - glass.clientWidth / 2 ;
    
    		var resultY =  y - box_top - glass.clientHeight / 2 ;
    
    		// 边界限制
    		if (resultX < 0) {
    
    			resultX = 0;
    
    		} else if (resultX > box.clientWidth - glass.clientWidth) {
    
    			resultX = box.clientWidth - glass.clientWidth;
    		}
    
    		// 上下
    		if (resultY < 0) {
    
    			resultY = 0;
    
    		} else if (resultY > box.clientHeight - glass.clientHeight) {
    
    			resultY = box.clientHeight - glass.clientHeight;
    		}
    
    		// 赋值glass的定位值
    		glass.style.left = resultX + "px";
    
    		glass.style.top = resultY + "px";
    
    		// 改变box1中的图片定位
    		box1.style.backgroundPositionX = -resultX * 2 + "px";
    
    		box1.style.backgroundPositionY = -resultY * 2 + "px";
    	}
    
    	</script>
    </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70]: /images/20210813/168047058a9446e1b1801910557b0436.png