转载：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. 三期_day03_环境搭建和客户页面_I

    以下交代一下使用的框架 前端: EasyUI+Jquery+Ajax 后台: Spring+Structs2+mybatis 数据库: Oracle 使用工具: MyEclipse12+Maven 操 ...

  2. 1.3 Python基础知识 - 用户交互及传递参数

    一.用户交互 用户交互方面,每种开发语言都有不同的方式,例如shell语言用的是,“read -p "What is  your name ? " ”.python中是什么样子的呢 ...

  3. Altium Designer导入pcb原件之后都是绿的

  4. pdf.js安装步骤和使用

    从github下载的源码不能直接使用,最好使用命令行下载安装 1.下载源码 git clone git://github.com/mozilla/pdf.js.git cd pdf.js 2.安装no ...

  5. P2P借款的几种情况

    借款,至少出现2种人,借款人和出借人.根据人的性质,企业和个人,分成4种情况. 企业-个人,企业-企业,个人-企业,个人-个人. P2P平台可能出现几种情况: 个人-个人 2种情况:   a. 借款人 ...

  6. macos中xcode使用opencv，错误总结

    使用opencv时,进行编译时,会出现如上图所示错误,按图示更改就行了(我编译出来的有2处)主要参考 https://blog.csdn.net/fk1174/article/details/7011 ...

  7. python整除

    1.'/'除号与c不同,单个'/'是浮点除,两个除号'//'才是整除

  8. [Angular2 Form] Check password match

    Learn how to create a custom validator to check whether passwords match. <h1>password match< ...

  9. css3-10 如何控制元素的显示和隐藏（display和visibility的区别是什么）

    css3-10 如何控制元素的显示和隐藏(display和visibility的区别是什么) 一.总结 一句话总结:使用的时候直接在元素的样式中设置display和visibility属性即可.推荐使 ...

  10. js页面载入特效如何实现

    js页面载入特效如何实现 一.总结 一句话总结:可以加选择器(里面的字符串)作为参数,这样函数就可以针对不同选择器,就很棒了. 1.特效的原理是什么? 都是通过标签的位置和样式来实现特效的. 二.js ...