JavaScript实现商品图片随鼠标动态全图放大

水深无声 2021-11-10 00:44 345阅读 0赞

### 一.实现效果展示： ###

--------------------

![在这里插入图片描述][20190801214350601.gif]

### 二.代码实现 ###

--------------------

**1.html部分：**

*  使用两张图片，一张是放大图，一张原图。
 *  w h 属性是为了在js可以直接获取，其实就是一个用户指定大图的宽高值

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>商品广告放大显示</title>
            <link rel="stylesheet" type="text/css" href="css/reset.css"/>
            <link rel="stylesheet" type="text/css" href="css/myTest2.css"/>
            <script src="js/myTest2.js" type="text/javascript" charset="utf-8"></script>
        </head>
    	<body>
            <p id="ad">
                <a href="img/apple_1_bigger.jpg" h="330" w="400" title="高颜值MP3音乐播放器">
                    <img src="img/apple_1.jpg" >
                </a> 
            </p>
    	</body>
    </html>

**2.css部分：**

*  大图样式预先设置好，当鼠标进入时，将div （bigImg）加进去
 *  宽高先设置为0，在js里动态增加，实现动态变化

body{ 
        padding: 200px;
    }
    #ad img{ 
        border: 1px solid gray;
    }
    .bigImg{ 
        width: 0px; /* 400*/
        height: 0px;/* 330 */
        background-color: #000000;
        padding: 10px;
        position: absolute;
        overflow: hidden;
    }
    .bigImg p { 
        font-size: 18px;
        line-height: 28px;
        color: #FFFF00;
    }

**3.js部分：**

*  获取鼠标的偏移量，如果不设置就会出现onmouseover 和onmouseout 两个监听来回切换出现卡顿
 *  鼠标移入事件之前，清除定时器也是必要的，当它宽高为达到最大值时，鼠标就移开，再次移入，上次的定时器未得到清除，出现只产生部分图片。

var img = null;
    var time = null;
    window.onload = function() { 
    	img = document.getElementById('ad').getElementsByTagName('img')[0];
    	console.log(img);
    	img.onmouseover = function(event) { 
    		console.log('mouseIn');
    		//鼠标移入
    		//移入后就创建节点将放大图片显示页面上
    		var div = document.createElement('div');
    		div.id = 'bigImg';
    		div.className = 'bigImg'
    		//创建img标签
    		var img = document.createElement('img');
    		img.src = this.parentNode.href;
    		//将img放入到div中
    		div.appendChild(img);
    		// console.log(div)
    		//创建p标签，并将新产生的div放到body元素中
    		var p = document.createElement('p');
    		p.innerHTML = this.parentNode.title;
    		console.log(this.parentNode.title) //将标题取到并放到新的p节点
    
    		div.appendChild(p);
    		//将div节点放入body元素中并显示出来 
    		document.body.appendChild(div);
    
    		//启动定时器通过改变元素div的高宽实现动态放大 
    
    		//获取预先定义好的h w 将其设为最终的高宽
    		var w = this.parentNode.getAttribute('w');
    		var h = this.parentNode.getAttribute('h');
    		console.log(w + ':' + h);
    		if (null != time) { 
    			console.log('Cleartime');
    			clearInterval(time);
    			time = null;
    		}
    		if (time == null) { 
    			time = window.setInterval(function() { 
    
    				/* console.log(div) */
    				//获取弹出框div的高和宽
    				var width = div.style.width ? div.style.width : document.defaultView.getComputedStyle(div, null).width;
    				var height = div.style.height ? div.style.height : document.defaultView.getComputedStyle(div, null).height;
    				console.log(width + ':' + height);
    				width = parseInt(width) + 5;
    				height = parseInt(height) + 5;
    
    
    				if (height > h) { 
    					height = h;
    				}
    				if (width > w) { 
    					width = w;
    				}
    
    				div.style.width = width + 'px';
    				div.style.height = height + 'px';
    
    				if (width == w && height == h) { 
    					if (null != time) { 
    						console.log('Cleartime');
    						clearInterval(time);
    						time = null;
    					}
    
    				}
    			}, 10)
    
    		}
    		//获取鼠标的坐标值,确保鼠标进入区域就开始
    		var evt = event ? event : window.event;
    		var x = evt.pageX + 5;
    		var y = evt.pageY + 5;
    		console.log("鼠标的位置" + x + ':' + y);
    
    		div.style.top = y + 'px';
    		div.style.left = x + 'px';
    
    
    	}
    	//鼠标移开
    	img.onmouseout = function(event) { 
    		console.log('onmouseOut')
    		//删除创建的div
    		var div = document.getElementById('bigImg');
    		div.remove()
    	}
    
    
    
    	//鼠标移动
    	img.onmousemove = function(event) { 
    		console.log('moveIn')
    		//记录鼠标的当前位置
    		//获取鼠标的坐标值
    		var div = document.getElementById('bigImg');
    		var evt = event ? event : window.event;
    		var x = evt.pageX + 5;
    		var y = evt.pageY + 5;
    		console.log("鼠标的位置" + x + ':' + y);
    		div.style.top = y + 'px';
    		div.style.left = x + 'px';
    	}
    
    }

