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>


     

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

    最终效果如图:

  • 相关阅读:
    七牛图片上传JSSDK
    2015年12月中国航空公司名录
    HTML5 开发框架
    利用HTML5定位功能,实现在百度地图上定位
    openerp7 时区问题
    AS3使用Json 传复杂数据 -------- 用数组而不是向量
    随便写写
    生产环境该如何选择lvs的工作模式,和哪一种算法
    获取Linux权限后安装rootkit
    IT求职经验分享
  • 原文地址:https://www.cnblogs.com/cyan/p/1271365.html
Copyright © 2011-2022 走看看