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

Javascript
图片放大镜效果代码
超棒的javascript页面顶部卷动广告效果
javascript 改变网页加载的CSS
javascript实现仿银行密码输入框效果的代码
麦鸡的TAB切换功能结合了javascript和css
mapper--图片热点区域高亮组件官方站点
undefined==null引发的两者区别与联系
用cookies实现的可记忆的样式切换效果代码下载
特漂亮的JS图片排列旋转效果代码
js jquery做的图片连续滚动代码
利用js跨页面保存变量做菜单的方法
用javascript做一个webgame连连看大家看下
Javascript 各浏览器的 Javascript 效率对比
北京奥运官方网站幻灯切换效果flash版打包下载
纯js无flash仿搜狐女人频道FLASH图片切换效果代码
javascript实现的三维正方体(兼容ie7,ff)
浅谈javascript函数劫持[转自xfocus]
连续操作HTMLElement对象图文解决方法
Javascript jquery css 写的简单进度条控件
地址栏上的一段语句,改变页面的风格。(教程)

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


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