JS+CSS实现一个气泡提示框


Posted in Javascript onAugust 18, 2013

分享一个气泡提示框,练习的技术有:(1)JS响应鼠标的事件;(2)纯CSS制作三角形。

效果这样:
JS+CSS实现一个气泡提示框 
这是html:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>气泡对话框</title> 
<script src="myBubbleTooltip.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> 
<style type="text/css"> 
h1{ 
font-size: 60px; 
margin-top: 0; 
font-family: Arial, sans-serif; 
text-shadow: 2px 0px 10px #292929; 
letter-spacing: 0px; 
text-decoration: none; 
color: #DDDDDD; 
} 
div#left{ 
border: 1px solid #CCCCCC; 
width: 200px; 
height: 300px; 
background-color: #EEEEEE; 
float: left; 
margin: 0 0 0 20px; 
} 
div#content{ 
border: 1px solid #CCCCCC; 
width: 600px; 
height: 300px; 
background-color: #EEEEEE; 
float: left; 
margin: 0px 20px; 
} 
div#editor{ 
border: 1px solid #CCCCCC; 
float: left; 
width: 300px; 
height: 300px; 
} 
div#test{ 
border: 2px solid #cccccc; 
width: 400px; 
height: 400px; 
} 
.bubble_tooltip_common{ 
z-index: 1; 
color:#333333; 
width:150px; 
position:absolute; 
display:none; 
border: 1px solid #AAAAAA; 
box-shadow: 0px 0px 10px #AAAAAA; 
border-radius: 5px; 
padding: 5px 10px; 
background-color: #FEFAB8; 
}

/*尖端指向左侧的三角形,外缘*/ 
.triRight{ 
z-index: 2; 
border: 10px solid #AAAAAA; 
border-color: transparent #AAAAAA transparent transparent; 
width: 0; 
height: 0; 
position: absolute; 
left:-20px; 
top: 5px; 
}

