JavaScript函数实现鼠标指向后带图片的提示效果
转载: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函数实现鼠标指向后带图片的提示效果的更多相关文章
- HTML5鼠标hover的时候图片放大的效果展示
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 关于原生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 ...
- CSS3特效----图片动态提示效果
需掌握的知识点: 1.掌握两个HTML5新标签figure以及figcaption的用法 2.掌握transform的属性特点,并能熟练运用 3.学会通过transition及transform配合, ...
- EazyUI_Datagrid_行内编辑(editor)的combobox下拉框带图片
1.业务需求: 商品的明细列表里面下拉框需要 [图片+文字 ] 显示 2.我们使用的是EazyUI,而我比较懒,不习惯用拼接html来显示列表页面,使用的是eazyui的数据网格(datagrid) ...
- 【Android代码片段之六】Toast工具类(实现带图片的Toast消息提示)
转载请注明出处,原文网址:http://blog.csdn.net/m_changgong/article/details/6841266 作者:张燕广 实现的Toast工具类ToastUtil封装 ...
- Android开发系列(二十三):实现带图片提示的Toast提示信息框
Android中的Toast是非经常见的一个消息提示框.可是默认的消息提示框就是一行纯文本.所以我们能够为它设置一些其它的诸如是带上图片的消息提示. 实现这个非常easy: 就是定义一个Layout视 ...
- 如何在HTML中实现图片的滚动效果
<MARQUEE onmouseover=stop() onmouseout=start() scrollAmount=3 loop=infinite deplay="0"& ...
- js中new函数后带括号和不带括号的区别
用new创建构造函数的实例时,通常情况下new 的构造函数后面需要带括号(譬如:new Parent()). 有些情况下new的构造函数后带括号和不带括号的情况一致,譬如: function Pare ...
- JavaScript中函数的this指向!
JavaScript的this的指向问题! 这是我自己敲的, 报错! <button>点击查看绑定事件的this指向!</button> <script> // 函 ...
随机推荐
- Dcloud课程3 什么是HBuilder和MUI
Dcloud课程3 什么是HBuilder和MUI 一.总结 一句话总结:DCloud(数字天堂)推出一款支持HTML5的Web开发IDE.最大的特点是快.MUI是高性能App的框架,也是目前最接近 ...
- Dcloud课程2 什么是Dcloud
Dcloud课程2 什么是Dcloud 一.总结 一句话总结:DCloud提供了一套快速开发应用的跨平台技术方案. 1.DCloud的产品架构? MUI+(H5+)+HBuilder 2.什么是MU ...
- Nginx 设置,设置已经解析的域名,在nginx中没有定义相应server时的默认访问
https://blog.csdn.net/m_nanle_xiaobudiu/article/details/80785027
- BI并不是万能,中层业务管理报表要另辟蹊径
BI是商业智能的缩写,是能够帮助企业做出明智的业务经营决策的工具.其数据来源于各个业务系统.如ERP.CRM.SCM.进销存.HER.OA等. BI系统不同于传统的管理信息 ...
- iOS ASIHTTPRequest
ASIHTTPRequest对CFNetwork API进行了封装,并且使用起来非常简单,用Objective-C编写,可以很好的应用在Mac OS X系统和iOS平台的应用程序中.ASIHTTPRe ...
- [Maven实战](6)仓库(本地仓库,远程仓库,镜像)
1. 简单介绍 maven能够在某个位置统一存储全部maven项目共享的构件,这个统一的位置就是仓库.实际的Maven项目将不会各自存储其依赖文件,它们仅仅须要声明这些依赖的坐标,在须要的时候(比如. ...
- Linux上制作Window启动盘
Linux上制作Window启动盘 注意: U盘在Linux中的标签(依具体情况而定:执行df查看) U盘 ----- /dev/sdb4 格式化U盘 建立U盘的启动分区 安装关键工具 ms-sys ...
- 【跟我一起学Unity3D】代码中分割图片而且载入帧序列动画
在Cocos2dx中.对大图的处理已经封装好了一套自己的API,可是在Unity3D中貌似没有类似的API(好吧,实际上是有的,并且功能更强大),或者说我没找到. 只是这也在情理之中,毕竟Unity3 ...
- 我的前端规范——JavaScript篇
相关文章 简书原文:https://www.jianshu.com/p/5918c283cdc3 我的前端规范——开篇:http://www.cnblogs.com/shcrk/p/9271561.h ...
- Java fork join ForkJoinPool 用法例子
本例是把一个大的数组求和的计算的大任务分解到在小范围内求和的小任务,然后把这些小任务之和加起来就是所求之结果. 技术:JDK8.0, Javafork-join模式下的RecursiveTask技术, ...