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 鼠标拖动对象 可让任何div实现拖动效果
Nov 09 Javascript
使用jquery插件实现图片延迟加载技术详细说明
Mar 12 Javascript
使用jsonp完美解决跨域问题
Nov 27 Javascript
jquery实现倒计时功能
Dec 28 Javascript
javascript的几种继承方法介绍
Mar 22 Javascript
再谈javascript常见错误及解决方法
Sep 16 Javascript
Vuejs 组件——props数据传递的实例代码
Mar 07 Javascript
通过示例彻底搞懂js闭包
Aug 10 Javascript
JS实现移动端触屏拖拽功能
Jul 31 Javascript
JavaScrip数组去重操作实例小结
Jun 20 Javascript
js实现3D照片墙效果
Oct 28 Javascript
NestJs使用Mongoose对MongoDB操作的方法
Feb 22 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
Drupal7中常用的数据库操作实例
2014/03/02 PHP
Laravel 4.2 中队列服务(queue)使用感受
2014/10/30 PHP
Mac下php 5升级到php 7的步骤详解
2017/04/26 PHP
javascript 禁止复制网页
2009/06/11 Javascript
js实现可得到不同颜色值的颜色选择器实例
2015/02/28 Javascript
JavaScript将字符串转换为整数的方法
2015/04/14 Javascript
AngularJS基础学习笔记之表达式
2015/05/10 Javascript
JavaScript设计模式经典之工厂模式
2016/02/24 Javascript
JS判断是否在微信浏览器打开的简单实例(推荐)
2016/08/24 Javascript
Angularjs CURD 详解及实例代码
2016/09/14 Javascript
jQuery中Datatables增加跳转到指定页功能
2017/02/08 Javascript
新版vue-cli模板下本地开发环境使用node服务器跨域的方法
2018/04/03 Javascript
详解Koa中更方便简单发送响应的方式
2018/07/20 Javascript
Vue封装的可编辑表格插件方法
2018/08/28 Javascript
微信小程序实现蓝牙打印
2019/09/23 Javascript
vue的三种图片引入方式代码实例
2019/11/19 Javascript
Python算术运算符实例详解
2017/05/31 Python
Pycharm代码无法复制,无法选中删除,无法编辑的解决方法
2018/10/22 Python
对Python中class和instance以及self的用法详解
2019/06/26 Python
python中PS 图像调整算法原理之亮度调整
2019/06/28 Python
解决python 读取 log日志的编码问题
2019/12/24 Python
Python list运算操作代码实例解析
2020/01/20 Python
Pytorch实现将模型的所有参数的梯度清0
2020/06/24 Python
selenium携带cookies模拟登陆CSDN的实现
2021/01/19 Python
总结30个CSS3选择器
2017/04/13 HTML / CSS
CSS3 filter(滤镜)实现网页灰色或者黑色模式的示例代码
2021/02/24 HTML / CSS
澳大利亚网上买书:Angus & Robertson
2019/07/21 全球购物
傲盾软件面试题
2015/08/17 面试题
采购主管岗位职责
2014/02/01 职场文书
教师产假请假条
2014/04/10 职场文书
优秀团干部个人事迹
2014/05/29 职场文书
2015年小学数学教研组工作总结
2015/05/21 职场文书
科技馆观后感
2015/06/08 职场文书
2015年“我们的节日·中秋节”活动总结
2015/07/30 职场文书
数据结构课程设计心得体会
2016/01/15 职场文书
nginx lua 操作 mysql
2022/05/15 Servers