js图片放大镜
Posted tags: 篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js图片放大镜相关的知识，希望对你有一定的参考价值。 JS图片放大镜效果。 应用场景：各大电商网站。 (附件) 以上是关于js图片放大镜的主要内容，如果未能解决你的问题，请参考以下文章 angular js 鼠标移过图片放大，就是放在图片上图片放大 或者反击，
<!--
Author: XiaoWen
Create a file: 2017-01-13 12:28:36
Last modified: 2017-01-13 17:16:46
Start 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>