zoukankan      html  css  js  c++  java
  • 鼠标悬停出现图片提示的代码

    代码简介:

    鼠标放到图片后,会出现悬停提示,悬停提示内可以是图片,从代码实现思路上来说,本代码很有创意,代码很精简,如果原图你强制变为小图的话,那么当鼠标放上去以后,会放大出大图,实际上加载的是同一张图片,因此这决定了这款代码在加载速度上有些影响。

    代码内容:

    View Code
    <html> 
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>鼠标悬停出现图片提示的代码 - www.webdm.cn</title>
    <script language="javascript">
    function showPic(sUrl){
    var x,y;
    x
    = event.clientX;
    y
    = event.clientY;
    document.getElementById(
    "Layer1").style.left = x;
    document.getElementById(
    "Layer1").style.top = y;
    document.getElementById(
    "Layer1").innerHTML = "<img src=\"" + sUrl + "\">";
    document.getElementById(
    "Layer1").style.display = "block";
    }
    function hiddenPic(){
    document.getElementById(
    "Layer1").innerHTML = "";
    document.getElementById(
    "Layer1").style.display = "none";
    }
    </script>
    </head>

    <body>
    <div id="Layer1" style="display:none;position:absolute;z-index:1;"></div>
    <img src="http://www.webdm.cn/themes/pic/webdm_logo.gif" width="100" height="36" onmouseout="hiddenPic();"

    onmousemove
    ="showPic(this.src);" />
    <p></p>
    </body>
    </html>
    <br />
    <p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码!</p>

    代码来自:http://www.webdm.cn/webcode/0e141080-3af5-4a57-95d9-9b71694d1e4e.html

  • 相关阅读:
    数值分析实验之数值积分法(java 代码)
    Python 数据处理
    Python 网络爬虫
    数据库系统开发——旅游公司机票查询及预订系统
    Python词云生成
    Python库的安装与查看
    Python词频统计
    Python程序设计训练
    Python编程基础训练
    如何在同一Linux服务器上创建多站点
  • 原文地址:https://www.cnblogs.com/webdm/p/2294370.html
Copyright © 2011-2022 走看看