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

最新推荐文章于 2024-01-27 20:29:14 发布

helloxielan

最新推荐文章于 2024-01-27 20:29:14 发布

阅读量635

点赞数

文章标签：游戏 xhtml c#

<%@ 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 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" οnmοuseοver="show(this)" οnmοuseοut="hide(this)"/>
        </div>
        <div align="center" style="overfow: hidden; width: 100px; height: 100px">
            <img src="img/3.jpg" width="100" height="100" border="0" οnmοuseοver="show(this)" οnmοuseοut="hide(this)"/>
        </div>
        <div align="center" style="overfow: hidden; width: 100px; height: 100px">
            <img src="img/5.jpg" width="100" height="100" border="0" οnmοuseοver="show(this)" οnmοuseοut="hide(this)"/>
        </div>
        <div id="enlarge_images" style="position: absolute; z-index:2"></div>
    </form>
</body>
</html>

每天进步一点点...

helloxielan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
鼠标放在图片上面显示图片放大效果（转）

&lt;%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default5.aspx.cs" Inherits="Default5" %&gt;&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3
复制链接

扫一扫