当前位置: 首页 > 图文教程 > 网络编程 > Javascript > javascript 鼠标悬浮图片显示原图 移出鼠标后原图消失(多图)

Javascript
js 方法实现返回多个数据的代码
Ext 表单布局实例代码
javascript document.referrer 用法
JavaScript 字符编码规则
JS 动态加载脚本的4种方法
jQuery textarea的长度进行验证
jQuery select的操作实现代码
jQuery 1.2.x 升級 1.3.x 注意事项
关于viewport,Ext.panel和Ext.form.panel的关系
日期 时间js控件
JavaScript的parseInt 进制问题
javascript 有用的脚本函数
javascript 两个字符串比较函数
javascript 代码运行器
js arguments.callee的应用代码
JavaScript Table排序 2.0 (更新)
给Function做的OOP扩展
<script defer> defer 是什么意思
FF和IE之间7个JavaScript的差异
javascript获取当前ip的代码

Javascript 中的 javascript 鼠标悬浮图片显示原图 移出鼠标后原图消失(多图)


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2010-01-10   浏览: 441 ::
收藏到网摘: 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的需要多多注意细节,这个实在是太重要了,一不小心就会出错,最糟糕的是不知道错在哪里。