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 相关文章推荐
跟随鼠标旋转的文字
Nov 30 Javascript
不懂JavaScript应该怎样学
Apr 16 Javascript
JS实现黑色风格的网页TAB选项卡效果代码
Oct 09 Javascript
总结JavaScript中布尔操作符||与&amp;&amp;的使用技巧
Nov 17 Javascript
js仿支付宝多方框输入支付密码效果
Sep 27 Javascript
Bootstrap企业网站实战项目4
Oct 14 Javascript
JavaScript优化以及前段开发小技巧
Feb 02 Javascript
微信小程序城市定位的实现实例(获取当前所在国家城市信息)
May 17 Javascript
详解angular脏检查原理及伪代码实现
Jun 08 Javascript
selenium 反爬虫之跳过淘宝滑块验证功能的实现代码
Aug 27 Javascript
js基于canvas实现时钟组件
Feb 07 Javascript
如何使用CocosCreator对象池
Apr 14 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中json_encode中文编码问题分析
2011/09/13 PHP
解析PHP跳出循环的方法以及continue、break、exit的区别介绍
2013/07/01 PHP
thinkPHP分页功能实例详解
2017/05/05 PHP
解决IE下select标签innerHTML插入option的BUG(兼容IE,FF,Opera,Chrome,Safari)
2010/05/13 Javascript
javascript 二进制运算技巧解析
2012/11/27 Javascript
JavaScript中圆括号()和方括号[]的特殊用法疑问解答
2013/08/06 Javascript
jQuery中element选择器用法实例
2014/12/29 Javascript
Jquery中使用show()与hide()方法动画显示和隐藏图片
2015/10/08 Javascript
JavaScript Ajax编程 应用篇
2016/07/02 Javascript
浅谈js内置对象Math的属性和方法(推荐)
2016/09/19 Javascript
jquery 禁止鼠标右键并监听右键事件
2017/04/27 jQuery
解决Webpack 热部署检测不到文件变化的问题
2018/02/22 Javascript
JavaScript前端页面搜索功能案例【基于jQuery】
2019/07/10 jQuery
小程序如何写动态标签的实现方法
2020/02/05 Javascript
[00:26]TI7不朽珍藏III——冥界亚龙不朽展示
2017/07/15 DOTA
python计算最大优先级队列实例
2013/12/18 Python
python批量生成本地ip地址的方法
2015/03/23 Python
python开发之字符串string操作方法实例详解
2015/11/12 Python
分析Python中设计模式之Decorator装饰器模式的要点
2016/03/02 Python
机器学习python实战之手写数字识别
2017/11/01 Python
Python数据拟合与广义线性回归算法学习
2017/12/22 Python
Python3数据库操作包pymysql的操作方法
2018/07/16 Python
kali中python版本的切换方法
2019/07/11 Python
Python 类的魔法属性用法实例分析
2019/11/21 Python
Python参数传递对象的引用原理解析
2020/05/22 Python
Pytorch转onnx、torchscript方式
2020/05/25 Python
简单了解Django项目应用创建过程
2020/07/06 Python
Aerosoles爱柔仕官网:美国舒软女鞋品牌
2017/07/17 全球购物
文明青少年标兵事迹材料
2014/01/28 职场文书
计算机应届毕业生自荐信范文
2014/02/23 职场文书
投标人廉洁自律承诺书
2014/05/26 职场文书
国际贸易专业自荐信
2014/06/10 职场文书
物业保安岗位职责
2014/07/02 职场文书
2014年党员自我评议总结
2014/09/23 职场文书
居委会工作总结2015
2015/05/18 职场文书
运动会广播稿50字
2015/08/19 职场文书