<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;border:5px solid #f4f4f4}
</style>
<div id="demo" style="overflow:hidden;width:120px;text-align:center;padding:10px">
<img src="http://www.makewing.com/images/uppic/200801101244190.jpg">
</div>
<div id="enlarge_images"> </div>
<script>
var demo = document.getElementById("demo");
var gg = demo.getElementsByTagName("img");
var ei = document.getElementById("enlarge_images");
for(i=0; i <gg.length; i++){
var ts = gg[i];
ts.onmousemove = function(event){
event = event || window.event;
ei.style.display = "block";
ei.innerHTML = ' <img src="' + this.src + '" />';
ei.style.top = document.body.scrollTop + event.clientY + 10 + "px";
ei.style.left = document.body.scrollLeft + event.clientX + 10 + "px";
}
ts.onmouseout = function(){
ei.innerHTML = "";
ei.style.display = "none";
}
ts.onclick = function(){
window.open( this.src );
}
}
</script>
/
<!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>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
