前端特效-Javascript实现购物页面图片放大效果

Posted 2020-10-11 Dragonir

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端特效-Javascript实现购物页面图片放大效果相关的知识，希望对你有一定的参考价值。

实现效果

实现代码:

<!DOCTYPE html>
<html>
<head>
	<title>购物图片放大</title>
	<meta charset="utf-8">
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		.box{
			width: 200px;
			height: 200px;
			margin: 100px;
			border: 1px solid #ccc;
			position: relative;
		}
		.big{
			width: 400px;
			height: 400px;
			position: absolute;
			top: 0;
			left: 360px;
			border: 1px solid #ccc;
			overflow: hidden;
			display: none;
		}
		.mask{
			width: 80px;
			height: 80px;
			background-color: rgba(3,12,60,0.4);
			position: absolute;
			top: 0;
			left: 0;
			cursor: move;
			display: none;
		}
		.small{
			position: relative;
		}
		.small img{
			width: 200px;
			height: 200px;
		}
		.big img{
			height: 1000px;
			width: 1000px;
		}
		img{
			vertical-align: top;
		}
	</style>
</head>
<body>
<!-- 大图片宽度/big框宽度 = small框宽度/mask框宽度，并且小照片宽度 = small框宽度，如BigImg = 1000， SmallImg = small = 200，big=400，那么mask = 80 -->
<div class="box">
	<div class="small">
		<img src="./resident.jpg" alt="small Image">
		<div class="mask"></div>
	</div>
	<div class="big">
		<img src="./resident.jpg" alt="Big Image">
	</div>
</div>

<script type="text/javascript">
	window.onload = function(){
		// 鼠标放到小盒子上时，大盒子图片同等比例移动
		//技术点：onmouseenter==onmouseover 第一个不冒泡
        //技术点：onmouseleave==onmouseout  第一个不冒泡
        //步骤：
        //1.鼠标放上去显示盒子，移开隐藏盒子
        //2.mask跟随移动
        //3.右侧的大图片，等比例移动

        var box = document.getElementsByClassName("box")[0];
        var small = box.firstElementChild || box.firstChild;
        var big = box.children[1];
        var mask = small.children[1];
        var bigImg = big.children[0];

        // 1.鼠标放上去显示盒子，移开隐藏盒子（为小盒子绑定事件）

        // 调用封装好的方法，显示元素
        small.onmouseenter = function(){
        	show(mask);
        	show(big);
        }
        // 调用封装好的方法，隐藏元素
        small.onmouseleave = function(){
        	hide(mask);
        	hide(big);
        }

        // 2. mask跟随鼠标移动
        // 绑定事件是onmousemove，事件源是small，只要在小盒子上移动1px，mask也要跟随移动
        small.onmousemove = function(event){
        	// 想移动mask，需要知道鼠标在small中的位置，x作为mask的left值，y作为mask的top值
        	event = event || window.event;
        	// 获取鼠标在整个页面的位置
        	var pagex = event.pageX || scroll().left + event.clientX;
        	var pagey = event.pageY || scroll().top + event.clientY;
        	// 让鼠标在mask的最中间，减去mask宽高的一半，x、y为mask的坐标
        	// console.log(pagex + " " + pagey);
        	var x = pagex - box.offsetLeft - mask.offsetWidth/2;
        	var y = pagey - box.offsetTop - mask.offsetHeight/2;
        	// 限制mask的范围，left取值大于0，小于小盒子的宽减mask的宽
        	if(x<0){
        		x = 0;
        	}
        	if(x>small.offsetWidth - mask.offsetWidth){
        		x = small.offsetWidth - mask.offsetWidth;
        	}
        	if(y<0){
        		y = 0;
        	}
        	if(y>small.offsetHeight - mask.offsetHeight){
        		y = small.offsetHeight - mask.offsetHeight;
        	}
        	// 移动mask
        	// console.log("x:" + x + " y:" + y);
        	mask.style.left = x + "px";
        	mask.style.top = y + "px";

        	//3.右侧的大图片，等比例移动
            // 大图片/大盒子 = 小图片/mask盒子
            // 大图片走的距离/mask走的距离 = （大图片-大盒子）/（小图片-mask）
            //比例var times = (bigImg.offsetWidth-big.offsetWidth)/(small.offsetWidth-mask.offsetWidth);
            //大图片走的距离/mask盒子走的距离 = 大图片/小图片
            var times = bigImg.offsetWidth/small.offsetWidth;
            var _x = x * times;
            var _y = y * times;

            bigImg.style.marginLeft = -_x + "px";
            bigImg.style.marginTop = -_y + "px";
        }
	}
	// 显示隐藏元素
    function show(element){
    	element.style.display = "block";
    }
    function hide(element){
    	element.style.display = "none";
    }
</script>
</body>
</html>

以上是关于前端特效-Javascript实现购物页面图片放大效果的主要内容，如果未能解决你的问题，请参考以下文章

前端放大镜特效

前端必学——用JavaScript实现电商图片放大镜效果（附代码）