JavaScript实现放大镜的效果的实例

黄舟
Freigeben: 2017-11-24 09:40:00
Original
1547 Leute haben es durchsucht

相信大家对放大镜效果不会太陌生吧,在我们的开发中,经常会使用到JavaScript实现放大镜的效果,尤其是在开发商城之类的项目,会平凡使用到放大镜效果,那么今天我们就为大家介绍下使用JavaScript实现放大镜的效果的简单实例。

思路:

先让move块和bimg块隐藏,当鼠标移动到box上时,使move块和bimg块显示,获取鼠标当前的位置,然后经过计算给与move块和bimg块适当的值实现放大镜效果(move块和bimg块的位置的计算后面有详细介绍)

    放大镜   

#

#

Nach dem Login kopieren

css样式:

*{ margin:0px; padding:0px; } #box{ width:430px; height:430px; margin:100px; margin-left:17%; position:relative;//这里使用相对定位,好让其他的元素能依靠这个元素定位 } #move{ background-image:url(../images/move.png); width:220px; height:220px; position:absolute; left:0px; top:0px; display:none;//先让他隐藏,用js使其显示 } #bimg{ width:430px; height:430px; overflow:hidden; position:absolute; top:0px; left:450px; display:none;//先让他隐藏,用js使其显示 } #bimg img{ width:800px; height:800px; position:absolute; top:0px; left:0px; }
Nach dem Login kopieren

Javascript:

function bigimg(){ var bbox = document.getElementById("box"); var bmove = document.getElementById("move"); var bbimg = document.getElementById("bimg"); var b_bimg = document.getElementById("b_bimg"); bbox.onmouseover = function(){//鼠标移动到box上显示大图片和选框 bbimg.style.display = "block"; bmove.style.display="block"; } bbox.onmouseout = function(){//鼠标移开box不显示大图片和选框 bbimg.style.display = "none"; bmove.style.display="none"; } bbox.onmousemove = function(e){//获取鼠标位置 var x = e.clientX;//鼠标相对于视口的位置 var y = e.clientY; var t = bbox.offsetTop;//box相对于视口的位置 var l = bbox.offsetLeft; var _left = x - l - bmove.offsetWidth/2;//计算move的位置 var _top = y - t -bmove.offsetHeight/2; if(_top<=0)//滑到box的最顶部 _top = 0; else if(_top>=bbox.offsetHeight-bmove.offsetHeight)//滑到box的最底部 _top = bbox.offsetHeight-bmove.offsetHeight ; if(_left<=0)//滑到box的最左边 _left=0; else if(_left>=bbox.offsetWidth-bmove.offsetWidth)//滑到box的最右边 _left=bbox.offsetWidth-bmove.offsetWidth ; bmove.style.top = _top +"px";//设置move的位置 bmove.style.left = _left + "px"; var w = _left/(bbox.offsetWidth-bmove.offsetWidth);//计算移动的比例 var h = _top/(bbox.offsetHeight-bmove.offsetHeight); var b_bimg_top = (b_bimg.offsetHeight-bbimg.offsetHeight)*h;//计算大图的位置 var b_bimg_left = (b_bimg.offsetWidth-bbimg.offsetWidth)*w; b_bimg.style.top = -b_bimg_top + "px";//设置大图的位置信息 b_bimg.style.left = -b_bimg_left + "px"; } }
Nach dem Login kopieren

效果图:

1、move块的计算

黑色箭头:

var x = e.clientX;//鼠标相对于视口的位置 var y = e.clientY;
Nach dem Login kopieren

红色箭头:

var t = bbox.offsetTop;//box相对于视口的位置 var l = bbox.offsetLeft;
Nach dem Login kopieren

橙色箭头:

var _left = x - l - bmove.offsetWidth/2;//计算move的位置 var _top = y - t -bmove.offsetHeight/2;
Nach dem Login kopieren

2、bimg块的计算

利用move块在可移动范围内的比例来设置大图的位置

move块的移动范围:

bbox.offsetWidth-bmove.offsetWidth
Nach dem Login kopieren

move块现在的坐标占可移动范围的比例:

var w = _left/(bbox.offsetWidth-bmove.offsetWidth);//计算移动的比例 var h = _top/(bbox.offsetHeight-bmove.offsetHeight);
Nach dem Login kopieren

bimg的移动范围:

b_bimg.offsetHeight-bbimg.offsetHeight
Nach dem Login kopieren

bimg的位置:

var b_bimg_top = (b_bimg.offsetHeight-bbimg.offsetHeight)*h;//计算大图的位置 var b_bimg_left = (b_bimg.offsetWidth-bbimg.offsetWidth)*w;
Nach dem Login kopieren

总结:

相信大家通过对本文的学习对JavaScript实现放大镜效果有了进一步的了解,对于不了解放大镜效果的小伙伴是一个不错的选择,希望对你工作有所帮助!

相关推荐:

如何用jQuery实现放大镜效果

Canvas实现放大镜效果

用css实现图片放大镜效果实例详解(图)

Das obige ist der detaillierte Inhalt vonJavaScript实现放大镜的效果的实例. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!