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

发布时间:2021-12-17 发布网站:https://www.cnblogs.com/dragonir
前端之家收集整理的这篇文章主要介绍了【前端】特效-Javascript实现购物页面图片放大效果前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

实现效果

 

【前端】特效-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实现购物页面图片放大效果所遇到的程序开发问题。

如果觉得前端之家网站内容还不错,欢迎将前端之家网站推荐给前端开发程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。