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实现日历控件(年月日关闭按钮)
Dec 12 Javascript
验证手机号码的JS方法分享
Sep 10 Javascript
用JS在浏览器中创建下载文件
Mar 05 Javascript
window.location.href IE下跳转失效的解决方法
Mar 27 Javascript
jQuery元素选择器用法实例
Dec 23 Javascript
jQuery中设置form表单中action值的实现方法
May 25 Javascript
功能强大的Bootstrap效果展示(二)
Aug 03 Javascript
Angular如何引入第三方库的方法详解
Jul 13 Javascript
如何使用JS在HTML中自定义字符串格式化
Jul 20 Javascript
requireJS模块化实现返回顶部功能的方法详解
Oct 16 Javascript
vue-cli项目优化方法- 缩短首屏加载时间
Apr 01 Javascript
小程序自定义模板实现吸顶功能
Jan 08 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
CakePHP去除默认显示的标题及图标的方法
2008/10/22 PHP
laravel 4安装及入门图文教程
2014/10/29 PHP
php获取系统变量方法小结
2015/05/29 PHP
php生成微信红包数组的方法
2019/09/05 PHP
Laravel 数据库加密及数据库表前缀配置方法
2019/10/10 PHP
如何用JavaScript动态呼叫函数(两种方式)
2013/05/03 Javascript
浅谈JavaScript函数参数的可修改性问题
2013/12/05 Javascript
IE中的File域无法清空使用jQuery重设File域
2014/04/24 Javascript
jquery中each遍历对象和数组示例
2014/08/05 Javascript
JavaScript替换当前页面的方法
2015/04/03 Javascript
jQuery实现自动滚动到页面顶端的方法
2015/05/22 Javascript
JS中定位 position 的使用实例代码
2017/08/06 Javascript
vue+iview+less+echarts实战项目总结
2018/02/22 Javascript
Vue脚手架的简单使用实例
2018/07/10 Javascript
对VUE中的对象添加属性
2018/09/18 Javascript
关于自定义Egg.js的请求级别日志详解
2018/12/12 Javascript
利用JS代码自动删除稿件的普通弹幕功能
2019/09/20 Javascript
Vue 修改网站图标的方法
2020/12/31 Vue.js
python解析发往本机的数据包示例 (解析数据包)
2014/01/16 Python
Python基础之函数用法实例详解
2014/09/10 Python
使用Python的内建模块collections的教程
2015/04/28 Python
Python实现随机生成有效手机号码及身份证功能示例
2017/06/05 Python
pyqt5实现绘制ui,列表窗口,滚动窗口显示图片的方法
2019/06/20 Python
详解python调用cmd命令三种方法
2019/07/08 Python
Django框架视图函数设计示例
2019/07/29 Python
pygame实现俄罗斯方块游戏(对战篇1)
2019/10/29 Python
详解opencv中画圆circle函数和椭圆ellipse函数
2019/12/27 Python
HTML5 3D衣服摇摆动画特效
2016/03/17 HTML / CSS
Visual-Click葡萄牙:欧洲领先的在线眼镜商
2020/02/17 全球购物
茱莉蔻美国官网:Jurlique美国
2020/11/24 全球购物
Sunglass Hut巴西网上商店:男女太阳镜
2020/10/04 全球购物
sealed修饰符是干什么的
2012/10/23 面试题
中专生自我鉴定
2013/12/17 职场文书
母亲80寿诞答谢词
2014/01/16 职场文书
自主招生自荐信格式范文
2015/03/25 职场文书
解决springboot druid数据库连接失败后一直重连的方法
2022/04/19 Java/Android