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

2014-10-06  来源:本站原创  分类:javascript技巧  人气:3 

气泡提示框牵扯到的技术有:JS响应鼠标的事件、纯CSS制作三角形,附截图及示例代码,感兴趣的朋友可以参考下

分享一个气泡提示框,练习的技术有:(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>
相关文章
  • JS+CSS实现一个气泡提示框 2014-10-06

    气泡提示框牵扯到的技术有:JS响应鼠标的事件.纯CSS制作三角形,附截图及示例代码,感兴趣的朋友可以参考下 分享一个气泡提示框,练习的技术有:(1)JS响应鼠标的事件:(2)纯CSS制作三角形. 效果这样: 这是html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>气泡对话框</title> <script src="my

  • 分享一个纯CSS开发的气泡式提示框 2012-04-12

    日期:2012-4-11 来源:GBin1.com 在线演示 在线调试 本地下载 作为前端开发人员,我们都熟悉使用CSS来生成页面上丰富的样式,对于边框border属性来说,也是我们最熟悉不过的CSS属性,今天我们这里将介绍如何使用纯CSS来生成一个气泡式样的提示框,希望大家喜欢! 在这篇文章中我们将使用:after伪标签来生成提示框的指示箭头. 首先我们定义提示框相关属性,我们添加了box阴影和文字阴影效果,这样让提示框更加漂亮: /* bubble */ .tip-bubble { posi

  • JS+CSS实现仿新浪微博搜索框的方法 2014-06-03

    这篇文章主要介绍了JS+CSS实现仿新浪微博搜索框的方法,实例分析了javascript针对搜索框样式的控制技巧,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了JS+CSS实现仿新浪微博搜索框的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transit

  • jquery.cvtooltip.js 基于jquery的气泡提示插件 2014-02-13

    显示气泡提示的前提是,一定会有一个被提示的对象,默认的位置是根据body来计算的,这样的坏处就是如果页面内容发生了变化,而气泡的位置没有改变,导致提示目的失败. 序 1.插件名cvtooltip中的cv是ChinaValue的首字母缩写,而tooltip就是提示啦. 2.适用于新功能的提示,引导用户的提示,即时类消息的提示,操作失败提示(操作成功了也没人拦着)等等等,使用css实现,不附带任何图片文件. 3.目前发现的问题,在Chorme中表现的不给力,是由于Chrome对页面的解析与IE和FF

  • JS仿百度搜索自动提示框匹配查询功能 2015-02-24

    这篇文章主要介绍了JS输入框模糊匹配查询功能,主要是仿百度搜索自动提示框的功能,大家参考使用吧 1. 添加动态加载css文件 不需要引入css css全部在JS动态生成. 2. 不需要额外的标签 只需要一个input输入框 并且默认指定一个class类名为 "inputElem" 当然也可以自己配置参数 还需要一个当前父级容器增加一个默认类名 parentCls(也可以自己配置),因为输入框匹配值后需要一个隐藏域 所以需要隐藏域增加一个class "hiddenCls&quo

  • 使用css实现全兼容tooltip提示框 2014-05-20

    在上一篇文章中,使用css实现了一个全兼容的三角形图标,这个三角型图标可以使用于多种场景,比如下拉图标.多级菜单等,这篇文章我们使用这个图标通过纯css来实现一个我们常见的tooltip提示框. 最终效果图: 基本原理 先设定一个背景色的普通div盒子,然后使用上篇post得到的三角型图标,把div盒子设置为相对定位模式,三角型图标设置为绝对定位,位置相对于div盒子,调整到合适的位置.这样就得到一个基本的tooltip,但是没有边框看起来总是不舒服,我们可以给div盒子设置一个边框,这没什么难

  • 鼠标放上去触发一个javascript提示框效果代码 2015-01-09

    这个提示框里面有链接文字与图片(icon)出现.而且鼠标能移上去点击这个链接的 感觉要连接没什么意义- 又不能点击 改这里 //s.appendChild(document.createTextNode(t)); 改动 s.innerHTML = t; 简直要把门槛踏烂.不过这些见菩萨就烧香磕头的信徒中,到底知道佛门是怎么回事的,恐怕不多.今天,在下也来道个究竟.">狼跋其胡,载踬其尾.公孙硕肤,赤舄几几. 找到彻底解脱的办法就是一个死字, [Ctrl+A 全选 注:如需引入外部Js需刷新

  • 070823更新的一个[消息提示框]组件 兼容ie7 2014-03-27

    提示:8.23修复了ie 7显示错误的bug,请下载过的朋友重新下载.对此表示抱歉! 更新说明: 2007-08-23 11:50 1.修复了IE7.0下按钮文字错位的BUG(下载源码已经更新,请下载过的朋友重新下载). 2.修改了部分js程序代码.(弹出框的高度只在初始化时进行计算) 2007-08-23 21:30 1.完善了组件简介,原来没有写5-7三个介绍,可能有些朋友也没有注意到.这里补上! ===============================================

  • jquery右下角弹出提示框示例代码 2014-01-08

    右下角弹出提示框想必大家都有见到过吧,其实有实现方法有很多,在本文为大家详细介绍在jquery中具体的实现,感兴趣的朋友可以了解下 <!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/19

  • 分享一个纯CSS在线气泡提示生成工具 - CSS ARROW PLEASE! 2012-04-17

    日期:2012-4-16 来源:GBin1.com 互联网拥有很多免费的工具和应用,几乎可以帮助你实现任何你需要的UI组件和设计,大家还记得上周我们介绍的纯CSS实现的气泡式提示文章吗?今天我们将介绍一个在线的生成气泡式提示的web工具 - CSS ARROW PLEASE,希望大家喜欢! 主要特性 设置气泡提示位置(上下左右) 提示尺寸大小 文字颜色 边框大小和尺寸 边框颜色 自动生成css代码 生成代码 ... 来源:分享一个纯CSS在线气泡提示生成工具 - CSS ARROW PLEASE

  • jquery做的一个简单的屏幕锁定提示框 2014-05-28

    这篇文章主要介绍了使用jquery做的一个简单的屏幕锁定提示框,需要的朋友可以参考下 <!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"> <

  • Js 订制自己的AlertBox(信息提示框) 2015-02-26

    这是一篇译文,实例分析制作自定义的信息提示框的实现代码 本文制作一个用户自定义的AlertBox,效果如图: js文件中插入如下代码: // JScript 文件 // constants to define the title of the alert and button text. var ALERT_TITLE = "Oops!"; var ALERT_BUTTON_TEXT = "Close"; // over-ride the alert method

  • js网页右下角提示框实例 2013-10-21

    这篇文章主要介绍了js网页右下角提示框的实现方法,以实例展示了css样式与HTML布局,以及对应的js显示与关闭提示框等功能,需要的朋友可以参考下 本文实例讲述了js网页右下角提示框的实现方法,分享给大家供大家参考.具体方法如下: html代码部分如下: <style type="text/css"> .messageTip{border-right: #455690 1px solid; border-top: #a6b4cf 1px solid; border-left

  • js实现右下角提示框的方法 2014-07-23

    这篇文章主要介绍了js实现右下角提示框的方法,实例分析了Jquery插件popup.js的具体用法,需要的朋友可以参考下 本文实例讲述了js实现右下角提示框的方法.分享给大家供大家参考.具体实现方法如下: 实现右下角提示框的Jquery插件 (popup.js) //兼容ie6的fixed代码 //jQuery(function($j){ // $j('#pop').positionFixed() //}) (function($j){ $j.positionFixed = function(e

  • 页面右下角弹出提示框示例代码js版 2014-12-28

    右下角弹出提示框想必大家不会陌生吧,本文简单的为大家实现一个,具体代码如下,有需求的朋友可以参考下 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+

  • 浅析新浪微博:以css实现的小三角提示框 2012-05-18

    分析新浪微博就会发现一个有趣的带小三角提示框.先来看下效果图: 仔细查看代码才发现,并不是使用传统做法以图片的background属性实现,而是以两个"◆"菱形字符实现,这个菱形支持 编码有 GBK,gb312,UTF-8等,也可通过转义字符&#9670输入. 实现的原理是:em标签里得◆菱形符号作为外三角边框,而<span>标签里的◆菱形符号正好填充em,当两个菱形符号重叠时,只需调整span里的菱形往下移动1px,那么就能呈现1px的向上三角边框. 由于新浪微博

  • 使Eclipse下支持编写HTML/JS/CSS/JSP页面的自动提示. 2014-07-05

    我们平时用eclipse开发jsp页面时智能提示效果不太理想,今天用了两个小时发现了eclipse也可以像Visual Studio 2008那样完全智能提示HTML/JS/CSS代码,使用eclipse自带的插件,无需另外安装插件,具体步骤如下 1.打开eclipse→Windows→Preferences→Java→Editor→Content Assist 修改Auto Activation triggers for java的值为:zjava 点击apply按钮 如图: 2.继续打开Ja

  • JS+CSS实现实用的单击输入框弹出选择框的方法 2013-10-10

    这篇文章主要介绍了JS+CSS实现实用的单击输入框弹出选择框的方法,实例分析了javascript操作select及button的操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了JS+CSS实现实用的单击输入框弹出选择框的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/

  • JS实现定时页面弹出类似QQ新闻的提示框 2014-02-09

    类似QQ新闻的提示框要求页面每隔半小时弹出一次提示消息,下面有个不错的实现方法,感兴趣的朋友可以参考下 还是在做联通IOM项目时遇到的一个需求,要求页面每隔半小时弹出一次提示消息(消息以类似QQ新闻的形式弹出).当时上网找的这么一个资料,已经不记得原文出处了 <html> <head> <title>JavaScript提示框</title> <script type="text/javascript"> <!-- /*

  • 用html+css+js实现的一个简单的图片切换特效 2014-02-27

    这篇文章主要介绍了用html+css+js实现的一个简单的图片切换特效,需要的朋友可以参考下 如图所示. 该图片切换特效实现很简单,而且兼容性很好. html页面如下 <div class="wrapper"> <div id="focus"> <ul> <li><a href="http://www.lanrentuku.com/" target="_blank">