[javascript]随鼠标显示大图 

<html>
<head>
<title></title>
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
<style type = "text/css">
    #demo img
    {
        width:90px;height:90px;
        border:5px solid #f4f4f4;
    }
    #enlarge_img
    {
        position:absolute;
        display:none;
        z-index:999;
        border:5px solid #f4f4f4;
    }
</style>
</head>

<body>
<div id = "demo">
    <img src = "1.jpg" /><img src = "2.jpg" /><img src = "4.jpg" />
</div>
<div id = "enlarge_img"></div>
<script type = "text/javascript">
    var demo = document.getElementById("demo");
    var gg = demo.getElementsByTagName("img");
    var ei = document.getElementById("enlarge_img");
    for(i = 0;i < gg.length;i++)
    {
        var ts = gg[i];
        ts.onmouseover = 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>                                                                                                                                                                                                                                                                                          
</body>
</html>

 

posted @ 2013-03-18 13:24  Myths  阅读(216)  评论(0)    收藏  举报