返回首页 我的新博客

javascript 特效集合

http://www.cnblogs.com/cloudgamer/

上面是一个前端特效博客

鼠标移动上去图片放大效果

<!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 id="Head1" runat="server">
    <title>JavaScript Test</title>
</head>

<script type="text/javascript">
//*******
//
鼠标移入显示大图片
//*******
function yiru(t){    
    var ei = document.getElementById("big_image");
    ei.style.display = "block";
 ei.innerHTML = '<img src="' + t.src + '" width="180px" height="180px" />';
 ei.style.top  =document.body.scrollTop+window.event.clientY+10+"px";
 ei.style.left =window.event.clientX+10+"px";
}

//*******
//
鼠标移出隐藏大图片
//*******
function yichu(){
    var ei = document.getElementById("big_image");
    ei.innerHTML = "";
 ei.style.display = "none";
}

</script>

<body>
    <form id="form1" runat="server">
    <div id="big_image" style="position: absolute; display: none; z-index: 2; border: 0px solid #f4f4f4;">
    </div>
    <div>
        <table>
            <tr>
                <td>
                    <img border="0" src="images/tupian.gif" width="100" height="80" onmousemove="yiru(this);" onmouseout="yichu(this);" />
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

 

posted @ 2011-03-03 16:16  buffer的blogs  阅读(226)  评论(0编辑  收藏  举报