zoukankan      html  css  js  c++  java
  • 鼠标放在图片上面显示图片放大效果 (转)

     

    <%@ 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; 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; 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; 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>

    每天进步一点点...
  • 相关阅读:
    单例模式
    堆排序--leetcode 215
    二叉树--路径问题
    二叉树--前中后序两两结合构建二叉树
    CglibProxy
    JdkProxy
    git config --global http.sslVerify false
    PdfUtil
    idea中创建的文件类型无法识别
    sql优化
  • 原文地址:https://www.cnblogs.com/aaa6818162/p/1502937.html
Copyright © 2011-2022 走看看