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的alert样式如何更改如背景颜色
Jan 22 Javascript
在JS中如何调用JSP中的变量
Jan 22 Javascript
jquery attr方法获取input的checked属性问题
May 26 Javascript
JSON.stringify转换JSON时日期时间不准确的解决方法
Aug 08 Javascript
JavaScript让网页出现渐隐渐显背景颜色的方法
Apr 21 Javascript
基于JQuery的$.ajax方法进行异步请求导致页面闪烁的解决办法
May 10 Javascript
javascript中Number的方法小结
Nov 21 Javascript
bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题
Aug 10 Javascript
vue中的router-view组件的使用教程
Oct 23 Javascript
浅谈Vue为什么不能检测数组变动
Oct 14 Javascript
js实现点击生成随机div
Jan 16 Javascript
JavaScript实现飞舞的泡泡效果
Feb 07 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
外媒评选出10支2020年最受欢迎的Dota2战队
2021/03/05 DOTA
PHP配置文件中最常用四个ini函数
2007/03/19 PHP
关于JS管理作用域的问题
2013/04/10 Javascript
js模仿hover的具体实现代码
2013/12/30 Javascript
JS实现CheckBox复选框全选全不选功能
2015/05/06 Javascript
js库Modernizr的介绍和使用
2015/05/07 Javascript
jQuery模拟原生态App上拉刷新下拉加载更多页面及原理
2015/08/10 Javascript
jquery实现的简单二级菜单效果代码
2015/09/22 Javascript
CSS中position属性之fixed实现div居中
2015/12/14 Javascript
javascript html5实现表单验证
2016/03/01 Javascript
Node.js中JavaScript操作MySQL的常用方法整理
2016/03/01 Javascript
微信小程序 网络API发起请求详解
2016/11/09 Javascript
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
2016/12/20 Javascript
js实现自动图片轮播代码
2017/03/22 Javascript
ES6(ECMAScript 6)新特性之模板字符串用法分析
2017/04/01 Javascript
微信小程序与php 实现微信支付的简单实例
2017/06/23 Javascript
基于原生js运动方式关键点的总结(推荐)
2017/10/01 Javascript
微信小程序模板和模块化用法实例分析
2017/11/28 Javascript
vue实现微信分享链接添加动态参数的方法
2019/04/29 Javascript
JS中FormData类实现文件上传
2020/03/27 Javascript
JavaScript创建表格的方法
2020/04/13 Javascript
python中is与双等于号“==”的区别示例详解
2017/11/21 Python
Python SQLite3简介
2018/02/22 Python
python绘制多个曲线的折线图
2020/03/23 Python
PyCharm在新窗口打开项目的方法
2019/01/17 Python
Python 保持登录状态进行接口测试的方法示例
2019/08/06 Python
Python列表list操作相关知识小结
2020/01/29 Python
解决pyCharm中 module 调用失败的问题
2020/02/12 Python
使用Python合成图片的实现代码(图片添加个性化文本,图片上叠加其他图片)
2020/04/30 Python
浅析Python 抽象工厂模式的优缺点
2020/07/13 Python
Prometheus开发中间件Exporter过程详解
2020/11/30 Python
机关作风建设剖析材料
2014/10/11 职场文书
房产协议书范本
2014/10/18 职场文书
口袋妖怪冰系十大最强精灵,几何雪花排第七,第六类似北极熊
2022/03/18 日漫
Android Rxjava3 使用场景详解
2022/04/07 Java/Android
Jmerte 分布式压测及分布式压测配置
2022/04/30 Java/Android