<PRE class=html name="code">/*尖端指向左侧的三角形,内部,*/</PRE>.triRightInner{ z-index: 3; border: 8px solid #FEFAB8; border-color: transparent #FEFAB8 transparent transparent;<SPAN style="FONT-FAMILY: Arial, Helvetica, sans-serif">/*颜色应与提示框的background-color一致*/</SPAN><BR> 
width: 0; height: 0; position: absolute; left:-16px; top:7px;}</style></head><body> <div class="bubble_tooltip_common" id="bubble_tooltip"> <label class="triRight"></label> <label class="triRightInner"></label> <span id="bubble_tooltip_content"></span> </div> 
<h1>气泡对话框</h1> <div id="left"> <p> <span onmouseover="showToolTip(event,'这是一个提示框。')" onmouseout="hideToolTip()">鼠标放于此处,会弹出一个气泡对话框。</span></p> </div> <div id="content"> <p><a href="#" onmouseover="showToolTip(event,'This is the content of the tooltip.')" onmouseout="hideToolTip()">sharejs.com</a></p> 
</div> <div id="editor" contenteditable> [Click to edit.] </div></body></html> 
<PRE></PRE> 
<P></P> 
<P><SPAN style="FONT-FAMILY: Microsoft YaHei; FONT-SIZE: 18px"><STRONG>这是JavaScript代码:</STRONG></SPAN></P> 
<P></P> 
<PRE class=javascript name="code">function showToolTip(e,text){ 
if(document.all)e = event; 
var obj = document.getElementById('bubble_tooltip'); 
var obj2 = document.getElementById('bubble_tooltip_content'); 
obj2.innerHTML = text; 
var st = Math.max(document.body.scrollTop,document.documentElement.scrollTop); 
if(navigator.userAgent.toLowerCase().indexOf('safari')>=0)st=0; 
var leftPos = e.clientX + 20; //clientX 事件属性返回当事件被触发时鼠标指针相对于浏览器页面(或客户区)的水平坐标 
if(leftPos<0)leftPos = 0; 
obj.style.left = leftPos + 'px'; 
obj.style.top = e.clientY + st + 'px'; 
obj.style.display = 'block'; 
fadeIn(obj,5,100); 
} function hideToolTip() 
{ 
var obj = document.getElementById('bubble_tooltip'); 
//obj.style.display = 'none'; 
fadeOut(obj,5,0); 
} 
//设置元素透明度,透明度值按IE规则计,即0~100 
function SetOpacity(ev, v){ 
ev.filters ? ev.style.filter = 'alpha(opacity=' + v + ')' : ev.style.opacity = v / 100; 
} 
//淡入效果(含淡入到指定透明度) 
function fadeIn(elem, speed, opacity){ 
/* 
* 参数说明 
* elem==>需要淡入的元素 
* speed==>淡入速度,正整数(可选) 
* opacity==>淡入到指定的透明度,0~100(可选) 
*/ 
speed = speed || 20; 
opacity = opacity || 100; 
//显示元素,并将元素值为0透明度(不可见) 
elem.style.display = 'block'; 
SetOpacity(elem, 0); 
//初始化透明度变化值为0 
var val = 0; 
//循环将透明值以2递增,即淡入效果 
(function(){ 
SetOpacity(elem, val); 
val += 5; 
if (val <= opacity) { 
setTimeout(arguments.callee, speed) 
} 
})(); 
} 
//淡出效果(含淡出到指定透明度) 
function fadeOut(elem, speed, opacity){ 
/* 
* 参数说明 
* elem==>需要淡入的元素 
* speed==>淡入速度,正整数(可选) 
* opacity==>淡入到指定的透明度,0~100(可选) 
*/ 
speed = speed || 20; 
opacity = opacity || 0; 
//初始化透明度变化值为0 
var val = 100; 
//循环将透明值以5递减,即淡出效果 
(function(){ 
SetOpacity(elem, val); 
val -= 5; 
if (val >= opacity) { 
setTimeout(arguments.callee, speed); 
}else if (val < 0) { 
//元素透明度为0后隐藏元素 
elem.style.display = 'none'; 
} 
})(); 
}</PRE><BR> 
<BR> 
<P></P> 
<PRE></PRE>
Javascript 相关文章推荐
Prototype 工具函数 学习
Jul 23 Javascript
js数字转换为float,取N位小数
Feb 08 Javascript
js获取input长度并根据页面宽度设置其大小及居中对齐
Aug 22 Javascript
小议JavaScript中Generator和Iterator的使用
Jul 29 Javascript
JavaScript的React框架中的JSX语法学习入门教程
Mar 05 Javascript
jQuery简单验证上传文件大小及类型的方法
Jun 02 Javascript
JS实现上传图片实时预览功能
May 22 Javascript
关于javascript sort()排序你可能忽略的一点理解
Jul 18 Javascript
浅谈react.js中实现tab吸顶效果的问题
Sep 06 Javascript
详解VUE-地区选择器(V-Distpicker)组件使用心得
May 07 Javascript
解决layui checkbox 提交多个值的问题
Sep 02 Javascript
Node对CommonJS的模块规范
Nov 06 Javascript
JS中for循序中延迟加载动态效果的具体实现
Aug 18 #Javascript
js实现动态添加、删除行、onkeyup表格求和示例
Aug 18 #Javascript
JS通过相同的name进行表格求和代码
Aug 18 #Javascript
复选框全选与全不选操作实现思路
Aug 18 #Javascript
将文本输入框内容加入表中的js代码
Aug 18 #Javascript
js css后面所带参数含义介绍
Aug 18 #Javascript
Javascript获取HTML静态页面参数传递值示例
Aug 18 #Javascript
You might like
PHP 存储文本换行实现方法
2010/01/05 PHP
Windows和Linux中php代码调试工具Xdebug的安装与配置详解
2014/05/08 PHP
php array_values 返回数组的值实例详解
2016/11/17 PHP
PHP自带方法验证邮箱、URL、IP是否合法的函数
2016/12/08 PHP
php面向对象之反射功能与用法分析
2017/03/29 PHP
PHP中Cookie的使用详解(简单易懂)
2017/04/28 PHP
基于ThinkPHP删除目录及目录文件函数
2020/10/28 PHP
页面调用单个swf文件,嵌套出多个方法。
2011/11/21 Javascript
JavaScript中常用的运算符小结
2012/01/18 Javascript
jquery 漂亮的删除确认和提交无刷新删除示例
2013/11/13 Javascript
JS实现5秒钟自动封锁div层的方法
2015/02/20 Javascript
微信禁止下拉查看URL的处理方法
2017/09/28 Javascript
vue实现引入本地json的方法分析
2018/07/12 Javascript
vue首次赋值不触发watch的解决方法
2018/09/11 Javascript
在小程序中使用canvas的方法示例
2018/09/17 Javascript
基于vue中keep-alive缓存问题的解决方法
2018/09/21 Javascript
webpack 开发和生产并行设置的方法
2018/11/08 Javascript
vue $set 给数据赋值的实例
2019/11/09 Javascript
JavaScript 实现下雪特效的示例代码
2020/09/09 Javascript
使用Python中的tkinter模块作图的方法
2017/02/07 Python
Python正则表达式教程之二:捕获篇
2017/03/02 Python
python版简单工厂模式
2017/10/16 Python
Python编程实现的简单神经网络算法示例
2018/01/26 Python
解决Python一行输出不显示的问题
2018/12/03 Python
Python实现高斯函数的三维显示方法
2018/12/29 Python
用Python徒手撸一个股票回测框架搭建【推荐】
2019/08/05 Python
Python如何用filter函数筛选数据
2020/03/05 Python
python将dict中的unicode打印成中文实例
2020/05/11 Python
Java byte数组操纵方式代码实例解析
2020/07/22 Python
python opencv实现简易画图板
2020/08/27 Python
python 将Excel转Word的示例
2021/03/02 Python
信访工作者先进事迹
2014/01/17 职场文书
2014年大学教师工作总结
2014/12/02 职场文书
安全先进班组材料
2014/12/26 职场文书
傲慢与偏见读书笔记
2015/06/29 职场文书
劳务派遣管理制度(样本)
2019/08/23 职场文书