<body onload="init()">
<div id="snapDiv">
<img src="Lighthouse.jpg" />
<span id="zoomSpan" style="display: none;"></span>
<div id="mask" class="show"></div>
</div>
<div style="display: none;" id="viewDiv">
<img id="bigImg" src="Lighthouse.jpg" />
</div>
</body>
#snapDiv { width:300px; height:300px; position:relative; margin:30px;}
#snapDiv img{width:300px;/* height:300px;*/}
#snapDiv span {
width:100px; height:100px;
background:#f00;
left:0px;top:0px;
position:absolute;
display:none;
filter:alpha(opacity:20); opacity:0.2;
}
.show {
width:100%;
height:100%;
position:absolute;
z-index:10;
cursor:move;
left:0px; top:0px;
filter:alpha(opacity:1);
opacity:0.01;
/*IE 下必须添加background属性或者 border属性，否则不会触发onmouseover事件*/
background-color:#fff;
}
#viewDiv {
width:300px; height:300px;
border:1px solid #000;
top:10px;right:10px;
position:absolute; display:none; overflow:hidden;}
#viewDiv img { position:absolute;}
function init() {
var oDiv = document.getElementById('snapDiv');
var oShow = document.getElementById('mask');
var oSpan = document.getElementById('zoomSpan');
var oImg = document.getElementById('bigImg');
var snapPic = oDiv.getElementsByTagName('img')[0];
var viewDiv = document.getElementById('viewDiv');
/*重新计算遮盖层长宽*/
oShow.style.width = snapPic.width + 'px';
oShow.style.height = snapPic.height + 'px';
oShow.onmouseover = function() {
oSpan.style.display = 'block';
viewDiv.style.display = 'block';
/* 重新定义长宽，可以确保视图里面放大的区域是一致的。
* 如果oSpan的长宽一致，则viewDiv的长宽也一致。即viewDiv.style.width = viewDiv.style.height*/
viewDiv.style.width = oSpan.offsetWidth*oImg.offsetWidth/snapPic.width + 'px';
viewDiv.style.height = oSpan.offsetHeight*oImg.offsetHeight/snapPic.height + 'px';
};
oShow.onmouseout = function() {
oSpan.style.display = 'none';
viewDiv.style.display = 'none';
};
oShow.onmousemove = function(ev) {
var oEvent = ev || event;
var x = oEvent.clientX - oDiv.offsetLeft - oSpan.offsetWidth / 2;
var y = oEvent.clientY - oDiv.offsetTop - oSpan.offsetHeight / 2;
if (x < 0) {
x = 0;
} else if (x > oShow.offsetWidth - oSpan.offsetWidth) {
x = oShow.offsetWidth - oSpan.offsetWidth;
}
if (y < 0) {
y = 0;
} else if (y > oShow.offsetHeight - oSpan.offsetHeight) {
y = oShow.offsetHeight - oSpan.offsetHeight;
}
oSpan.style.left = x + 'px';
oSpan.style.top = y + 'px';
var percentX = x / (oShow.offsetWidth - oSpan.offsetWidth);
var percentY = y / (oShow.offsetHeight - oSpan.offsetHeight);
oImg.style.left = -percentX
* (oImg.offsetWidth - viewDiv.offsetWidth) + 'px';
oImg.style.top = -percentY
* (oImg.offsetHeight - viewDiv.offsetHeight) + 'px';
};
}
分享到：
相关推荐
使用react写一个仿图片放大镜效果使用react写一个仿图片放大镜效果
简单实用jQuery图片放大镜效果
使用c#编写winform窗体图片放大镜功能，该实例中图片可以随意放大倍数
类似淘宝店图片放大镜的例子，通过jquery编写，值得学习。
使用jquer实现类似于淘宝上的图片放大镜效果
图片放大镜效果源代码图片放大镜效果源代码图片放大镜效果源代码图片放大镜效果源代码图片放大镜效果源代码图片放大镜效果源代码
图片放大镜效果，可以把鼠标放在图片上滑动鼠标齿轮就可以将图片放大相应的倍数，效果很绚丽。
jquery 实现图片放大镜效果，本资源的特点是有详细的中文注释，初学这很容易看明白。
精美的图片放大镜代码，简介，将js css 还有img 复制粘贴到 自己的web项目目录 然后将放大镜页面代码 插入自己的页面即可使用。
jQuery对比图片放大镜查看代码，可以放大1.2.3倍放大效果
JS图片放大镜效果JS图片放大镜效果JS图片放大镜效果JS图片放大镜效果JS图片放大镜效果
主要整合了 jQeury的图片放大镜插件实现
类似淘宝图片放大镜 图片的缩放 图片的缩放
Javascript脚本实现的网页图片放大镜效果。
jquery实现图片放大镜效果
网页图片放大镜,放大区域淡出淡入 纯净代码 兼容IE6以及其他版本，火狐，360
jQuery图片放大镜效果
图片放大镜源文件Magnifier.java
delphi7图片放大镜