鼠标滑过缩略图显示大图

技术文章

鼠标滑过缩略图显示大图

时间：2009-04-03 点击：2226

<!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=gb2312" />
<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="http://www.it214.net/picture/133/01.jpg">
    </div>
    
    <div class="demo">
        <img src="http://www.it214.net/picture/133/02.jpg">
    </div>
    
    <div class="demo">
        <img src="http://www.it214.net/picture/133/03.jpg">
    </div>
    
    <div class="demo">
        <img src="http://www.it214.net/picture/133/04.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>

简体繁体转换

点击按钮,在桌面生成网址快捷方式

右下角提示窗口

动态给已知ID的控件中的控件赋值

获取input文本框的上下td对象

> 返回

地址：上海市普陀区胶州路941号长久商务中心电话： QQ：