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 相关文章推荐
神奇的代码 通杀各种网站-可随意修改复制页面内容
Jul 17 Javascript
基于jquery的横向滚动条(滑动条)
Feb 24 Javascript
让textarea自动调整大小的js代码
Apr 12 Javascript
jquery实现Li滚动时滚动条自动添加样式的方法
Aug 10 Javascript
原生js图片轮播效果实现代码
Oct 19 Javascript
IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法
Oct 25 Javascript
JS IOS/iPhone的Safari浏览器不兼容Javascript中的Date()问题如何解决
Nov 11 Javascript
Vue2.2.0+新特性整理及注意事项
Aug 22 Javascript
koa+mongoose实现简单增删改查接口的示例代码
May 13 Javascript
小程序使用wxs解决wxml保留2位小数问题
Dec 13 Javascript
jquery实现图片无缝滚动 蒙版遮蔽效果
Jan 11 jQuery
JQuery复选框全选效果如何实现
May 08 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
php 破解防盗链图片函数
2008/12/09 PHP
Memcache 在PHP中的使用技巧
2010/02/08 PHP
php跨域cookie共享使用方法
2014/02/20 PHP
PHP常用字符串函数小结(推荐)
2018/08/05 PHP
js 替换
2008/02/19 Javascript
javascript+xml技术实现分页浏览
2008/07/27 Javascript
基于编写jQuery的无缝滚动插件
2014/08/02 Javascript
jQuery中innerWidth()方法用法实例
2015/01/19 Javascript
jQuery页面刷新(局部、全部)问题分析
2016/01/09 Javascript
JS设置cookie、读取cookie
2016/02/24 Javascript
require.js配合插件text.js实现最简单的单页应用程序
2016/07/12 Javascript
AngularJS基础 ng-paste 指令简单示例
2016/08/02 Javascript
基于React实现表单数据的添加和删除详解
2017/03/14 Javascript
JS实现按钮添加背景音乐示例代码
2017/10/17 Javascript
基于Vue2的独立构建与运行时构建的差别(详解)
2017/12/06 Javascript
Vue进度条progressbar组件功能
2018/04/17 Javascript
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
2018/08/28 jQuery
详解Webpack-dev-server的proxy用法
2018/09/08 Javascript
js Array.slice的8种不同用法示例
2019/07/10 Javascript
微信小程序中悬浮窗功能的实现代码
2019/08/02 Javascript
vue总线机制(bus)知识点详解
2020/05/10 Javascript
python生成器的使用方法
2013/11/21 Python
对Python中DataFrame按照行遍历的方法
2018/04/08 Python
Python3模拟登录操作实例分析
2019/03/12 Python
python中图像通道分离与合并实例
2020/01/17 Python
jupyter notebook 使用过程中python莫名崩溃的原因及解决方式
2020/04/10 Python
专业销售业务员求职信
2013/11/18 职场文书
水果超市创业计划书
2014/01/27 职场文书
致垒球运动员加油稿
2014/02/16 职场文书
法律进企业活动方案
2014/03/04 职场文书
村干部培训班主持词
2014/03/28 职场文书
竞选学生会主席演讲稿
2014/04/24 职场文书
阳光体育活动总结
2014/04/30 职场文书
小学生感恩父母演讲稿
2014/08/28 职场文书
2014年四风个人对照检查及整改措施
2014/10/28 职场文书
vue 实现上传组件
2021/05/31 Vue.js