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 二维数组
Nov 26 Javascript
javascript权威指南 学习笔记之变量作用域分享
Sep 28 Javascript
读JavaScript DOM编程艺术笔记
Nov 15 Javascript
js遍历、动态的添加数据的小例子
Jun 22 Javascript
整理Javascript基础入门学习笔记
Nov 29 Javascript
全面解析Bootstrap布局组件应用
Feb 22 Javascript
AngularJS 如何在控制台进行错误调试
Jun 07 Javascript
Bootstrap3制作搜索框样式的方法
Jul 11 Javascript
webpack之引入图片的实现及问题
Oct 08 Javascript
详解JS浏览器事件循环机制
Mar 27 Javascript
深入理解Vue的数据响应式
May 15 Vue.js
vue使用节流函数的踩坑实例指南
May 20 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的静态成员函数效率更高的原因
2014/06/13 PHP
ThinkPHP的cookie和session冲突造成Cookie不能使用的解决方法
2014/07/01 PHP
跟我学Laravel之请求(Request)的生命周期
2014/10/15 PHP
ThinkPHP中自定义错误页面和提示页面实例
2014/11/22 PHP
在WordPress中使用PHP脚本来判断访客来自什么国家
2015/12/10 PHP
ExtJs之带图片的下拉列表框插件
2010/03/04 Javascript
javascript中的继承实例代码
2011/04/27 Javascript
javascript 兼容所有浏览器的DOM扩展功能
2012/08/01 Javascript
Jquery解析json字符串及json数组的方法
2015/05/29 Javascript
JQUERY表单暂存功能插件分享
2016/02/23 Javascript
JavaScript基于原型链的继承
2016/06/22 Javascript
关于vue-router的beforeEach无限循环的问题解决
2017/09/09 Javascript
JavaScript EventEmitter 背后的秘密 完整版
2018/03/29 Javascript
Angular angular-file-upload文件上传的示例代码
2018/08/23 Javascript
Python实现获取某天是某个月中的第几周
2015/02/11 Python
深入flask之异步非堵塞实现代码示例
2018/07/31 Python
Python常见数据类型转换操作示例
2019/05/08 Python
Django打印出在数据库中执行的语句问题
2019/07/25 Python
Python + Flask 实现简单的验证码系统
2019/10/01 Python
图解python全局变量与局部变量相关知识
2019/11/02 Python
Python sys模块常用方法解析
2020/02/20 Python
在keras 中获取张量 tensor 的维度大小实例
2020/06/10 Python
哪些是python中web开发框架
2020/06/17 Python
铭宣海淘转运:美国、日本、英国转运等全球转运公司
2019/09/10 全球购物
Aquatalia官网:意大利著名鞋履品牌
2019/09/26 全球购物
应届毕业生通用的自荐书范文
2014/02/07 职场文书
成绩单公证书
2014/04/10 职场文书
市场营销调查计划书
2014/05/02 职场文书
基层党建工作宣传标语
2014/06/24 职场文书
地下停车场租赁协议范本
2014/10/07 职场文书
2014年超市工作总结
2014/11/19 职场文书
教师党员自我评价范文
2015/03/04 职场文书
2015教师节师德演讲稿
2015/03/19 职场文书
Python列表删除重复元素与图像相似度判断及删除实例代码
2021/05/07 Python
Springboot集成阿里云OSS上传文件系统教程
2021/06/28 Java/Android
Mybatis是这样防止sql注入的
2021/12/06 Java/Android