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 相关文章推荐
juqery 学习之六 CSS--css、位置、宽高
Feb 11 Javascript
JavaScript中的Math.atan2()方法使用详解
Jun 15 Javascript
Node.js的Koa框架上手及MySQL操作指南
Jun 13 Javascript
详解网站中图片日常使用以及优化手法
Jan 09 Javascript
jquery操作ul的一些操作笔记整理(干货)
Aug 31 jQuery
微信小程序实现的涂鸦功能示例【附源码下载】
Jan 12 Javascript
bmob js-sdk 在vue中的使用教程
Jan 21 Javascript
vue2.0 + element UI 中 el-table 数据导出Excel的方法
Mar 02 Javascript
微信小程序实现九宫格抽奖
Apr 15 Javascript
vue实现密码显示与隐藏按钮的自定义组件功能
Apr 23 Javascript
详解package.json版本号规则
Aug 01 Javascript
layui的layedit富文本赋值方法
Sep 18 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开发框架总结收藏
2008/04/24 PHP
了解Joomla 这款来自国外的php网站管理系统
2010/03/11 PHP
php内存缓存实现方法
2015/01/24 PHP
JS中剪贴板兼容性、判断复制成功或失败
2021/03/09 Javascript
JavaScript高级程序设计 错误处理与调试学习笔记
2011/09/10 Javascript
js 阻止子元素响应父元素的onmouseout事件具体实现
2013/12/23 Javascript
chrome下img加载对height()的影响示例探讨
2014/05/26 Javascript
当前流行的JavaScript代码风格指南
2014/09/10 Javascript
javascript常用函数归纳整理
2014/10/31 Javascript
TypeScript 学习笔记之基本类型
2015/06/19 Javascript
JavaScipt中栈的实现方法
2016/02/17 Javascript
简介EasyUI datagrid editor combogrid搜索框的实现
2016/04/01 Javascript
jquery html5 视频播放控制代码
2016/11/06 Javascript
Vue2.0 UI框架ElementUI使用方法详解
2017/04/14 Javascript
删除table表格行的实例讲解
2017/09/21 Javascript
微信小程序实现tab页面切换功能
2018/07/13 Javascript
nodejs基础之buffer缓冲区用法分析
2018/12/26 NodeJs
详解在微信小程序的JS脚本中使用Promise来优化函数处理
2019/03/06 Javascript
[01:23]一分钟告诉你 DOTA2为什么叫信仰2
2014/06/20 DOTA
详解Python中open()函数指定文件打开方式的用法
2016/06/04 Python
详解Python中类的定义与使用
2017/04/11 Python
Python with用法:自动关闭文件进程
2019/07/10 Python
python误差棒图errorbar()函数实例解析
2020/02/11 Python
解决keras backend 越跑越慢问题
2020/06/18 Python
Python 如何定义匿名或内联函数
2020/08/01 Python
英国高档时尚男装购物网站:MR PORTER
2016/08/09 全球购物
H&M美国官网:欧洲最大的服饰零售商
2016/09/07 全球购物
澳大利亚设计的婴儿和女孩的衣服:Oobi
2018/12/16 全球购物
英国在线玫瑰专家:InterRose
2019/12/01 全球购物
英语道歉信范文
2014/01/09 职场文书
移风易俗倡议书
2014/04/15 职场文书
大学生党性分析材料
2014/12/19 职场文书
迁徙的鸟观后感
2015/06/09 职场文书
《蟋蟀的住宅》教学反思
2016/02/17 职场文书
解决hive中导入text文件遇到的坑
2021/04/07 Python
Vue全家桶入门基础教程
2021/05/14 Vue.js