--------------------

[**源文件下载**][Link 1]

--------------------

[20190801214350601.gif]: /images/20211109/2c9e11d6ec7849a59b43f8540a8cc4e5.png
[Link 1]: https://github.com/codeYoke/MyJavaScriptStudy

发表评论取消回复

表情：

评论列表（有 0 条评论，345人围观）

还没有评论，来说两句吧...

相关阅读

相关 css 实现鼠标悬停放大

.qr-code:hover { transform: scale(1.5); // 放大1.5倍 transition: a

迷南。/ 2023年10月06日 09:19/ 0 赞/ 3 阅读

相关 js鼠标滚轮放大缩小图片

[下载地址][Link 1]JavaScript通过转动鼠标滚轮放大缩小图片 ![1631561166.png][] dd: [Link 1]: https://yy1

蔚落/ 2022年09月12日 01:43/ 0 赞/ 257 阅读

相关鼠标经过，图片会放大（从中心位置放大）

js部分： //鼠标经过a标签，对应的图片会放大效果 var zoom = 1.03; var width = $(thi

叁歲伎倆/ 2022年08月06日 12:13/ 0 赞/ 208 阅读

相关 jquery图片随鼠标移动放大(两种方式)

1. 示例 //鼠标移入 function divIn(event) { var img = event.

墨蓝/ 2022年06月04日 03:19/ 0 赞/ 686 阅读

相关仿淘宝实现鼠标移入图片，图片放大功能

<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <sty

深藏阁楼爱情的钟/ 2022年05月29日 11:36/ 0 赞/ 318 阅读

相关商品图片放大镜的JavaScript实现

html代码 <div id="content"> <div id="box"> <img src="imgs/1-large

浅浅的花香味﹌/ 2022年05月27日 03:06/ 0 赞/ 272 阅读

相关实现鼠标经过,产品图片的局部放大功能

vue中实例：操作dom实现参考：https://blog.csdn.net/alightman/article/details/78074687 注意点： 1、小图、

た入场券/ 2022年05月23日 01:43/ 0 赞/ 303 阅读

相关鼠标放上去图片放大css

<style type="text/css"> \div1\{ width: 200px; height: 138p

比眉伴天荒/ 2022年05月22日 02:35/ 0 赞/ 276 阅读

相关 JavaScript实现商品图片的细节放大随鼠标移动

一.效果展示 -------------------- ![在这里插入图片描述][20190803140617562.gif] 二.代码实现 1.html部分

梦里梦外;/ 2021年11月10日 15:34/ 0 赞/ 280 阅读

相关 JavaScript实现商品图片随鼠标动态全图放大

一.实现效果展示： -------------------- ![在这里插入图片描述][20190801214350601.gif] 二.代码实现 ------

水深无声/ 2021年11月10日 00:44/ 0 赞/ 346 阅读