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的递增/递减运算符和带操作的赋值运算符的等价式
Dec 08 Javascript
用jquery实现学校的校历(asp.net+jquery ui 1.72)
Jan 01 Javascript
firefox下jQuery UI Autocomplete 1.8.*中文输入修正方法
Sep 19 Javascript
JS 模态对话框和非模态对话框操作技巧汇总
Apr 15 Javascript
深入探寻seajs的模块化与加载方式
Apr 14 Javascript
js判断日期时间有效性的方法
Oct 24 Javascript
jQuery Mobile开发中日期插件Mobiscroll使用说明
Mar 02 Javascript
客户端验证用户名和密码的方法详解
Jun 16 Javascript
jQuery3.0中的buildFragment私有函数详解
Aug 16 Javascript
基于javascript中的typeof和类型判断(详解)
Oct 27 Javascript
微信小程序使用video组件播放视频功能示例【附源码下载】
Dec 08 Javascript
node.js中fs文件系统目录操作与文件信息操作
Feb 24 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
造势之举?韩国总统候选人发布《星际争霸》地图
2017/04/22 星际争霸
浅谈PHP面向对象之访问者模式+组合模式
2017/05/22 PHP
extJs 文本框后面加上说明文字+下拉列表选中值后触发事件
2009/11/27 Javascript
JavaScript中SQL语句的应用实现
2010/05/04 Javascript
浅析Js(Jquery)中,字符串与JSON格式互相转换的示例(直接运行实例)
2013/07/09 Javascript
AngularJS iframe跨域打开内容时报错误的解决办法
2015/01/26 Javascript
jquery利用命名空间移除绑定事件的方法
2015/03/11 Javascript
javascript获取wx.config内部字段解决微信分享
2016/03/09 Javascript
JavaScript中各种引用类型的常用操作方法小结
2016/05/05 Javascript
jquery解析XML及获取XML节点名称的实现代码
2016/05/18 Javascript
微信js-sdk上传与下载图片接口用法示例
2016/10/12 Javascript
Vue axios 中提交表单数据(含上传文件)
2017/07/06 Javascript
vue微信分享 vue实现当前页面分享其他页面
2017/12/02 Javascript
Angular17之Angular自定义指令详解
2018/01/21 Javascript
详解webpack引入第三方库的方式以及注意事项
2019/01/15 Javascript
JS隐藏号码中间4位代码实例
2019/04/09 Javascript
微信小程序中显示倒计时代码实例
2019/05/09 Javascript
js+css3实现炫酷时钟
2020/08/18 Javascript
编写自定义的Django模板加载器的简单示例
2015/07/21 Python
Python如何快速上手? 快速掌握一门新语言的方法
2017/11/14 Python
Pycharm代码无法复制,无法选中删除,无法编辑的解决方法
2018/10/22 Python
pycharm 在windows上编辑代码用linux执行配置的方法
2018/10/27 Python
Python使用pandas对数据进行差分运算的方法
2018/12/22 Python
python实现狄克斯特拉算法
2019/01/17 Python
详解Python中的分支和循环结构
2020/02/11 Python
Python轻量级web框架bottle使用方法解析
2020/06/13 Python
使用keras框架cnn+ctc_loss识别不定长字符图片操作
2020/06/29 Python
阿拉伯世界最大的电子商务网站:Souq沙特阿拉伯
2016/10/28 全球购物
采购部主管岗位职责
2014/01/01 职场文书
社团活动总结报告
2014/06/27 职场文书
高中课前三分钟演讲稿
2014/09/13 职场文书
2014个人年终工作总结范文
2014/12/15 职场文书
教学副校长工作总结
2015/08/13 职场文书
2019年鼓励无偿献血倡议书
2019/09/17 职场文书
解决Laravel使用验证时跳转到首页的问题
2021/11/17 PHP
Windows Server 2019 安装DHCP服务及相关配置
2022/04/28 Servers