JavaScript另类图片放大镜的实现代码
发布时间：2015-02-21 编辑：jiaochengji.com
分享一例javascript实现的图片放大镜代码，说是有点另类的放大镜效果，具体有多另类，大家测试下便知，有需要的朋友参考下吧。
本节主要内容：
javascript图片放大镜效果
代码：
复制代码 代码示例:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>JS另类放大镜--www.jiaochengji.com</title>
<style>
ul,li{margin:0;padding:0;}
ul{list-style:none;}
.w960{
margin:0 auto;
width:960px;
border:1px solid #ccc;
border-right:none;
}
.pic-list{
width:960px;
overflow:hidden;
}
.pic-list .item{
float:left;
position:relative;
margin-left:-1px;
margin-bottom:-1px;
width:240px;
height:320px;
border-right:1px solid #ccc;
border-bottom:1px solid #ccc;
overflow:hidden;
}
.pic-list .item img{
position:absolute;
cursor:pointer;
}
</style>
</head>
<body>
<div class="w960">
<ul class="pic-list" id="pic-list">
<li class="item">
<img src="imgs/img_01.jpg" width="240" height="320">
</li>
<li class="item">
<img src="imgs/img_02.jpg" width="240" height="320">
</li>
<li class="item">
<img src="imgs/img_03.jpg" width="240" height="320">
</li>
<li class="item">
<img src="imgs/img_04.jpg" width="240" height="320">
</li>
<li class="item">
<img src="imgs/img_05.jpg" width="240" height="320">
</li>
<li class="item">
<img src="imgs/img_06.jpg" width="240" height="320">
</li>
<li class="item">
<img src="imgs/img_07.jpg" width="240" height="320">
</li>
<li class="item">
<img src="imgs/img_08.jpg" width="240" height="320">
</li>
</ul>
</div>
<script>
(function(){
var d = document.getElementById("pic-list"),
c = d.getElementsByTagName("li"),
l = c.length,
scale = 2;
function stopEvent(e){
if(e && e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble = true;
}
}
for(var i = 0; i < l; i++){
c[i].left = c[i].getBoundingClientRect().left;
c[i].top = c[i].getBoundingClientRect().top;
(function(i){
c[i].onmouseover = function(e){
var e = e || window.event;
var img = this.getElementsByTagName("img")[0];
img.style.width = img.offsetWidth * scale + "px";
img.style.height = img.offsetHeight * scale + "px";
img.style.left = (this.offsetWidth - img.offsetWidth) / 2 + "px";
img.style.top = (this.offsetHeight - img.offsetHeight) / 2 + "px";
this.dsx = Math.abs(parseInt(img.style.left));
this.dsy = Math.abs(parseInt(img.style.top));
this.cdx = this.offsetWidth / 2;
this.cdy = this.offsetHeight / 2;
this.left = (this.offsetWidth - img.offsetWidth) / 2
this.top = (this.offsetHeight - img.offsetHeight) / 2
stopEvent(e);
};
c[i].onmouseout = function(e){
var e = e || window.event;
var img = this.getElementsByTagName("img")[0];
img.style.width = img.offsetWidth / scale + "px";
img.style.height = img.offsetHeight / scale + "px";
img.style.left = Math.floor((this.offsetWidth - img.offsetWidth) / 2) + "px";
img.style.top = Math.floor((this.offsetHeight - img.offsetHeight) / 2) + "px";
stopEvent(e);
};
c[i].onmousemove = function(e){
var e = e || window.event;
var img = this.getElementsByTagName("img")[0];
var center = {"x":this.getBoundingClientRect().left + this.offsetWidth / 2,"y":this.getBoundingClientRect().top + this.offsetHeight / 2};
var mPos = {"x":e.clientX,"y":e.clientY};
var deltax = center.x - mPos.x,deltay = center.y - mPos.y;
var dleft = deltax / this.cdx * this.dsx;
var dtop = deltay / this.cdy * this.dsy;
img.style.left = Math.floor(this.left + dleft) + "px";
img.style.top = Math.floor(this.top + dtop) + "px";
stopEvent(e);
}
})(i);
}
})();
</script>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>JS另类放大镜--www.jiaochengji.com</title>
<style>
ul,li{margin:0;padding:0;}
ul{list-style:none;}
.w960{
margin:0 auto;
width:960px;
border:1px solid #ccc;
border-right:none;
}
.pic-list{
width:960px;
overflow:hidden;
}
.pic-list .item{
float:left;
position:relative;
margin-left:-1px;
margin-bottom:-1px;
width:240px;
height:320px;
border-right:1px solid #ccc;
border-bottom:1px solid #ccc;
overflow:hidden;
}
.pic-list .item img{
position:absolute;
cursor:pointer;
}
</style>
</head>
<body>
<div class="w960">
<ul class="pic-list" id="pic-list">
<li class="item">
<img src="imgs/img_01.jpg" width="240" height="320">
</li>
<li class="item">
<img src="imgs/img_02.jpg" width="240" height="320">
</li>
<li class="item">
<img src="imgs/img_03.jpg" width="240" height="320">
</li>
<li class="item">
<img src="imgs/img_04.jpg" width="240" height="320">
</li>
<li class="item">
<img src="imgs/img_05.jpg" width="240" height="320">
</li>
<li class="item">
<img src="imgs/img_06.jpg" width="240" height="320">
</li>
<li class="item">
<img src="imgs/img_07.jpg" width="240" height="320">
</li>
<li class="item">
<img src="imgs/img_08.jpg" width="240" height="320">
</li>
</ul>
</div>
<script>
(function(){
var d = document.getElementById("pic-list"),
c = d.getElementsByTagName("li"),
l = c.length,
scale = 2;
function stopEvent(e){
if(e && e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble = true;
}
}
for(var i = 0; i < l; i++){
c[i].left = c[i].getBoundingClientRect().left;
c[i].top = c[i].getBoundingClientRect().top;
(function(i){
c[i].onmouseover = function(e){
var e = e || window.event;
var img = this.getElementsByTagName("img")[0];
img.style.width = img.offsetWidth * scale + "px";
img.style.height = img.offsetHeight * scale + "px";
img.style.left = (this.offsetWidth - img.offsetWidth) / 2 + "px";
img.style.top = (this.offsetHeight - img.offsetHeight) / 2 + "px";
this.dsx = Math.abs(parseInt(img.style.left));
this.dsy = Math.abs(parseInt(img.style.top));
this.cdx = this.offsetWidth / 2;
this.cdy = this.offsetHeight / 2;
this.left = (this.offsetWidth - img.offsetWidth) / 2
this.top = (this.offsetHeight - img.offsetHeight) / 2
stopEvent(e);
};
c[i].onmouseout = function(e){
var e = e || window.event;
var img = this.getElementsByTagName("img")[0];
img.style.width = img.offsetWidth / scale + "px";
img.style.height = img.offsetHeight / scale + "px";
img.style.left = Math.floor((this.offsetWidth - img.offsetWidth) / 2) + "px";
img.style.top = Math.floor((this.offsetHeight - img.offsetHeight) / 2) + "px";
stopEvent(e);
};
c[i].onmousemove = function(e){
var e = e || window.event;
var img = this.getElementsByTagName("img")[0];
var center = {"x":this.getBoundingClientRect().left + this.offsetWidth / 2,"y":this.getBoundingClientRect().top + this.offsetHeight / 2};
var mPos = {"x":e.clientX,"y":e.clientY};
var deltax = center.x - mPos.x,deltay = center.y - mPos.y;
var dleft = deltax / this.cdx * this.dsx;
var dtop = deltay / this.cdy * this.dsy;
img.style.left = Math.floor(this.left + dleft) + "px";
img.style.top = Math.floor(this.top + dtop) + "px";
stopEvent(e);
}
})(i);
}
})();
</script>
</body>
</html>
您可能感兴趣的文章：
jQuery图片放大镜插件 magnifier
Javascript图片放大镜的实例分析
什么是canvas离屏技术？canvas放大镜效果如何实现？
canvas离屏技术与放大镜实现代码示例
JavaScript图片放大镜的简单代码
jQuery 图片放大镜效果插件jQZoom的用法举例
js放大镜效果一例
JavaScript另类图片放大镜的实现代码
Canvas实现放大镜效果
javascript 实现图片放大缩小代码
[关闭]