转载：http://www.cnblogs.com/jack86514/archive/2009/04/01/1427584.html

当我们在写一个网页程序的时候，很多方法可以提供页面的动态显示，从而提高页面的视觉效果。 本例就是通过一个简单的Javascript代码动态显示图片的信息的，其实这样的例子很多，所以这里只做简单的说明了。

现在就创建一个页面，代码如下所示：

 <html>

<head>

 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

 <title>JS函数实现鼠标指向后带图片的提示效果</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 width=200 height=200 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="100_0899.JPG" width=50 height=50 onmouseout="hiddenPic();"

 onmousemove="showPic(this.src);" />

 <p></p>

 <img src="100_0909.JPG" width=50 height=50 onmouseout="hiddenPic();"

 onmousemove="showPic(this.src);" />

 </body>

</html>

JavaScript函数实现鼠标指向后带图片的提示效果的更多相关文章

  1. HTML5鼠标hover的时候图片放大的效果展示

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  2. 关于原生js中ie的attacheEvent事件用匿名函数改变this指向后,不能用detachEvent删除绑定事件的解决办法？

    博客搬迁,给你带来的不便,敬请谅解! http://www.suanliutudousi.com/2017/11/28/%e5%85%b3%e4%ba%8e%e5%8e%9f%e7%94%9fjs%e ...

  3. CSS3特效----图片动态提示效果

    需掌握的知识点: 1.掌握两个HTML5新标签figure以及figcaption的用法 2.掌握transform的属性特点,并能熟练运用 3.学会通过transition及transform配合, ...

  4. EazyUI_Datagrid_行内编辑(editor)的combobox下拉框带图片

    1.业务需求: 商品的明细列表里面下拉框需要 [图片+文字 ] 显示 2.我们使用的是EazyUI,而我比较懒,不习惯用拼接html来显示列表页面,使用的是eazyui的数据网格(datagrid) ...

  5. 【Android代码片段之六】Toast工具类（实现带图片的Toast消息提示）

    转载请注明出处,原文网址:http://blog.csdn.net/m_changgong/article/details/6841266  作者:张燕广 实现的Toast工具类ToastUtil封装 ...

  6. Android开发系列（二十三）：实现带图片提示的Toast提示信息框

    Android中的Toast是非经常见的一个消息提示框.可是默认的消息提示框就是一行纯文本.所以我们能够为它设置一些其它的诸如是带上图片的消息提示. 实现这个非常easy: 就是定义一个Layout视 ...

  7. 如何在HTML中实现图片的滚动效果

    <MARQUEE onmouseover=stop() onmouseout=start() scrollAmount=3 loop=infinite deplay="0"& ...

  8. js中new函数后带括号和不带括号的区别

    用new创建构造函数的实例时,通常情况下new 的构造函数后面需要带括号(譬如:new Parent()). 有些情况下new的构造函数后带括号和不带括号的情况一致,譬如: function Pare ...

  9. JavaScript中函数的this指向!

    JavaScript的this的指向问题! 这是我自己敲的, 报错! <button>点击查看绑定事件的this指向!</button> <script> // 函 ...

随机推荐

  1. Python 极简教程（二）编码工具

    Python 的编码工具很多.目前最流行的是 pycharm,关于 pycharm 的安装使用请参考 PyCharm安装使用教程. 而学习过程中,我觉得最好用的,还是 Python 自带的练习工具 I ...

  2. GO语言学习（六）Go 语言数据类型

    在 Go 编程语言中,数据类型用于声明函数和变量. 数据类型的出现是为了把数据分成所需内存大小不同的数据,编程的时候需要用大数据的时候才需要申请大内存,就可以充分利用内存. Go 语言按类别有以下几种 ...

  3. Java Scheduler ScheduledExecutorService ScheduledThreadPoolExecutor Example（ScheduledThreadPoolExecutor例子——了解如何创建一个周期任务）

    Welcome to the Java Scheduler Example. Today we will look into ScheduledExecutorService and it's imp ...

  4. Maven报错Missing artifact jdk.tools:jdk.tools:jar:1.7--转

    原文地址:http://blog.csdn.net/u013281331/article/details/40824707 在Eclipse中检出Maven工程,一直报这个错:“Missing art ...

  5. UVA 11489 - Integer Game 博弈

    看题传送门 题目大意: S和T在玩游戏,S先.给出一数字串,两人轮流取出一个数字,要求每次取完之后剩下的数为3的倍数,或者没有数字留下.如果两个人足够聪明,求胜利的一方. 思路: 我一开始竟然没有输C ...

  6. ORA-00119: invalid specification for system parameter LOCAL_LISTENER；

    错误提示内容及上下文环境: SQL> grant sysdba to weng;grant sysdba to weng*第 1 行出现错误:ORA-01034: ORACLE not avai ...

  7. 自定义 matplotlib 设置

    Customizing plots with style sheets import matplotlib as mpl 查看配置文件所在的目录:mpl.get_configdir() 1. 自定义 ...

  8. Envelope

    IEnvelope Interface Provides access to methods and properties of envelopes. Note: the IEnvelope inte ...

  9. POJ 题目2506Tiling（大数）

    Tiling Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 8128   Accepted: 3941 Descriptio ...

  10. 安装使用jupyter（原来的notebook）

    1.安装pyzmq 使用pip install pyzmq,安装不成功. 使用easy_install.exe pyzmq.成功安装. 2.安装tornado pip tornado 安装完尚不成功. ...