鼠标放在图片上面显示图片放大效果

 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default5.aspx.cs" Inherits="Default5" %>

 

<!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>测试</title>

</head>

<body>

<script type="text/javascript">

    function show(_this) {

        document.getElementById("enlarge_images").innerHTML = "<img src='" + _this.src + "' >";

    }

    function hide(_this) {

        document.getElementById("enlarge_images").innerHTML = "";

    }

    function move_layer(event) {

        event = event || window.event;

        enlarge_images.style.left = event.clientX + document.body.scrollLeft + 10;

        enlarge_images.style.top = event.clientY + document.body.scrollTop + 10;

    }

    document.onmousemove = move_layer;

</script>

 

 

    <form id="form1" runat="server">

        <div align="center" style="overfow: hidden; width: 100px; height: 100px">

            <img src="img/2.jpg" width="100" height="100" border="0" onmouseover="show(this)" onmouseout="hide(this)"/>

        </div>

        <div align="center" style="overfow: hidden; width: 100px; height: 100px">

            <img src="img/3.jpg" width="100" height="100" border="0" onmouseover="show(this)" onmouseout="hide(this)"/>

        </div>

        <div align="center" style="overfow: hidden; width: 100px; height: 100px">

            <img src="img/5.jpg" width="100" height="100" border="0" onmouseover="show(this)" onmouseout="hide(this)"/>

        </div>

        <div id="enlarge_images" style="position: absolute; z-index:2"></div>

    </form>

</body>

</html>


 

请自己替换掉代码中的图片链接地址

最终效果如图：

posted @ 2008-08-19 16:32  亦心  阅读(3114)  评论(3)    收藏  举报