首页 > 代码库 > js图片放大镜
js图片放大镜
JS图片放大镜效果。
应用场景：各大电商网站。
(附件)
<!--Author: XiaoWenCreate a file: 2017-01-13 12:28:36Last modified: 2017-01-13 17:16:46Start to work:Finish the work:Other information:--><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } #box{ height: 280px; width: 480px; background: url(small.jpg) no-repeat; float:left; } #rec{ height: 100px; width: 100px; opacity:.5; background: #ccc; position: absolute; left: 0; top: 0; display:none; } #box1{ height: 400px; width: 400px; background: url(big.jpg) no-repeat; float:left; display: none; } </style></head><body><div id="box"> <div id="rec"></div></div><div id="box1"></div></body><script> box.onmouseover=function(){ rec.style.display=‘block‘; box1.style.display=‘block‘; } box.onmousemove=function(ev){ var e=ev||event; // var ex=e.clientX; //鼠标位置不在中间 // ex=e.clientX-rec.offsetWidth/2; //鼠标位置在中间 var ex=e.clientX-rec.offsetWidth/2; var ey=e.clientY-rec.offsetHeight/2; //让小方块不超出左边 if(ex<box.offsetLeft){ ex=box.offsetLeft } //让小方块不超出右边 if(ex>box.offsetLeft+box.offsetWidth-rec.offsetWidth){ //让小方块不超出左边 ex=box.offsetLeft+box.offsetWidth-rec.offsetWidth } //让小方块不超出上边 if(ey<box.offsetTop){ ey=box.offsetTop } //让小方块不超出下边 if(ey>box.offsetTop+box.offsetHeight-rec.offsetHeight){ ey=box.offsetTop+box.offsetHeight-rec.offsetHeight } rec.style.left=ex+‘px‘; rec.style.top=ey+‘px‘; box1.style.backgroundPositionX=-4*ex+‘px‘ box1.style.backgroundPositionY=-4*ey+‘px‘ } box.onmouseout=function(){ rec.style.display=‘none‘; box1.style.display=‘none‘; }</script></html>
js图片放大镜
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。