文档章节

给网页上的对象加上一个智能说明框

apsaras
 apsaras
发布于 2016/06/20 09:42
字数 609
阅读 6
收藏 0

网页中的对象,如:链接、图片等,如果有说明框的话,将更能引起浏览者的注意。
一般情况下,我们都是用alt或title属性来实现的,这种方法简单,无须编写脚本,但显示时间短,无法自定义样式,且在对象上不能随鼠标的移动而移动,所以常常让设计者感到美中不足。
在这种情况下,我写了一段代码,使用了DIV来代替说明框,使用了自定义属性来代替框中的内容。从效果上大家就可以看出来。这段代码的优越性:
只使用了一个DIV(样式随便定义),哪个对象需显示说明框,无须定义ID,只须定义属性xxx="..."即可(如果...从库内读出,岂不...),通用性、可移植性强...

<script language="JavaScript">
document.onmouseover=function(){showdiv();}//显示DIV
document.onmousemove=function(){if(odiv.style.visibility=='visible') setpos();}//移动DIV
document.onmouseout=function(){odiv.style.visibility='hidden';
}//隐藏DIV
function showdiv() {
 if(event.srcElement.xxx && event.srcElement.xxx!=''){
 setpos();
 odiv.innerText=event.srcElement.xxx;
 odiv.style.visibility='visible';
 }
}
function setpos(){//设置DIV的位置及DIV样式中阴影的方向
 if (odiv.offsetWidth+event.x >= document.body.offsetWidth) {
 odiv.style.left=document.body.scrollLeft+event.x-odiv.offsetWidth;
 x='l';//向左
 }
 else {
 odiv.style.left=document.body.scrollLeft+event.x;
 x='r'//向右
 }
 if (odiv.offsetHeight+event.y+18 >= document.body.offsetHeight) {
 odiv.style.top=document.body.scrollTop+event.y-odiv.offsetHeight;
 y='u';//向上
 }
 else {
 odiv.style.top=document.body.scrollTop+event.y+18;
 y='d';//向下
 }
 if (x+y=='lu') n=-45;//左上
 if (x+y=='ru') n=45;//右上
 if (x+y=='ld') n=-135;//左下
 if (x+y=='rd') n=135;//右下
 odiv.style.filter='progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=' + n + ')';
}
</script>
<body style="cursor:default">
<div id="odiv" style="visibility:hidden;width:250;text-overflow:ellipsis;padding:5 5;border:1px solid #000000;background-color:#FFFFCC;font-size:12px;position:absolute;"></div>
<p style="background:yellow" xxx="这是一段文字
---------------------------------
由于有了自定义属性xxx,所以有了说明框!
注意不同位置下DIV阴影的方向:)">带说明框的文字</p>
<p>文字</p> <p>文字</p>
<a href="" xxx="这是一个超链接
---------------------------------
由于有了自定义属性xxx,所以有了说明框!
注意不同位置下DIV阴影的方向:)">带说明框的超链接</a>
<p>文字</p> <p>文字</p>
<img src="images/logo.gif" border="1" xxx="这是一个图片
---------------------------------
由于有了自定义属性xxx,所以有了说明框!
注意不同位置下DIV阴影的方向:)">
<p>文字</p> <p>文字</p>
<p style="background:yellow" xxx="这是一段文字
---------------------------------
由于有了自定义属性xxx,所以有了说明框!
注意不同位置下DIV阴影的方向:)">带说明框的文字</p>

本文转载自:http://jportal.iteye.com/blog/228293

apsaras
粉丝 8
博文 90
码字总数 0
作品 0
海淀
架构师
私信 提问
【教程】javascript&浏览器对象入门教程

此教程是头一章 估计我以后也不想写什么第二章了 需要的基础知识:javascript语法和常用对象 大神勿喷 上次讲完了封包 这回我们再说说javascript javascript是一种弱类型的客户端脚本语言 在...

apachecn_飞龙
2013/12/05
0
0
界面改进的一些建议,大家都都说说自己的意见。

@俊伶王 看一下: 主页的建议: 参考gooseeker:http://www.gooseeker.com/res/datadiy.html。 我们目前可分两层:1、类别,2、网站-页面 选中一个网页-页面后,自动把样例url输入到url框。然...

josephguan
2017/01/11
1
0
javascript获取document宽高

IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.documentElement.clientWidth ==> 可见区域宽度 document.documentElement.cli......

hchen1982
2012/02/27
105
0
php面试题之二——Javascript(基础部分)

二、JavaScript部分 1. JS 表单弹出对话框函数是?获得输入焦点函数是? 弹出对话框函数:alert(), prompt(), confirm() 获得输入焦点函数:focus() 2. JS 的转向函数是?怎么引入一个外部 JS 文...

chaoluo001
2017/04/25
0
0
几个非常实用的JQuery代码片段

jQuery是一个兼容多浏览器的javascript库,核心理念是write less,do more(写得更少,做得更多)。jQuery使用户能更方便地处理HTML(标准通用标记语言下的一个应用)、events、实现动画效果,并...

IT智云编程
2018/11/03
0
0

没有更多内容

加载失败,请刷新页面

加载更多

SpringBoot中 集成 redisTemplate 对 Redis 的操作(二)

SpringBoot中 集成 redisTemplate 对 Redis 的操作(二) List 类型的操作 1、 向列表左侧添加数据 Long leftPush = redisTemplate.opsForList().leftPush("name", name); 2、 向列表右......

TcWong
今天
5
0