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 相关文章推荐
鼠标滑上去后图片放大浮出效果的js代码
May 28 Javascript
jquery.cookie() 方法的使用(读取、写入、删除)
Dec 05 Javascript
jQuery插件开发的两种方法及$.fn.extend的详解
Jan 16 Javascript
node.js中的fs.mkdirSync方法使用说明
Dec 17 Javascript
jQuery实现表格颜色交替显示的方法
Mar 09 Javascript
详解AngularJS中的表格使用
Jun 16 Javascript
jQuery实现简易的天天爱消除小游戏
Oct 16 Javascript
原生JS实现垂直手风琴效果
Feb 19 Javascript
浅析Node.js非对称加密方法
Jan 29 Javascript
vue2.0 elementUI制作面包屑导航栏
Feb 22 Javascript
详解Vue CLI3配置之filenameHashing使用和源码设计使用和源码设计
Aug 31 Javascript
jQuery+PHP实现上传裁剪图片
Jun 29 jQuery
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
一些花式咖啡的配方
2021/03/03 冲泡冲煮
解析在zend Farmework下如何创立一个FORM表单
2013/06/28 PHP
PHP SPL标准库之SplFixedArray使用实例
2015/05/12 PHP
php实现支持中文的文件下载功能示例
2017/08/30 PHP
yii2.0框架使用 beforeAction 防非法登陆的方法分析
2019/09/11 PHP
为数据添加append,remove功能
2006/10/03 Javascript
JavaScript中Math对象方法使用概述
2014/01/02 Javascript
如何正确使用javascript 来进行我们的程序开发
2014/06/23 Javascript
jQuery中get和post方法传值测试及注意事项
2014/08/08 Javascript
javascript抽象工厂模式详细说明
2014/12/16 Javascript
基于JavaScript实现在新的tab页打开url
2016/08/04 Javascript
bootstrap Table的一些小操作
2017/11/01 Javascript
React Native react-navigation 导航使用详解
2017/12/01 Javascript
实例分析js事件循环机制
2017/12/13 Javascript
js获取html页面代码中图片地址的实现代码
2018/03/05 Javascript
详解Vue 如何监听Array的变化
2019/06/06 Javascript
Layui 带多选框表格监听事件以及按钮自动点击写法实例
2019/09/02 Javascript
ElementUI Tree 树形控件的使用并给节点添加图标
2020/02/27 Javascript
微信小程序scroll-view隐藏滚动条的方法详解
2020/03/25 Javascript
使用Python发送邮件附件以定时备份MySQL的教程
2015/04/25 Python
Python获取linux主机ip的简单实现方法
2016/04/18 Python
利用pyuic5将ui文件转换为py文件的方法
2019/06/19 Python
解决jupyter运行pyqt代码内核重启的问题
2020/04/16 Python
国际礼品店:GiftsnIdeas
2018/05/03 全球购物
Shopee越南:东南亚与台湾电商平台
2019/02/03 全球购物
教师节活动主持词
2014/04/02 职场文书
大四毕业生自荐书
2014/07/05 职场文书
实现中国梦思想汇报2014
2014/09/13 职场文书
2014年优质护理服务工作总结
2014/11/14 职场文书
邀请函格式范文
2015/02/02 职场文书
2015年社区精神文明工作总结
2015/05/26 职场文书
校长新学期致辞
2015/07/30 职场文书
银行工作心得体会范文
2016/01/23 职场文书
演讲稿:态度决定一切
2019/04/02 职场文书
2019生态环境保护倡议书!
2019/07/03 职场文书
Python之Matplotlib绘制热力图和面积图
2022/04/13 Python