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

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

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

原图如下:

 

放大前图片

放大前图片

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

图三蝴蝶被放大

那如何利用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、素材在下面链接:
抱歉,只有对本文发表过评论才能阅读隐藏内容。

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

web前端中文站点评:

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

 

0
如无特殊说明,文章均为原作者原创,转载请注明出处

该文章由 发布

这货来去如风,什么鬼都没留下!!!
发表我的评论

Hi,请填写昵称和邮箱!

取消评论
代码 贴图 加粗 链接 删除线 签到