鼠标 停靠首先是把小图放大 定位如何实现？

鼠标 停靠首先是把小图放大http://cn.fotolia.com/search?k=car这个网站 的 鼠标停靠 图片变大鼠标 停靠首先是把小图放大 然后去加载大图 然后填充。谁能给一个demo 或者扒下来JS 求高手指点一二！

解决方案 »

  1.   

    写了个简单的DEMO，样式你自己改一下：
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"/>
    <title>Demo</title>
    <style type="text/css">
    body,ul,li{
    margin:0;
    padding:0;
    }
    #layer{
    position:absolute;
    border:1px solid #CCC;
    padding:10px;
    border-radius:5px;
    z-index:2;
    background:#FFF;
    display:none;
    }
    #test img{
    margin:20px;
    width:80px;
    }
    #test img:hover{
    cursor:pointer;
    }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
    </head>
    <body>
    <div id="test">
    <ul>
    <li><img src="http://csdnimg.cn/www/images/csdnindex_logo.gif" bigSrc="http://csdnimg.cn/www/images/csdnindex_logo.gif" alt=""/></li>
    <li><img src="http://csdnimg.cn/www/images/csdnindex_logo.gif" bigSrc="http://csdnimg.cn/www/images/csdnindex_logo.gif" alt=""/></li>
    <li><img src="http://csdnimg.cn/www/images/csdnindex_logo.gif" bigSrc="http://csdnimg.cn/www/images/csdnindex_logo.gif" alt=""/></li>
    </ul>
    </div>
    <div id="layer"><img id="bigImg" src="" alt=""/></div>
    <script>
    var imgs = document.getElementById("test").getElementsByTagName("img"),
    layer = document.getElementById("layer"),
    bigImg = document.getElementById("bigImg");
    for(var i=0,j=imgs.length;i<j;i++){
    imgs[i].onmousemove=function(e){
    e = e || window.event;
    var pageX=0,
    pageY=0;
    if(navigator.userAgent.match(/msie/i)){
    pageX = e.clientX + document.body.scrollLeft;
    pageY = e.clientY + document.body.scrollTop;
    } else {
    pageX = e.pageX;
    pageY = e.pageY;
    }
    layer.style.left = (pageX + 20 ) +"px";
    layer.style.top = (pageY + 20) + "px";
    layer.style.display="block";
    bigImg.src=this.getAttribute("bigSrc");
    }
    imgs[i].onmouseout=function(){
    layer.style.display="none";
    }
    }
    </script>
    </body>
    </html>