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 按位与运算符 (&amp;)使用介绍
Feb 04 Javascript
JS中产生20位随机数以0-9为例也可以是a-z A-Z
Aug 01 Javascript
基于gulp合并压缩Seajs模块的方式说明
Jun 14 Javascript
js控制台输出的方法(详解)
Nov 26 Javascript
json2.js 入门教程之使用方法与实例分析
Sep 14 Javascript
vue组件父子间通信之综合练习(聊天室)
Nov 07 Javascript
关于js的三种使用方式(行内js、内部js、外部js)的程序代码
May 05 Javascript
vue组件数据传递、父子组件数据获取,slot,router路由功能示例
Mar 19 Javascript
详解如何使用router-link对象方式传递参数?
May 02 Javascript
vue下的@change事件的实现
Oct 25 Javascript
Vant+postcss-pxtorem 实现浏览器适配功能
Feb 05 Javascript
Vue如何清空对象
Mar 03 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下使用SimpleXML 处理XML 文件
2010/02/27 PHP
php shell超强免杀、减少体积工具实现代码
2012/10/16 PHP
php动态读取数据清除最右边距的方法
2017/04/12 PHP
js实现简单模态窗口,背景灰显
2008/11/14 Javascript
jQuery.getScript加载同域JS的代码
2012/02/13 Javascript
Javascript中各种trim的实现详细解析
2013/12/10 Javascript
JavaScript数组的栈方法与队列方法详解
2016/05/26 Javascript
Bootstrap路径导航与分页学习使用
2017/02/08 Javascript
ES6数组的扩展详解
2017/04/25 Javascript
javascript将url解析为json格式的两种方法
2017/08/18 Javascript
Django中使用jquery的ajax进行数据交互的实例代码
2017/10/15 jQuery
详解为Bootstrap Modal添加拖拽的方法
2018/01/05 Javascript
关于React动态加载路由处理的相关问题
2019/01/07 Javascript
使用异步组件优化Vue应用程序的性能
2019/04/28 Javascript
[02:27]《DAC最前线》之附加赛征程
2015/01/29 DOTA
[00:43]2016完美“圣”典风云人物:单车宣传片
2016/12/02 DOTA
粗略分析Python中的内存泄漏
2015/04/23 Python
python输出当前目录下index.html文件路径的方法
2015/04/28 Python
Python中遍历字典过程中更改元素导致异常的解决方法
2016/05/12 Python
Python实现学校管理系统
2018/01/11 Python
python实现微信远程控制电脑
2018/02/22 Python
Python实现的多进程拷贝文件并显示百分比功能示例
2019/04/09 Python
python 解压、复制、删除 文件的实例代码
2020/02/26 Python
基于matplotlib xticks用法详解
2020/04/16 Python
详解Python的爬虫框架 Scrapy
2020/08/03 Python
Restful_framework视图组件代码实例解析
2020/11/17 Python
RentCars.com巴西:汽车租赁网站
2016/08/22 全球购物
美国最流行的男士时尚网站:Touch of Modern
2018/02/05 全球购物
Funko官方商店:源自美国,畅销全球搪胶收藏玩偶
2018/09/15 全球购物
亚马逊海外购:亚马逊美国、英国、日本、德国直邮
2021/03/18 全球购物
优秀社区干部事迹材料
2014/02/03 职场文书
网络信息安全承诺书
2014/03/26 职场文书
2014年秋季开学演讲稿
2014/05/24 职场文书
春风化雨观后感
2015/06/11 职场文书
CSS3 制作的彩虹按钮样式
2021/04/11 HTML / CSS
Python tensorflow卷积神经Inception V3网络结构
2022/05/06 Python