javascript 鼠标悬浮图片显示原图 移出鼠标后原图消失(多图)


Posted in Javascript onDecember 28, 2009

具体用法是这样的:
将Javascript代码放到</body>前(将脚本代码放在页面底端有助于提高页面速度,但是我现在还没有切身的体会)

<script language=JavaScript> 
function mouseOutPic()    //当鼠标移出时,隐藏原图 
{ 
if(window.event.toElement.id!="img000") bigPic.style.visibility = "hidden"; 
//如果鼠标不在img000上的话,将这个区域隐藏 
} 
function mouseOverPic(imgSrc)    //当鼠标移上小图时,显示原图 
{ 
var seeBig = document.getElementById("bigPic");    //得到将要显示原图区域的div element 
var newImg = document.createElement("img");    //新建一个img element,将原图的src赋给这个element 
newImg = "<img src=\'" + imgSrc + "\'/>";    //注意这里,是为整个element赋值,我在这个小问题上还花了挺多时间 
//alert(imgSrc); 
seeBig.innerHTML = newImg;    //将原图赋给要显示的区域 
} 
</script>

下面是HTML代码:
<!--下面这个ID是img000的element是略缩图,鼠标悬停在它上面即出现原图--> 
<!--onmouseover方法中调用了mouseOverPic函数(见上面),传给它的参数是原图的URL--> 
<!--调用mouseOverPic之后,将原图显示区域设为可见--> 
<img id="img000" src="images/general/emailAt.jpg" onmouseover="mouseOverPic('images/general/usc_badge.jpg'); bigPic.style.visibility='visible'" onmouseout="mouseOutPic()"> 
<!--页面初始化的时候,原图显示区域是隐藏的--> 
<div id="bigPic" style="visibility:hidden;"> 
</div>

上面这个代码没有控制原图出现的位置,如果涉及到靠近窗口边缘的位置的话会用到offsetLeft等属性。
仔细想想,其实这个也蛮简单的。写Javascript的需要多多注意细节,这个实在是太重要了,一不小心就会出错,最糟糕的是不知道错在哪里。
Javascript 相关文章推荐
JavaScript CSS修改学习第一章 查找位置
Feb 19 Javascript
JavaScript 小型打飞机游戏实现原理说明
Oct 28 Javascript
js中点击空白区域时文本框与隐藏层的显示与影藏问题
Aug 26 Javascript
json字符串之间的相互转换示例代码
Aug 21 Javascript
jQuery与getJson结合的用法实例
Aug 07 Javascript
JavaScript+html5 canvas绘制的小人效果
Jan 27 Javascript
使用jquery提交form表单并自定义action的实现代码
May 25 Javascript
关于iframe跨域POST提交的方法示例
Jan 15 Javascript
详谈jQuery中的一些正则匹配表达式
Mar 08 Javascript
jquery获取transform里的值实现方法
Dec 12 jQuery
使用socket.io实现简单聊天室案例
Jan 02 Javascript
vue利用axios来完成数据的交互
Mar 23 Javascript
javascript options属性集合操作代码
Dec 28 #Javascript
javascript 动态调整图片尺寸实现代码
Dec 28 #Javascript
jquery $(document).ready() 与window.onload的区别
Dec 28 #Javascript
jQuery的强大选择器小结
Dec 27 #Javascript
IE6 弹出Iframe层中的文本框“经常”无法获得输入焦点
Dec 27 #Javascript
JavaScript 拾漏补遗
Dec 27 #Javascript
js 实现无干扰阴影效果 简单好用(附文件下载)
Dec 27 #Javascript
You might like
用PHP与XML联手进行网站编程代码实例
2008/07/10 PHP
Ajax PHP 边学边练 之三 数据库
2009/11/26 PHP
PHP+ACCESS 文章管理程序代码
2010/06/21 PHP
基于JQuery+PHP编写砸金蛋中奖程序
2015/09/08 PHP
PHP简单实现生成txt文件到指定目录的方法
2016/04/25 PHP
php处理复杂xml数据示例
2016/07/11 PHP
PHP实现的策略模式简单示例
2017/08/25 PHP
一些易混淆且不常用的属性,希望有用
2007/01/29 Javascript
IE innerHTML,outerHTML所引起的问题
2009/06/04 Javascript
网页前台通过js非法字符过滤代码(骂人的话等等)
2010/05/26 Javascript
seajs1.3.0源码解析之module依赖有序加载
2012/11/07 Javascript
JS实现横向拉伸动感伸缩菜单效果代码
2015/09/04 Javascript
Bootstrap每天必学之标签与徽章
2015/11/27 Javascript
学习JavaScript设计模式之中介者模式
2016/01/14 Javascript
jQuery Easyui学习之datagrid 动态添加、移除editor
2016/01/27 Javascript
全新打包工具parcel零配置vue开发脚手架
2018/01/11 Javascript
js中Object.defineProperty()方法的不详解
2018/07/09 Javascript
判断“命令按钮”是否被鼠标单击详解
2019/07/31 Javascript
python装饰器decorator介绍
2014/11/21 Python
python爬虫简单的添加代理进行访问的实现代码
2019/04/04 Python
python 计算两个列表的相关系数的实现
2019/08/29 Python
python Pillow图像处理方法汇总
2019/10/16 Python
python  logging日志打印过程解析
2019/10/22 Python
python3实现单目标粒子群算法
2019/11/14 Python
Python面向对象程序设计之静态方法、类方法、属性方法原理与用法分析
2020/03/23 Python
CSS3混合模式mix-blend-mode/background-blend-mode简介
2018/03/15 HTML / CSS
通过css3的filter滤镜改变png图片的颜色的示例代码
2020/05/06 HTML / CSS
HTML5 Canvas绘制圆点虚线实例
2015/01/01 HTML / CSS
瑞典耳机品牌:URBANISTA
2019/12/03 全球购物
英语专业个人求职自荐信
2013/09/21 职场文书
安全生产活动月方案
2014/03/09 职场文书
志愿者宣传口号
2014/06/17 职场文书
公务员学习习总书记“三严三实”思想汇报
2014/09/19 职场文书
小学生毕业评语
2014/12/26 职场文书
荒岛余生观后感
2015/06/09 职场文书
react中的DOM操作实现
2021/06/30 Javascript