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函数般调用正则
Apr 08 Javascript
解决JS中乘法的浮点错误的方法
Jan 03 Javascript
鼠标悬浮停留三秒后自动显示大图js代码
Sep 09 Javascript
jQuery中prependTo()方法用法实例
Jan 08 Javascript
Linux下编译安装php libevent扩展实例
Feb 14 Javascript
js手动播放图片实现图片轮播效果
Sep 17 Javascript
JS点击某个图标或按钮弹出文件选择框的实现代码
Sep 27 Javascript
vue2.0父子组件间传递数据的方法
Aug 16 Javascript
vue表单自定义校验规则介绍
Aug 28 Javascript
JavaScript实现留言板案例
Mar 17 Javascript
小程序按钮避免多次调用接口和点击方案实现(不用showLoading)
Apr 15 Javascript
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
Nov 18 Vue.js
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
ajax实现无刷新分页(php)
2010/07/18 PHP
PHP中限制IP段访问、禁止IP提交表单的代码
2011/04/23 PHP
ThinkPHP实现递归无级分类――代码少
2015/07/29 PHP
PHP处理会话函数大总结
2015/08/05 PHP
php利用smtp类实现电子邮件发送
2015/10/30 PHP
[原创]后缀就扩展名为js的文件是什么文件
2007/12/06 Javascript
Jquery中dialog属性小记
2010/09/03 Javascript
js隐藏与显示回到顶部按钮及window.onscroll事件应用
2013/01/25 Javascript
jquery用get实现ajax在ie里面刷新不进入后台解决方法
2013/08/12 Javascript
jQuery学习笔记之jQuery原型属性和方法
2014/06/09 Javascript
Jquery选择器中使用变量实现动态选择例子
2014/07/25 Javascript
JavaScript调用传递变量参数的相关问题及解决办法
2015/11/01 Javascript
jQuery链式操作实例分析
2015/11/16 Javascript
JS实现左右无缝轮播图代码
2016/05/01 Javascript
BootStrap智能表单实战系列(九)表单图片上传的支持
2016/06/13 Javascript
vue 打包后的文件部署到express服务器上的方法
2017/08/09 Javascript
详解如何使用webpack在vue项目中写jsx语法
2017/11/08 Javascript
vue项目base64字符串转图片的实现代码
2018/07/13 Javascript
在vue中给列表中的奇数行添加class的实现方法
2018/09/05 Javascript
微信{"errcode":48001,"errmsg":"api unauthorized, hints: [ req_id: 1QoCla0699ns81 ]"}
2018/10/12 Javascript
使用vue-cli3新建一个项目并写好基本配置(推荐)
2019/04/24 Javascript
Python去掉字符串中空格的方法
2014/03/11 Python
Python实现的监测服务器硬盘使用率脚本分享
2014/11/07 Python
Python使用gRPC传输协议教程
2018/10/16 Python
Tensorflow中的dropout的使用方法
2020/03/13 Python
Django models文件模型变更错误解决
2020/05/11 Python
pandas参数设置的实用小技巧
2020/08/23 Python
深入浅析CSS3中的Flex布局整理
2020/04/27 HTML / CSS
澳大利亚最超值的自行车之家:Reid Cycles
2019/03/24 全球购物
Levi’s西班牙官方网站:李维斯,著名的牛仔裤品牌
2020/08/20 全球购物
高中化学教学反思
2014/01/13 职场文书
四个太阳教学反思
2014/02/01 职场文书
幼儿园教师的考核评语
2014/04/18 职场文书
煤矿安全保证书
2015/02/27 职场文书
余世维讲座观后感
2015/06/11 职场文书
Python一些基本的图像操作和处理总结
2021/06/23 Python