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 相关文章推荐
Tab页界面,用jQuery及Ajax技术实现
Sep 21 Javascript
最佳JS代码编写的14条技巧
Jan 09 Javascript
js中各浏览器中鼠标按键值的差异
Apr 07 Javascript
Jquery给基本控件的取值、赋值示例
May 23 Javascript
javascript实现的平方米、亩、公顷单位换算小程序
Aug 11 Javascript
jQuery验证插件 Validate详解
Nov 20 Javascript
iframe中子父类窗口调用JS的方法及注意事项
Aug 25 Javascript
javascript中字体浮动效果的简单实例演示
Nov 18 Javascript
谈一谈JS消息机制和事件机制的理解
Apr 14 Javascript
AngularJS实现树形结构(ztree)菜单示例代码
Sep 18 Javascript
原生js实现可拖动的登录框效果
Jan 21 Javascript
js实现AI五子棋人机大战
May 28 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 __autoload函数(自动载入类文件)的使用方法
2012/02/04 PHP
一个简单的php加密解密函数(动态加密)
2013/06/19 PHP
使用array_map简单搞定PHP删除文件、删除目录
2014/10/29 PHP
Yii2.0 Basic代码中路由链接被转义的处理方法
2016/09/21 PHP
PHP命名空间与自动加载类详解
2018/09/04 PHP
PHP fclose函数用法总结
2019/02/15 PHP
Javascript根据指定下标或对象删除数组元素
2012/12/21 Javascript
获取当前点击按钮的id用this.id实现
2014/03/17 Javascript
Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法
2014/08/15 Javascript
JavaScript中的值类型转换介绍
2014/12/31 Javascript
js图片模糊切换显示特效的方法
2015/02/17 Javascript
js控制文本框只输入数字和小数点的方法
2015/03/10 Javascript
JS组件Bootstrap实现弹出框和提示框效果代码
2015/12/08 Javascript
JS结合bootstrap实现基本的增删改查功能
2016/07/22 Javascript
js实现简单的计算器功能
2017/01/16 Javascript
Node做中转服务器转发接口
2017/10/18 Javascript
利用Javascript实现一套自定义事件机制
2017/12/14 Javascript
JS实现根据详细地址获取经纬度功能示例
2019/04/16 Javascript
jQuery实现评论模块
2020/08/19 jQuery
Python实现嵌套列表去重方法示例
2017/12/28 Python
终端命令查看TensorFlow版本号及路径的方法
2018/06/13 Python
pyqt5对用qt designer设计的窗体实现弹出子窗口的示例
2019/06/19 Python
Python Numpy 实现交换两行和两列的方法
2019/06/26 Python
Python调用scp向服务器上传文件示例
2019/12/22 Python
TensorFlow tf.nn.max_pool实现池化操作方式
2020/01/04 Python
keras得到每层的系数方式
2020/06/15 Python
python调用私有属性的方法总结
2020/07/24 Python
浅谈css3新单位vw、vh、vmin、vmax的使用详解
2017/12/01 HTML / CSS
英国高街电视:High Street TV
2018/05/22 全球购物
品牌宣传方案
2014/03/21 职场文书
英语教研活动总结
2014/07/02 职场文书
学校标语口号大全
2015/12/26 职场文书
2019森林防火宣传标语大全!
2019/07/03 职场文书
《极主夫道》真人电影正式预告 定档6月3日上映
2022/04/05 日漫
win10键盘驱动怎么修复?Win10键盘驱动修复小技巧
2022/04/06 数码科技
Win11 22H2 2022怎么更新? 获得Win1122H22022版本升级技巧
2022/09/23 数码科技