javascript 实现图片放大镜效果
2016-12-09 本文已影响22人
何必自找失落_
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片放大镜效果</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<style type="text/css">
#demo{
width: 350px;
margin: 20px auto;
border: 1px solid #666;
clear: both;
position: relative;
height: 350px;
}
img{
float: left;
}
#tep{
width: 250px;
height: 250px;
border: 1px solid #666;
position: absolute;
top: -1px;
left: 362px;
overflow: hidden;
display: none;
}
#bar{
display: inline-block;
width: 100px;
height: 100px;
border: 1px solid #ccc;
position: absolute;
top: 0px;
left: 0px;
background-color: #fff;
opacity: 0.4;
filter: alpha(opacity=40);
display: none;
cursor: crosshair;
}
</style>
</head>
<body>
<div id="demo">
<img src="img/small.jpg">
<span id="bar">
</span>
<div id="tep">
<img src="img/big.jpg">
</div>
</div>
<script type="text/javascript">
window.onload = function (){
var demo = document.getElementById("demo");
var bar = document.getElementById("bar");
var tepImg = document.getElementById("tep").getElementsByTagName("img")[0];
demo.onmouseover = bar.onmousemove = function (event){
// 移入的时候 显示出来 并判断 bar 的位置
bar.style.display = tep.style.display = "block";
barPosition(event);
}
// 判断bar的位置
function barPosition(event){
var event = event || window.event;
// 位置判断 画图就懂了
bar.style.left = event.clientX - demo.offsetLeft - bar.offsetWidth/2 + "px";
bar.style.top = event.clientY - demo.offsetTop - bar.offsetHeight/2 + "px";
// 超过边界
if (bar.offsetLeft < 0 ) {
bar.style.left = "0px"
}
if (bar.offsetLeft + bar.offsetWidth > 350) {
bar.style.left = 350 - bar.offsetWidth + "px";
}
if (bar.offsetTop < 0 ) {
bar.style.top = "0px"
}
if (bar.offsetTop + bar.offsetHeight > 350) {
bar.style.top = 350 - bar.offsetHeight + "px";
}
// 通过 bar的位置 在判断 tep img的位置
tepImgPosition(bar.offsetLeft,bar.offsetTop);
}
function tepImgPosition (left,top){
// 乘以他们的一个比值
tepImg.style.marginLeft = - left * ((800-250)/(350-100)) + "px";
tepImg.style.marginTop = - top * ((800-250)/(350-100))+ "px";
}
bar.onmouseout = demo.onmouseout = tepImg.onmousemove = function (){
bar.style.display = tep.style.display = "none";
return false;
}
}
</script>
</body>
</html>
