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 相关文章推荐
js DataSet数据源处理代码
Mar 29 Javascript
javascript dom代码应用 简单的相册[firefox only]
Jun 12 Javascript
浅析jQuery的链式调用之each函数
Dec 03 Javascript
jQuery实现个性翻牌效果导航菜单的方法
Mar 09 Javascript
JQUERY的AJAX请求缓存里的数据问题处理
Feb 23 Javascript
避免jQuery名字冲突 noConflict()方法
Jul 30 Javascript
AngularJS实现星星等级评分功能
Sep 24 Javascript
Js利用prototype自定义数组方法示例
Oct 20 Javascript
ReactNative之FlatList的具体使用方法
Nov 29 Javascript
Typescript的三种运行方式(小结)
Sep 18 Javascript
原生js+ajax分页组件
Jan 30 Javascript
vue监听滚动事件的方法
Dec 21 Vue.js
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中批量生成静态html(命令行下运行PHP)
2014/04/19 PHP
ThinkPHP之getField详解
2014/06/20 PHP
php打造智能化的柱状图程序,用于报表等
2015/06/19 PHP
PHP常用的三种设计模式汇总
2016/08/28 PHP
PHP实现的ID混淆算法类与用法示例
2018/08/10 PHP
PHP实现数据四舍五入的方法小结【4种方法】
2019/03/27 PHP
JavaScript面向对象之静态与非静态类
2010/02/03 Javascript
js实时获取并显示当前时间的方法
2015/07/31 Javascript
深入浅析javascript继承体系
2017/10/23 Javascript
浅谈Node.js CVE-2017-14849 漏洞分析(详细步骤)
2017/11/10 Javascript
JS实现简单的浮动碰撞效果示例
2017/12/28 Javascript
AngularJS使用$http配置对象方式与服务端交互方法
2018/08/13 Javascript
一步一步的了解webpack4的splitChunk插件(小结)
2018/09/17 Javascript
vue模块拖拽实现示例代码
2019/03/09 Javascript
微信小程序实现点击效果
2019/06/21 Javascript
微信小程序按钮点击动画效果的实现
2019/09/04 Javascript
小程序实现锚点滑动效果
2019/09/23 Javascript
Python 40行代码实现人脸识别功能
2017/04/02 Python
python实现图片处理和特征提取详解
2017/11/13 Python
1分钟快速生成用于网页内容提取的xslt
2018/02/23 Python
python实现list由于numpy array的转换
2018/04/04 Python
python自动重试第三方包retrying模块的方法
2018/04/24 Python
简单了解python装饰器原理及使用方法
2019/12/18 Python
Python实现爬取网页中动态加载的数据
2020/08/17 Python
Python xlwings插入Excel图片的实现方法
2021/02/26 Python
CSS Houdini实现动态波浪纹效果
2019/07/30 HTML / CSS
HTML5里的placeholder属性使用实例和美化显示效果的方法
2014/04/23 HTML / CSS
美国男女折扣服饰百货连锁店:Stein Mart
2017/05/02 全球购物
实习生自我鉴定
2013/12/12 职场文书
房地产端午节活动方案
2014/08/24 职场文书
领导干部四风问题自我剖析材料
2014/09/25 职场文书
单身证明范本
2015/06/15 职场文书
婚宴父母致辞
2015/07/27 职场文书
《多彩的民间艺术》教学反思
2016/02/16 职场文书
2017年寒假社区服务活动总结
2016/04/06 职场文书
MySQL中的全表扫描和索引树扫描
2022/05/15 MySQL