javascript 鼠标悬浮图片显示原图 移出鼠标后原图消失(多图)
2009-12-28 00:00
1011 查看
具体用法是这样的:
将Javascript代码放到</body>前(将脚本代码放在页面底端有助于提高页面速度,但是我现在还没有切身的体会)
下面是HTML代码:
上面这个代码没有控制原图出现的位置,如果涉及到靠近窗口边缘的位置的话会用到offsetLeft等属性。
仔细想想,其实这个也蛮简单的。写Javascript的需要多多注意细节,这个实在是太重要了,一不小心就会出错,最糟糕的是不知道错在哪里。
将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
- 鼠标悬浮到表格的单元格上,将弹出一个框,框中显示这个单元格的内容。框失去焦点,框也消失。利用jQuery+javascript写的。
- 鼠标放到超链接上有图片悬浮显示出来离开则消失
- 鼠标放到超链接上有图片悬浮显示出来离开则消失
- 鼠标悬浮到表格的单元格上,将弹出一个框,框中显示这个单元格的内容。框失去焦点,框也消失。利用jQuery+javascript写的。
- JavaScript实现文本框中默认显示背景图片在获得焦点后消失的方法
- 一张图片由A、B两部分组成,当鼠标移动上去时显示B部分,当鼠标移出时显示A部分。
- JavaScript实现文本框中默认显示背景图片在获得焦点后消失的方法
- html+css鼠标悬浮显示图片
- css 实现新闻列表鼠标悬浮时显示图片和内容简介
- 鼠标移到行上显示,移出消失效果
- Qt 实现被鼠标悬浮的图片放大显示
- 一天JavaScript示例-点击图片显示大图片添加鼠标
- easyUI中datagrid鼠标悬浮列上显示对应图片
- js实现鼠标的移入移出控制图片的明暗显示
- 鼠标悬浮移出控制div的显示与隐藏
- 在做商品列表的时候,鼠标触到在每一行的特定位置上,就会显示该商品的图片,移开则消失
- [javascript]鼠标滑过列表文字显示图片及详细信息