网页关键词tooltip解释 实现技术
tooltip.jsp文件：
代码
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>tooltips</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" language="javascript" charset="utf-8" src="tooltip.js"></script>
</head>
<script type="text/javascript">
//封装的tooltip
</script>
<body>
<br><br><br><br>放假啊得三路口<u class="hotspot" onmouseover=display(this); onmouseout=tooltip.hide();>附近放</u>假阿喀琉斯<u class="hotspot" onmouseover=display(this); onmouseout=tooltip.hide();>测试</u>
年份是附近啊浪费骄傲的发掘的烦恼的发快睡觉大类飞<u class="hotspot" onmouseover="display(this);" onmouseout="tooltip.hide();">测试222</u>
<hr>
<input type="button" onclick="handle();" value="test"/>
</body>
</html>
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>tooltips</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" language="javascript" charset="utf-8" src="tooltip.js"></script>
</head>
<script type="text/javascript">
//封装的tooltip
</script>
<body>
<br><br><br><br>放假啊得三路口<u class="hotspot" onmouseover=display(this); onmouseout=tooltip.hide();>附近放</u>假阿喀琉斯<u class="hotspot" onmouseover=display(this); onmouseout=tooltip.hide();>测试</u>
年份是附近啊浪费骄傲的发掘的烦恼的发快睡觉大类飞<u class="hotspot" onmouseover="display(this);" onmouseout="tooltip.hide();">测试222</u>
<hr>
<input type="button" onclick="handle();" value="test"/>
</body>
</html>
style.css
代码
/*tooltip样式定义*/
#text {margin:50px auto; width:500px}
.hotspot {color:#900; padding-bottom:1px; border-bottom:1px #900; cursor:pointer}
#tt {position:absolute; display:block; background:url(images/tt_left.gif) top left no-repeat}
#tttop {display:block; height:5px; margin-left:5px; overflow:hidden}
#ttcont {display:block; padding:2px 12px 3px 7px; margin-left:5px; background:#BBB; color:#111}
#ttbot {display:block; height:5px; margin-left:5px; overflow:hidden}
tootip.js文件：
代码
var tooltip=function(){
var id = 'tt';//tooltip的id#tt
var top = 3;
var left = 3;
var maxw = 300;
var speed = 10;
var timer = 20;//定时间隔20ms
var endalpha = 95;//最终不透明度95%
var alpha = 0;//不透明度
var tt,t,c,b,h;
var ie = document.all ? true : false;
return {
show:function(v,w){
if(tt == null){
tt = document.createElement('div');
tt.setAttribute('id',id);//设置创建的div的id属性
t = document.createElement('div');
t.setAttribute('id',id + 'top');//#tttop
c = document.createElement('div');
c.setAttribute('id',id + 'cont');//内容部分#ttcont
b = document.createElement('div');
b.setAttribute('id',id + 'bot');//底部#ttbot
tt.appendChild(t);
tt.appendChild(c);
tt.appendChild(b);
//生成形式如下:
/*
<div id="tt">
<div id="tttop"></div>
<div id="ttcont"></div>
<div id="ttbot"></div>
</div>
*/
document.body.appendChild(tt);
tt.style.opacity = 0;//对于火狐等用css属性设置不透明度
tt.style.filter = 'alpha(opacity=0)';//对于ie使用滤镜
document.onmousemove = this.pos;
}
tt.style.display = 'block';
c.innerHTML = v;//v为要显示的html内容
tt.style.width = w ? w + 'px' : 'auto';
if(!w && ie){
t.style.display = 'none';
b.style.display = 'none';
tt.style.width = tt.offsetWidth;
t.style.display = 'block';
b.style.display = 'block';
}
if(tt.offsetWidth > maxw){tt.style.width = maxw + 'px'}
h = parseInt(tt.offsetHeight) + top;
clearInterval(tt.timer);
tt.timer = setInterval(function(){tooltip.fade(1)},timer);//返回值可以作为定时ID,清理时使用
},//显示方法
pos:function(e){
var u = ie ? event.clientY + document.documentElement.scrollTop : e.pageY;
var l = ie ? event.clientX + document.documentElement.scrollLeft : e.pageX;
tt.style.top = (u - h) + 'px';
tt.style.left = (l + left) + 'px';
},
fade:function(d){
var a = alpha;
if((a != endalpha && d == 1) || (a != 0 && d == -1)){
var i = speed;
if(endalpha - a < speed && d == 1){
i = endalpha - a;
}else if(alpha < speed && d == -1){
i = a;
}
alpha = a + (i * d);
tt.style.opacity = alpha * .01;
tt.style.filter = 'alpha(opacity=' + alpha + ')';
}else{
clearInterval(tt.timer);//清除定时
if(d == -1){tt.style.display = 'none'}//如果是隐藏则设置display
}
},
hide:function(){
if(t !=null){
clearInterval(tt.timer);
tt.timer = setInterval(function(){tooltip.fade(-1)},timer);
}
}//隐藏方法
};//返回一个对象
}();
//=================================
var xmlHttp;
//创建XMLHttpRequest对象
function createXmlHttp() {
//根据window.XMLHttpRequest对象是否存在使用不同的创建方式
if (window.XMLHttpRequest) {
//FireFox、Opera等浏览器支持的创建方式
xmlHttp = new XMLHttpRequest();
} else {
//IE浏览器支持的创建方式
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
function handle() {
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
var value = xmlHttp.responseText;
// alert(tooltips);
if(value !="")
tooltip.show(value);
}
}
}
function display(object){
var key = object.innerHTML;
createXmlHttp();
xmlHttp.onreadystatechange = handle;
url = "tooltipDisplayAction.te?key=" + encodeURIComponent(key);
xmlHttp.open("POST", url, true);
xmlHttp.send(null);
}
var id = 'tt';//tooltip的id#tt
var top = 3;
var left = 3;
var maxw = 300;
var speed = 10;
var timer = 20;//定时间隔20ms
var endalpha = 95;//最终不透明度95%
var alpha = 0;//不透明度
var tt,t,c,b,h;
var ie = document.all ? true : false;
return {
show:function(v,w){
if(tt == null){
tt = document.createElement('div');
tt.setAttribute('id',id);//设置创建的div的id属性
t = document.createElement('div');
t.setAttribute('id',id + 'top');//#tttop
c = document.createElement('div');
c.setAttribute('id',id + 'cont');//内容部分#ttcont
b = document.createElement('div');
b.setAttribute('id',id + 'bot');//底部#ttbot
tt.appendChild(t);
tt.appendChild(c);
tt.appendChild(b);
//生成形式如下:
/*
<div id="tt">
<div id="tttop"></div>
<div id="ttcont"></div>
<div id="ttbot"></div>
</div>
*/
document.body.appendChild(tt);
tt.style.opacity = 0;//对于火狐等用css属性设置不透明度
tt.style.filter = 'alpha(opacity=0)';//对于ie使用滤镜
document.onmousemove = this.pos;
}
tt.style.display = 'block';
c.innerHTML = v;//v为要显示的html内容
tt.style.width = w ? w + 'px' : 'auto';
if(!w && ie){
t.style.display = 'none';
b.style.display = 'none';
tt.style.width = tt.offsetWidth;
t.style.display = 'block';
b.style.display = 'block';
}
if(tt.offsetWidth > maxw){tt.style.width = maxw + 'px'}
h = parseInt(tt.offsetHeight) + top;
clearInterval(tt.timer);
tt.timer = setInterval(function(){tooltip.fade(1)},timer);//返回值可以作为定时ID,清理时使用
},//显示方法
pos:function(e){
var u = ie ? event.clientY + document.documentElement.scrollTop : e.pageY;
var l = ie ? event.clientX + document.documentElement.scrollLeft : e.pageX;
tt.style.top = (u - h) + 'px';
tt.style.left = (l + left) + 'px';
},
fade:function(d){
var a = alpha;
if((a != endalpha && d == 1) || (a != 0 && d == -1)){
var i = speed;
if(endalpha - a < speed && d == 1){
i = endalpha - a;
}else if(alpha < speed && d == -1){
i = a;
}
alpha = a + (i * d);
tt.style.opacity = alpha * .01;
tt.style.filter = 'alpha(opacity=' + alpha + ')';
}else{
clearInterval(tt.timer);//清除定时
if(d == -1){tt.style.display = 'none'}//如果是隐藏则设置display
}
},
hide:function(){
if(t !=null){
clearInterval(tt.timer);
tt.timer = setInterval(function(){tooltip.fade(-1)},timer);
}
}//隐藏方法
};//返回一个对象
}();
//=================================
var xmlHttp;
//创建XMLHttpRequest对象
function createXmlHttp() {
//根据window.XMLHttpRequest对象是否存在使用不同的创建方式
if (window.XMLHttpRequest) {
//FireFox、Opera等浏览器支持的创建方式
xmlHttp = new XMLHttpRequest();
} else {
//IE浏览器支持的创建方式
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
function handle() {
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
var value = xmlHttp.responseText;
// alert(tooltips);
if(value !="")
tooltip.show(value);
}
}
}
function display(object){
var key = object.innerHTML;
createXmlHttp();
xmlHttp.onreadystatechange = handle;
url = "tooltipDisplayAction.te?key=" + encodeURIComponent(key);
xmlHttp.open("POST", url, true);
xmlHttp.send(null);
}
后台tooltipDisplayAction Struts2
代码
package com.ajdc.tooltip;
import java.io.PrintWriter;
import java.util.Hashtable;
import java.util.Map;
import java.util.Vector;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts2.ServletActionContext;
import org.apache.struts2.interceptor.ServletRequestAware;
import com.sys.CommonBean;
import com.sys.Security;
import com.web.ExtActionSupport;
public class TooltipDisplayAction extends ExtActionSupport implements
ServletRequestAware{
@Override
public String execute() throws Exception {HttpServletResponse response = ServletActionContext.getResponse();
HttpServletRequest request = ServletActionContext.getRequest();
String result = "";
request.setCharacterEncoding("UTF-8");
response.setHeader("Content-Type", "text/html;charset=UTF-8");
String key = request.getParameter("key");
key = key.trim();
System.out.println("收到：" + key);
String sql = "select distinct DESCRIPTION from GLOSSARY where KEYWORD like '%"+ key + "%' ";
Vector vect = this.getDao().getDataBySql(sql);
for(int j =0; j< vect.size();j++){
Hashtable hash =(Hashtable)vect.get(j);
result = hash.get("DESCRIPTION").toString();
}
if(vect.size() ==0)
result="暂无解释";
//result="数据库中的 关键词解释";
//System.out.println("结果：" + result);
PrintWriter out = response.getWriter();
out.print(result);
out.flush();
return SUCCESS;
}
}
import java.io.PrintWriter;
import java.util.Hashtable;
import java.util.Map;
import java.util.Vector;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts2.ServletActionContext;
import org.apache.struts2.interceptor.ServletRequestAware;
import com.sys.CommonBean;
import com.sys.Security;
import com.web.ExtActionSupport;
public class TooltipDisplayAction extends ExtActionSupport implements
ServletRequestAware{
@Override
public String execute() throws Exception {HttpServletResponse response = ServletActionContext.getResponse();
HttpServletRequest request = ServletActionContext.getRequest();
String result = "";
request.setCharacterEncoding("UTF-8");
response.setHeader("Content-Type", "text/html;charset=UTF-8");
String key = request.getParameter("key");
key = key.trim();
System.out.println("收到：" + key);
String sql = "select distinct DESCRIPTION from GLOSSARY where KEYWORD like '%"+ key + "%' ";
Vector vect = this.getDao().getDataBySql(sql);
for(int j =0; j< vect.size();j++){
Hashtable hash =(Hashtable)vect.get(j);
result = hash.get("DESCRIPTION").toString();
}
if(vect.size() ==0)
result="暂无解释";
//result="数据库中的 关键词解释";
//System.out.println("结果：" + result);
PrintWriter out = response.getWriter();
out.print(result);
out.flush();
return SUCCESS;
}
}
