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 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>


     

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

    最终效果如图:

  • 相关阅读:
    Navicat Premium15安装与激活
    JDK13.0.1安装与环境变量的配置(Win10平台为例)
    Linux系统手动安装Firefox浏览器
    Debian 9.5 解决中文显示乱码
    debian 安装后需做的几件事
    Windows10 Linux子系统安装图形化界面的两种方法及其对比
    线程池大小设置,CPU的核心数、线程数的关系和区别,同步与堵塞完全是两码事
    Java学习笔记八(反射)
    高速排序法(一)
    Java深入
  • 原文地址:https://www.cnblogs.com/cyan/p/1271365.html
Copyright © 2011-2022 走看看