您的位置：首页 > Web前端 > JavaScript

Javascript 鼠标滑过显示大图的效果

2011-04-13 17:15 323 查看

最近做一个网站，什么资料素材都没有~。所以前台设计和效果都要一人包办。这几天做了几个效果，其中就有鼠标滑过图片显示大图的一个效果。虽然网上有很多这样的案例，但是还是决定把这个效果作为博文发表出来。会做的，大家路过看一下，不会的可以参考参考。

View Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>图片效果</title>
</head>
<style>
.demo{overflow:hidden;width:120px;text-align:center;padding:10px;}
.demo img{border:none;width:100px;height:100px;border:5px solid #f4f4f4}
#enlarge_images{position:absolute;display:none;z-index:2;}
#enlarge_images img{border:5px solid #f4f4f4;}
</style>
<body>
<div id="enlarge_images"><img src=""></div>
<div id="box">
<div class="demo">
<img src="images/2.jpg">
</div>

<div class="demo">
<img src="images/5.jpg">
</div>

<div class="demo">
<img src="images/1.jpg">
</div>

<div class="demo">
<img src="images/3.jpg">
</div>
</div>

<script>
var maxsize=400;//图片最大尺寸
var obj = document.getElementById("box").getElementsByTagName("img"),j=obj.length;
var bigpic = document.getElementById("enlarge_images");
for(i=0; i<j; i++){
obj[i].onmousemove = function(){
/*调整图片尺寸start*/
var thisimg=new Image()
thisimg.src=this.src
var r=thisimg.width/thisimg.height
if (r>=1){w=maxsize;h=maxsize/r;}
else{w=maxsize*r;h=maxsize}
bigpic.getElementsByTagName("img")[0].style.width= w+"px";
bigpic.getElementsByTagName("img")[0].style.height= h+"px";
/*调整图片尺寸end*/
bigpic.style.display ="block";
bigpic.style.left =this.offsetWidth +30+"px";
bigpic.style.top = document.body.scrollTop + (event|| window.event).clientY -10+"px";
bigpic.getElementsByTagName("img")[0].src=this.src;
}
obj[i].onmouseout = function(){
bigpic.style.display ="none";
bigpic.getElementsByTagName("img")[0].src="";
}
obj[i].onclick = function(){
window.open( this.src);
}
}
</script>
</body>
</html>

上面的一种方法并不是很好，所以我采用JQuery，解决这个问题。

JQuery效果

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航