JS 可切换图片的商品放大镜

最新推荐文章于 2023-06-15 17:34:06 发布
最新推荐文章于 2023-06-15 17:34:06 发布
阅读量452 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35254240/article/details/91824883
版权 
//Utils.js

var Utils=(function () {
    return {
        //SSS
        loadImg:function (srcList,callBack) {
            var img=new Image();
            img.num=0;
            img.imgList=[];
            img.srcList=srcList;
            img.callBack=callBack;
            img.addEventListener("load",this.loadHandler);
            img.src="./img/"+srcList[img.num];

        },
        loadHandler:function (e) {
            // console.log(this.num);
            // console.log(this.imgList);
            // console.log(this.callBack);
            this.imgList.push(this.cloneNode(false));
            this.num++;
            if(this.num>=this.srcList.length){
                this.callBack(this.imgList);
                return;
            }
            //事件侦听没有被删除,只需更改src,加载后仍然触发了该事件,进入该函数
            this.src="./img/"+this.srcList[this.num];
        },
        ce:function (type,style) {
            var elem=document.createElement(type);
            if(style) Object.assign(elem.style,style);
            return elem;
        },
        randomColor:function () {
            var col="#";
            for(var i=0;i<6;i++){
                col+=Math.floor(Math.random()*16).toString(16);
            }
            return col;
        }
    }
})();
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/Utils.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<script type="text/javascript">
			var mask, zoom, mgCon, prev;
			var arr = ["./img/phone0_mini.jpg", "./img/phone1_mini.jpg", "./img/phone2_mini.jpg", "./img/phone3_mini.jpg", "./img/phone4_mini.jpg", "./img/phone5_mini.jpg", "./img/phone6_mini.jpg", "./img/phone7_mini.jpg"];
			var bool = false,
				direction = "",
				speed = 10;
			const LEFTDIVWIDTH = 450,
				MASKTOP = 200,
				MASKLEFT = 150,
				MASKWIDTH = 250,
				ZOOMWIDTH = 540;
			init();

			function init() {
				createLeftDiv();
				cerateRightDiv();
				createMiniImg();
				setInterval(animation, 16);
			}

			function animation() {
				if(!bool) return;
				if(direction === "left") {
					imgCon.style.left = imgCon.offsetLeft - speed + "px";
					if(imgCon.offsetLeft < -(imgCon.offsetWidth - (6 * 58 + 5 * 6))) {
						imgCon.style.left = -(imgCon.offsetWidth - (6 * 58 + 5 * 6)) + "px";
						bool = false;
					}
				} else if(direction === "right") {
					imgCon.style.left = imgCon.offsetLeft + speed + "px";
					if(imgCon.offsetLeft >= 0) {
						imgCon.style.left = "0px";
						bool = false;
					}
				}
			}

			function createLeftDiv() {
				var div = Utils.ce("div", {
					width: LEFTDIVWIDTH + "px",
					height: LEFTDIVWIDTH + "px",
					position: "absolute",
					border: "1px solid #ccc",
					backgroundImage: "url(./img/phone0.jpg)",
					backgroundSize: "100% 100%",
					top: MASKTOP + "px",
					left: MASKLEFT + "px"
				});
				mask = Utils.ce("div", {
					display: "none",
					width: MASKWIDTH + "px",
					height: MASKWIDTH + "px",
					backgroundColor: "rgba(255,230,0,0.3)",
					position: "absolute"
				})
				div.appendChild(mask);
				document.body.appendChild(div);
				div.addEventListener("mouseenter", onMouseLisenter);
				div.addEventListener("mouseleave", onMouseLisenter);
			}

			function cerateRightDiv() {
				zoom = Utils.ce("div", {
					width: ZOOMWIDTH + "px",
					height: ZOOMWIDTH + "px",
					position: "absolute",
					backgroundImage: "url(./img/phone0.jpg)",
					backgroundPositionX: "0px",
					backgroundPositionY: "0px",
					left: LEFTDIVWIDTH + MASKLEFT + 3 + "px",
					top: MASKTOP + "px",
					display: "none"
				})
				document.body.appendChild(zoom);
			}

			function createMiniImg() {
				var div = Utils.ce("div", {
					width: "452px",
					height: "58px",
					backgroundColor: "#666666",
					margin: "5px 0 18px",
					position: "absolute",
					top: MASKTOP + LEFTDIVWIDTH + "px",
					left: MASKLEFT + "px"
				});
				createImgButton(div);
				createImgCon(div);
				document.body.appendChild(div);
			}

			function createImgCon(parent) {
				var div = Utils.ce("div", {
					width: "380px",
					height: "58px",
					position: "relative",
					margin: "auto",
					overflow: "hidden",
					//                backgroundColor:"rgba(255,0,0,0.3)"
				});
				imgCon = Utils.ce("div", {
					height: "58px",
					position: "absolute",
					left: "0",
					fontSize: "0px",
					width: ((arr.length * 58) + (arr.length - 1) * 6) + "px"
				});
				for(var i = 0; i < arr.length; i++) {
					var img = Utils.ce("img", {
						//                    border:"2px solid #e53e41"
						marginLeft: i === 0 ? "0px" : "6px",
						border: "2px solid rgba(0,0,0,0)"
					});
					img.src = arr[i];
					imgCon.appendChild(img);
				}
				selectImg(imgCon.firstElementChild);
				imgCon.addEventListener("mouseover", imgConHandler);
				div.appendChild(imgCon);
				parent.appendChild(div);
			}

			function imgConHandler(e) {
				if(e.target.nodeName !== "IMG") return;
				selectImg(e.target);
				var src = e.target.src.replace("_mini", "");
				zoom.style.backgroundImage = mask.parentElement.style.backgroundImage = "url(" + src + ")";
			}

			function selectImg(elem) {
				if(prev) {
					prev.style.border = "2px solid rgba(0,0,0,0)";
				}
				prev = elem;
				prev.style.border = "2px solid #e53e41";
			}

			function createImgButton(parent) {
				var arr = ["./img/prev.png", "./img/next.png"];
				for(var i = 0; i < arr.length; i++) {
					var img = Utils.ce("img", {
						position: "absolute",
						top: "13px",
						left: i === 0 ? "0px" : "none",
						right: i === 1 ? "0px" : "none"
					});
					img.src = arr[i];
					//					console.log(img.src);//图片路径
					parent.appendChild(img);
					img.addEventListener("click", imgMoveHandler);
				}
			}

			function imgMoveHandler(e) {
				if(bool) return;
				if(direction === "left" && this.src.indexOf("next") > -1) return;
				if(direction === "right" && this.src.indexOf("prev") > -1) return;
				if(this.src.indexOf("next") > -1) {
					direction = "left";
				} else if(this.src.indexOf("prev") > -1) {
					direction = "right";
				}
				bool = true;
			}

			function onMouseLisenter(e) {
				if(e.type === "mouseenter") {
					mask.style.display = "block";
					zoom.style.display = "block";
					this.addEventListener("mousemove", onMouseLisenter);
				} else if(e.type === "mouseleave") {
					mask.style.display = "none";
					zoom.style.display = "none";
					this.addEventListener("mousemove", onMouseLisenter);
				} else if(e.type === "mousemove") {
					moveMask(e.clientX, e.clientY, this);
					zoomBackgroundPosition();
				}
			}

			function moveMask(x, y, parent) {
				var rect = parent.getBoundingClientRect();
				mask.style.left = x - rect.x - mask.offsetWidth / 2 + "px";
				mask.style.top = y - rect.y - mask.offsetHeight / 2 + "px";
				if(mask.offsetLeft <= 0) {
					mask.style.left = 0 + "px";
				}
				if(mask.offsetTop <= 0) {
					mask.style.top = 0 + "px";
				}
				if(mask.offsetLeft >= parent.clientWidth - mask.clientWidth) {
					mask.style.left = parent.clientWidth - mask.clientWidth + "px";
				}
				if(mask.offsetTop >= parent.clientHeight - mask.clientHeight) {
					mask.style.top = parent.clientHeight - mask.clientHeight + "px";
				}
			}

			function zoomBackgroundPosition() {
				var scale = (ZOOMWIDTH / MASKWIDTH) / 1.5;
				zoom.style.backgroundPositionX = -mask.offsetLeft * scale + "px";
				zoom.style.backgroundPositionY = -mask.offsetTop * scale + "px";
			}
		</script>
	</body>

