会员投稿
投稿指南 
RSS订阅栏目导航
热点推荐
- 使用JS进行目录上传（相当于批量
- 推荐学习：精通JS正则表达式
- js创建对象的几种常用方式小结(
- jQuery技巧总结
- 10个JavaScript小技巧
- 非常全面的实用JavaScript开发工
- 网站统计之javascript代码加载优
- JS实现广告顺序轮播和随机轮播四
- 使用javascript让页面自适应
- 24小时退弹一次的代码，可弹SP2S
- (Tips&Tricks;)用客户端模板精简J
- js教程:JavaScript作用域(Scope)
阅览排行
原生JavaScript图片放大镜效果
www.jz123.cn 2012-05-16 来源: 站长家园 责任编辑(袁袁) 我要投递新闻
效果预览： http://www.seejs.com/enlarge/
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>JS另类放大镜</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>
上一篇：淘宝JavaScript 编码风格规范 下一篇：jQuery实现无限循环滚动公告