- 最后登录
- 2013-7-18
- 注册时间
- 2011-7-16
- 阅读权限
- 70
- 积分
- 3247
 
- 纳金币
- 324742
- 精华
- 0
|
JS实现图片的提示效果，类似于alt的提示文字，只不过这里是在图片的右侧一个“方框”中给出的说明，比较个性的东西，大家看看用在哪里比较好吧。
代码演示：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>简洁实用的图片文字说明效果</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
#oimg{float:left;margin:10px;}
#msg{border:solid;width:200px;height:90px;display:none;float:left;padding:10px;}
</style>
</head>
<body>
<img id="oimg" src="/uploads/common/images/wall_s6.jpg">
<div id="msg">欢迎访问烈火学院，我们的网址：Veryhuo.COM</div>
<script type="text/javascript">
var oid=document.getElementById('oimg');
var omsg=document.getElementById('msg');
var timer=null;
oid.onmousemove=showMsg;
oid.onmouseout=hideMsg;
omsg.onmouseout=hideMsg;
omsg.onmousemove=function(){clearTimeout(timer)};
function showMsg(){if(timer){clearTimeout(timer)}omsg.style.display='block';}
function hideMsg(){timer=setTimeout(function(){omsg.style.display='none';},500);}
</script>
</body>
</html><div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>
文章源自：烈火网，原文：http://www.veryhuo.com/a/view/43399.html
|
|
发表于 2011-12-30 19:14:29
QQ好友和群
腾讯微博
腾讯朋友
微信
转播
淘帖
收藏
支持
反对