</html>

 

甘乐2333
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
仿淘宝— 商品图片切换
erdouzhang
04-24 2275
在线展示 html:<div id="box"> <ul> <li id="li01"><img src="./images/01.jpg" alt=""></li> <li id="li02"><img src="./images/02.jpg" alt=""></li> <li id="li03"><img src="./images/0
JavaScript之图片切换（类似淘宝商品图切换）
m0_50481455的博客
04-23 3197
JavaScript之图片切换 下边给出几种方法进行图片切换： 方法一（小白专用款！简单易懂） 下边附上代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片切换2</title> <style type="text/css"> *{ padding: 0;
通过js代码实现图片切换和放大镜等效果
10-14
通过以上代码实现图片的切换和放大镜的效果 本代码是针对京东商城的手机详情页做的 通过移动手机的小图片可以切换不同的大图片 同时当鼠标放在大图片上时可以实现放大效果 分享给初学者！
js实现放大镜 （可以点击切换图片）
GuAng
09-18 390
1.先看看效果 鼠标不移入的效果 鼠标移入的效果 点击下方的图片可以切换要放大的图片
jQuery实用案例之电子相册(类似购物商城中商品图片切换展示)
小龙爷的博客
08-29 814
效果展示：点击上方的小图预览，下面展示出大图 案例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>电子相册</title> <style type="text/css"> ...
js放大镜放大图片效果
10-30
我们 js图片放大镜 ``` 二、CSS 样式 JS 放大镜图片效果的 CSS 样式主要负责设置图片展示区域、放大镜区域和图片标题区域的样式。这里使用了绝对定位来设置图片展示区域和放大镜区域的位置，并使用 border 属性...
jQuery商品放大镜预览代码
04-07
"jQuery商品放大镜预览代码"是一个专为提升在线购物体验设计的JavaScript插件，它模仿了淘宝等大型电商平台的商品主图放大效果，允许用户在不离开页面的情况下查看商品细节。这款插件通过jQuery库实现，以其高效、...
jQuery网站商品图片放大镜效果.zip
07-11
代码简介：jQuery网站商品图片放大镜效果是一款仿凡客诚品网站商品图片放大镜效果，缩略图可以左右滚动，鼠标划过缩略图切换显示中等尺寸图片，鼠标划过中等尺寸图片弹出显示大图，并支持局部放大。
JS图片放大镜
03-14
JavaScript（简称JS）图片放大镜是一种常见的Web前端技术，用于增强用户体验，特别是在电商网站上，让用户可以更清晰地查看商品细节。在苏宁商城等在线购物平台上，这种效果被广泛使用，它通过提供一个可交互的放大...
jQuery电商图片放大镜展示特效
07-28
"jQuery电商图片放大镜展示特效"就是为此目的而设计的一个插件，它能够帮助电商网站实现这种功能，让用户在不离开当前页面的情况下，通过鼠标悬停或点击来查看商品图片的高清晰度细节。 jQuery是一个轻量级、高性能...
JS图片切换和图片放大效果
06-01
原生JS写的图片放大效果插件，调用方法很简单，效果比较简单，兼容各浏览器，代码也不多，如需更复杂的效果，可自行修改代码。
JS仿淘宝商品主图切换放大镜预览代码
12-30
一款简单实用的JS仿淘宝商品主图切换放大镜预览代码，点击商品小图切换对应的大图，鼠标悬停大图局部放大镜预览效果，兼容IE6/7/8。
JS+html仿淘宝图片放大镜预览效果
01-10
JS+html实现淘宝图片放大镜预览效果
JavaScript之衣服相册切换效果（类似淘宝商品图切换）
m0_50481455的博客
04-21 666
JavaScript之衣服相册切换效果（类似淘宝商品图切换） 话不多说，直接上代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> #bigImg{ width: 200px;
仿淘宝商品详情，下拉切换到图片详情，上拉切换到图文简介
darongzi1314的专栏
03-16 3151
仿淘宝商品详情，下拉切换到图片详情，上拉切换到图文简介。
用JS实现类似淘宝购物图片切换
小小飞
01-21 1535
http-equiv="content" content="text/html" charset="utf-8"/>   type="text/css">   #div1   {   width: 300px;   height: 300px;   border: 1px solid #9fc;   backgr
使用JavaScript实现放大镜效果（有详细注释）
最新发布
chirrupy_YI的博客
06-15 2556
如何使用JavaScript实现放大镜效果
js实现放大镜
一颗帅白菜的博客
03-29 74
【代码】js实现放大镜。
js商品放大镜加主图切换
05-25
实现商品放大镜加主图切换需要一些前端技术和库的支持，以下是一个简单的实现思路： 1. 在HTML页面中定义一个容器用于显示商品主图和放大后的图片； 2. 使用JavaScript或者jQuery等库动态加载商品主图，同时添加...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值