<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js提示框制作js文字提示框,js图片提示框,js tooltip文字与图片提示框</title>
<meta name="description" content="js提示框特效制作多种js提示框效果,如js文字提示框,js图片提示框,js tooltip文字与图片提示框。一款很实用的js提示框插件。内含js代码下载。" />
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
body{font:11px/1.5 Verdana, Arial, Helvetica, sans-serif;background:#fff;}
#text{margin:50px auto;width:500px;}
.hotspot{color:#900;padding-bottom:1px;border-bottom:1px dotted #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;background:url(images/tt_top.gif) top right no-repeat;overflow:hidden}
#ttcont{display:block;padding:2px 12px 3px 7px;margin-left:5px;background:#666;color:#FFF}
#ttbot{display:block;height:5px;margin-left:5px;background:url(images/tt_bottom.gif) top right no-repeat;overflow:hidden}
</style>
</head>
<body>
<p id="text">
Lorem ipsum dolor sit amet, <span class="hotspot" onmouseover="tooltip.show('Testing 123 <strong>Testing 123</strong>');" onmouseout="tooltip.hide();">consectetuer adipiscing</span> elit. Aliquam id tellus. Nulla orci enim, vulputate et, pharetra eget, imperdiet non, sem. Mauris sit amet mi nec nulla porttitor dapibus. Curabitur leo sem, lacinia sed, commodo eu, mattis sit amet, felis. Ut tortor. Donec <span class="hotspot" onmouseover="tooltip.show('Testing 123<br />Testing 123');" onmouseout="tooltip.hide();">porttitor orci</span> et neque. Curabitur eget diam at libero egestas suscipit. In tortor est, ullamcorper eu, dapibus et, condimentum nec, nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis vel <span class="hotspot" onmouseover="tooltip.show('<img src=\'images/x_icon.gif\'/>');" onmouseout="tooltip.hide();">purus eget diam</span> aliquam luctus. Nullam risus ipsum, aliquam et, lacinia sit amet, fermentum vel, mi. In hac habitasse platea dictumst. Maecenas et dui non tortor lobortis feugiat. Donec eleifend iaculis arcu. Cras vitae leo nec nunc rhoncus laoreet. Integer eget enim. Nunc <span class="hotspot" onmouseover="tooltip.show('<strong>Lorem ipsum dolor sit amet</strong><br />Consectetuer adipiscing elit. Praesent lacinia, dui ut consequat bibendum, lorem dolor tristique tellus, at faucibus nibh est in orci. In pede.');" onmouseout="tooltip.hide();">dignissim cursus</span> mi. Donec eros.</p>
<script type="text/javascript">
var tooltip=function(){
var id = 'tt';
var top = 3;
var left = 3;
var maxw = 300;
var speed = 10;
var timer = 20;
var endalpha = 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);
t = document.createElement('div');
t.setAttribute('id',id + 'top');
c = document.createElement('div');
c.setAttribute('id',id + 'cont');
b = document.createElement('div');
b.setAttribute('id',id + 'bot');
tt.appendChild(t);
tt.appendChild(c);
tt.appendChild(b);
document.body.appendChild(tt);
tt.style.opacity = 0;
tt.style.filter = 'alpha(opacity=0)';
document.onmousemove = this.pos;
}
tt.style.display = 'block';
c.innerHTML = v;
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);
},
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'}
}
},
hide:function(){
clearInterval(tt.timer);
tt.timer = setInterval(function(){tooltip.fade(-1)},timer);
}
};
}();
</script>
</body>
</html>
纯JS实现鼠标划过时显示提示框
5星 · 超过95%的资源 需积分: 50 79 浏览量
2012-12-27
12:59:59
上传
评论 1
收藏 7KB RAR 举报
冰果_小乙
- 粉丝: 11
- 资源: 26
最新资源
- Integrated-Energy-Systems-with-CAES-(注释完全,可直接运行)
- PDF为英语文本绘制热区(DEMO)
- 4.22.cpp
- 基于Transformer和Bert的close domain抽取式问答系统构建的智能聊天机器人项目源代码
- 基于扩展(EKF)和无迹卡尔曼滤波(UKF)的电力系统动态状态估计(注释完全,可直接运行)(文档加Matlab源码)
- 2023各大软件技术峰会演进资料汇总(PPT),资料难得
- 基于混沌集成决策树的电能质量复合扰动识别(注释完全,可直接运行)(文档加Matlab源码)
- 航空公司如何成功实现数字化转型英文版.rar
- RTL8309N-8口交换机评估板Cadence设计硬件(原理图+PCB)及PDF原理图+RTL8309N技术规格书
- 基于JAVA的打飞机游戏设计(程序).zip
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
- 1
- 2
- 3
- 4
前往页