两种方法 实则原理相同,只是图片的保存形式不一样。小图大图成比例,大图大小设为小图的4倍。图片自己去找哦
一、大图直接放在div当中
<!doctype html>
<html>
<head>
<title>放大镜</title>
<meta charset="utf-8"/>
<link href="css/magnifier.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="js/magnifier.js"></script>
<style>
*{
margin:0px;
padding:0px;
}
#small-box{
position:relative;
border:1px solid #ccc;
display: block;
width: 500px;
height: 500px;
margin: 50px;
}
#float-box{
display: none;
width: 160px;
height: 120px;
position: absolute;
background: #ffffcc;
border: 1px solid #ccc;
filter: alpha(opacity=50);
opacity: 0.5;
}
#big-box {
display: none;
position:absolute;
top:50px;
z-index:1;
left: 1000px;
width: 500px;
height: 500px;
overflow: hidden;
border: 1px solid #ccc;
}
#big-box img{
position:absolute;
}
</style>
</head>
<body>
<div id="small-box">
<div id="float-box"></div>
<img title="small img" src="img/2.jpg">
</div>
<div id="big-box">
<img title="bigger img" src="img/3.jpg">
</div>
</body>
</html>
<script>
window.onload = function () {
// 获取所需要操作的对象
var smallBox = document.getElementById("small-box");
var floatBox = document.getElementById("float-box");
var bigBox = document.getElementById("big-box");
var bigImage = bigBox.getElementsByTagName("img")[0];
// 鼠标移动到对象上显示放大镜和放大镜放大后的图像
smallBox.onmouseover = function(){
floatBox.style.display = "block";
bigBox.style.display = "block";
}
// 鼠标移出对象时隐藏放大镜和放大镜放大后的图像
smallBox.onmouseout = function(){
floatBox.style.display = "none";
bigBox.style.display = "none";
}
// 鼠标在对象上移动触发的事件
smallBox.onmousemove = function(e){
var event = e || window.event;
var left = event.clientX - smallBox.offsetLeft - floatBox.offsetWidth/2;
var top = event.clientY - smallBox.offsetTop - floatBox.offsetHeight/2;
if(left < 0) {
left = 0;
} else if (left > (smallBox.offsetWidth - floatBox.offsetWidth)) {
left = smallBox.offsetWidth - floatBox.offsetWidth;
}
if (top < 0) {
top = 0;
} else if (top > (smallBox.offsetHeight - floatBox.offsetHeight)) {
top = smallBox.offsetHeight - floatBox.offsetHeight;
}
// 设置放大镜移动的距离
floatBox.style.left = left + "px";
floatBox.style.top = top + "px";
// 根据比例计算放大镜放大后的图像移动的位移(负数)
bigImage.style.marginLeft = -(left * bigImage.offsetWidth)/smallBox.offsetWidth + "px";
bigImage.style.marginTop = -(top * bigImage.offsetHeight)/smallBox.offsetHeight + "px";
}
}
</script>
</body>
</html>
二、大图设为div的背景
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style>
#dt{
position:relative;
width:500px;
height:500px;
}
#fdj{
background:#fff;
width:125px;
height:125px;
position:absolute;
top:0;
opacity:0.5;
filter:alpha(opacity=50);
display:none;
}
#dd{
display:none;
width:500px;
height:500px;
position:absolute;
left:600px;
top:0;
overflow:hidden;
background:url("img/3.jpg")
}
</style>
</head>
<body>
<div id="dt">
<img src="img/2.jpg">
<span id="fdj"></span>
</div>
<div id="dd">
</div>
<script>
var dt = document.getElementById("dt"); //这是原图盒子;
var dd = document.getElementById("dd"); //这是要放大盒子
var ddc=dd.children[0];
var fdj = document.getElementById("fdj"); //这是放大镜盒子
dt.onmouseover = function () {
dd.style.display = "block";
fdj.style.display = "block";
}
dt.onmouseout = function () {
dd.style.display = "none";
fdj.style.display = "none";
}
dt.onmousemove = function (e) {
var e=e||window.event;
var left = e.clientX -dt.offsetLeft- fdj.offsetWidth/2;
var top = e.clientY-dt.offsetTop- fdj.offsetHeight/2;
if (left < 0) {
left = 0;
}else if (left > dt.offsetWidth - fdj.offsetWidth) {
left = dt.offsetWidth - fdj.offsetWidth;
}
if (top < 0) {
top = 0;
}else if (top > dt.offsetHeight - fdj.offsetHeight){
top = dt.offsetHeight - fdj.offsetHeight;
}
fdj.style.left = left + "px";
fdj.style.top = top + "px";
dd.style.backgroundPositionX=(-4*left)+"px";
dd.style.backgroundPositionY=(-4*top)+"px";
}
</script>
</body>
</html>