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

程序员文章站 2022-07-02 16:07:45

...

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

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

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

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

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

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

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

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

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

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

8：兼容ie

1:首先结构样式部分

<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: 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;
		}
		
	</style>
</head>
<body>
	<div id="box">
		<div id="glass"></div>
	</div>
	<div id="box1"></div>

交互方面首先元素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不需要计算父元素的边框而高级浏览器需要额外加上父元素边框

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;
}

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

       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>

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

JQuery为textarea添加maxlength属性并且兼容IE

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

JQuery为textarea添加maxlength属性并且兼容IE

JQuery为textarea添加maxlength属性并且兼容IE_jquery

JQuery为textarea添加maxlength属性并且兼容IE_jquery

JavaScript兼容IE6的收起折叠以及展开效果的实现案例

JavaScript兼容IE6的收起折叠以及展开效果的实现案例