返回首页 | 金赞娱乐场

合作共赢、快速高效、优质的网站建设提供商

更多精品源码-尽在织梦模板-www.moke8.com

网站开发原生JS完成图片放大镜插件

时间:2017-11-07 编辑:admin

前 言

我们我们常常逛各种电商类的网站,产品的细节就需求用到扩大镜,这个我们必定不生疏,今日我们就做一个图片扩大镜的插件,来看看图片是怎么被扩大的

先看一下我们要是完结的终究作用是怎么样的

看完作用,我们有思路了吗,没有的话,我们一同来看一下是怎么完结的~

1完结思路

① 要完结指上后扩大的作用,需求做三个金赞官网div,一个用来放原图,另一个用来放扩大作用的div,最终一个是鼠标指上后需求扩大部分的div。

②断定扩大份额,最重要的一点,鼠标指上的div与扩大作用的div,和原图与扩大图的份额要持平。

③将鼠标指上后的扩大作用显现出来。

2详细完结过程

首要,我们先来建三个div。

 div id="wrasdfspper" 
 !--小图-- 
 div id="img_min" 
 !--图片-- 
 img src="img/22.png" asdfslt="min" 
 !--跟从鼠标的白块-- 
 p id="mousebg" /p 
 /div 
 !--大图-- 
 div id="img_masdfsx" 
 img id="img2_img" src="img/22.png" asdfslt="masdfsx" 
 /div 
 /div 

我们HTML代码部分现已悉数完结,接下来,我们用JS来完结功用:

给原图增加三个事情,别离是,鼠标进入,鼠标移动,鼠标移出。

当鼠标移入原图时,鼠标指上时的div和扩大作用的div一起显现。

 img1.onmouseover = function () { 
 //鼠标进入 
 img2.style.displasdfsy = 'block'; 
 mousebg.style.displasdfsy = 'block'; 
 } 

鼠标移出事情:

 img1.onmouseout = function () { 
 //鼠标脱离 
 img2.style.displasdfsy = 'none'; 
 mousebg.style.displasdfsy = 'none'; 
 } 

重点是当鼠标移动时,依据p标签与原图的方位,来显现大图需求扩大的部分。

 vasdfsr _event = event||window.event;//兼容性处理 
 vasdfsr mouseX = _event.clientX - img1.offsetLeft; 
 //核算鼠标相对与小图的方位 
 vasdfsr mouseY = _event.clientY - img1.offsetTop; 

在做方位剖析时,需求考虑四种临界状况:

就是当鼠标从图片的上、下、左、右刚刚进入时,而且这个间隔小于鼠标指上的div宽度的二分之一时,扩大作用的div显现出来,并不移动。

 //特殊状况处理,别离接近四条边的时分 
 if(mouseX mousebg.offsetWidth/2){ 
 mouseX = mousebg.offsetWidth/2; 
 if(mouseX img1.offsetWidth-mousebg.offsetWidth/2){ 
 mouseX = img1.offsetWidth-mousebg.offsetWidth/2; 
 if(mouseY mousebg.offsetHeight/2){ 
 mouseY = mousebg.offsetHeight/2; 
 if(mouseY img1.offsetHeight-mousebg.offsetHeight/2){ 
 mouseY = img1.offsetHeight-mousebg.offsetHeight/2; 
 } 

最终,核算大图的显现规模:

 //核算大图的显现规模 
 img2_img.style.left = -mul*mouseX+img2.offsetWidth/2+"px"; 
 img2_img.style.top = -mul*mouseY+img2.offsetHeight/2+"px"; 
 //使鼠标在白块的中心 
 mousebg.style.left = mouseX-mousebg.offsetWidth/2+"px"; 
 mousebg.style.top = mouseY-mousebg.offsetHeight/2+"px"; 

这样,我们用JS完结图片扩大镜的插件就悉数完结了~

如果有任何疑问,欢迎我们留言纠正~


浏览:

网站建设

流程

    网站建设流程