繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > javascript 鼠标悬浮图片显示原图 移出鼠标后原图消失（多图）
- Javascript
- javascript下拉框不被选中大类的区别方法
- firefox浏览器下javascript 拖动层效果与原理分析代码
- javascript 常用关键字列表集合
- [原创]后缀就扩展名为js的文件是什么文件
- 初学JS的的小例子 javascript replace高亮替换
- 项目实践之javascript技巧
- 不间断滚动JS打包类，基本可以实现所有的滚动效果，太强了
- javascript数组使用调用方法汇总
- JS的递增/递减运算符和带操作的赋值运算符的等价式
- JavaScript开发时的五个注意事项
- js中将多个语句写成一个语句的两种方法小结
- javascript while语句和do while语句的区别分析
- 带参数的function 的自运行效果代码
- 看了就知道什么是JSON
- js模拟实现Array的sort方法
- JavaScript创建命名空间(namespace)的最简实现
- 文本链接逐个出现的js脚本
- 我见过最全的个人js加解密功能页面
- CLASS_CONFUSION JS混淆 全源码
- javascript轻松控制表格列样式的脚本代码
Javascript 中的 javascript 鼠标悬浮图片显示原图 移出鼠标后原图消失（多图）
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-01-10 浏览: 509 ::
收藏到网摘: n/a
其实我想实现的只是大图预览，不需要太复杂。后来，在原来有的javascript资料里找到这个:)“JavaScript网页设计300例.chm”， 从里面找到了类似的下拉菜单的例子修改了一下，以实现这个功能。 具体用法是这样的：
将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的需要多多注意细节，这个实在是太重要了，一不小心就会出错，最糟糕的是不知道错在哪里。
评论 (0) All
