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>
时间： 2024-12-30 22:58:21