• 欢迎访问web前端中文站,JavaScript,CSS3,HTML5,web前端demo
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏web前端中文站吧

js入门 纯js实现图片放大镜效果 商品特效代码 demo下载

JavaScript web前端中文站 2年前 (2018-03-17) 3563次浏览 已收录 0个评论

今天 web 前端中文站主要分享的是,如何用纯 js 代码来实现商品图片放大镜效果

具体效果是,当鼠标移动到某一张图片上,以该点为中心,进行图片放大显示。

原图如下:

 

js 入门 纯 js 实现图片放大镜效果 商品特效代码 demo 下载

放大前图片

下面这张是放大的效果图:(见图三,蝴蝶的变化)

js 入门 纯 js 实现图片放大镜效果 商品特效代码 demo 下载

那如何利用 js 来实现了?主要代码如下:

 (function(){
 var d = document.getElementById("pic-list"),
 c = d.getElementsByTagName("li"),
 l = c.length,
 scale = 2;
 function stopEvent(e){
 if(e && e.stopPropagation){
 e.stopPropagation(); 
 }else{
 e.cancelBubble = true;
 }
 }
 for(var i = 0; i < l; i++){
 c[i].left = c[i].getBoundingClientRect().left;

 c[i].top = c[i].getBoundingClientRect().top;

 (function(i){
 c[i].onmouseover = function(e){
 var e = e || window.event;
 var img = this.getElementsByTagName("img")[0];
 
 img.style.width = img.offsetWidth * scale + "px"; //480
 img.style.height = img.offsetHeight * scale + "px"; //640
 
 img.style.left = (this.offsetWidth - img.offsetWidth) / 2 + "px"; // (241 - 480)/2 = -119.5 px
 img.style.top = (this.offsetHeight - img.offsetHeight) / 2 + "px"; // (321 - 640)/2 = -159.5 px
 
 this.dsx = Math.abs(parseInt(img.style.left)); //119
 this.dsy = Math.abs(parseInt(img.style.top)); //159
 this.cdx = this.offsetWidth / 2; //120.5
 this.cdy = this.offsetHeight / 2; //160.5
 
 this.left = (this.offsetWidth - img.offsetWidth) / 2 // (241 - 480)/2 = -119.5
 this.top = (this.offsetHeight - img.offsetHeight) / 2 // (321 - 640)/2 = -159.5

 stopEvent(e);
 };
 c[i].onmouseout = function(e){
 var e = e || window.event;
 var img = this.getElementsByTagName("img")[0];
 

 img.style.width = img.offsetWidth / scale + "px"; // 480 / 2 = 240 px 运算后 img.style.width 值改变了,img.offsetWidth 也变了,这两个一样 
 img.style.height = img.offsetHeight / scale + "px"; // 640 / 2 = 320 px
 

 img.style.left = Math.floor((this.offsetWidth - img.offsetWidth) / 2) + "px"; 
 img.style.top = Math.floor((this.offsetHeight - img.offsetHeight) / 2) + "px";
 stopEvent(e);
 };
 c[i].onmousemove = function(e){
 var e = e || window.event;
 var img = this.getElementsByTagName("img")[0];
 
 var center = {"x":this.getBoundingClientRect().left + this.offsetWidth / 2,"y":this.getBoundingClientRect().top + this.offsetHeight / 2};
 
 var mPos = {"x":e.clientX,"y":e.clientY};
 var deltax = center.x - mPos.x,deltay = center.y - mPos.y;
 
 var dleft = deltax / this.cdx * this.dsx;
 var dtop = deltay / this.cdy * this.dsy;
 
 img.style.left = Math.floor(this.left + dleft) + "px";

 img.style.top = Math.floor(this.top + dtop) + "px";
 
 stopEvent(e);
 }
 })(i);
 }
})();

在线演示

具体图片放大酷炫效果 js 代码,html 和 css 代码 demo、素材在下面链接:

百度网盘下载 ? ? ?密码:oe8c

==========================

web 前端中文站点评:

实现图片放大镜效果,可以使用纯 js 实现,也可以使用纯 CSS3 实现,后面会继续给大家分享如何使用 CSS3 实现原理。web 前端不仅仅靠某一种语言,可以结合多种语言一起实现所需要的效果,因此 web 前端更具有其强大的效果作用。

 


web 前端中文站 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:js 入门 纯 js 实现图片放大镜效果 商品特效代码 demo 下载
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址