Chinaunix首页 | 论坛 | 博客

一往情深的网事ewayfly.blog.chinaunix.net

首页　| 　博文目录　| 　关于我

ewayfly

  • 博客访问： 460490
  • 博文数量： 141
  • 博客积分： 211
  • 博客等级： 入伍新兵
  • 技术积分： 1049
  • 用 户 组： 普通用户
  • 注册时间： 2010-09-17 16:25
个人简介

如此经年，望尽千帆。

文章分类

全部博文（141）

文章存档

2014年（73）

2013年（65）

2012年（3）

我的朋友
最近访客
推荐博文
JS+CSS实现的气泡提示框代码

分类： JavaScript

2013-08-19 15:43:22

气泡提示框牵扯到的技术有：JS响应鼠标的事件、纯CSS制作三角形。
 
气泡提示框，练习的技术有：（1）JS响应鼠标的事件；（2）纯CSS制作三角形。 

1，html： 

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>气泡对话框-www.jbxue.com</title>
  6. <script src="myBubbleTooltip.js"></script>
  7. <script src=""></script>
  8. <style type="text/css">
  9. h1{
  10. font-size: 60px;
  11. margin-top: 0;
  12. font-family: Arial, sans-serif;
  13. text-shadow: 2px 0px 10px #292929;
  14. letter-spacing: 0px;
  15. text-decoration: none;
  16. color: #DDDDDD;
  17. }
  18. div#left{
  19. border: 1px solid #CCCCCC;
  20. width: 200px;
  21. height: 300px;
  22. background-color: #EEEEEE;
  23. float: left;
  24. margin: 0 0 0 20px;
  25. }
  26. div#content{
  27. border: 1px solid #CCCCCC;
  28. width: 600px;
  29. height: 300px;
  30. background-color: #EEEEEE;
  31. float: left;
  32. margin: 0px 20px;
  33. }
  34. div#editor{
  35. border: 1px solid #CCCCCC;
  36. float: left;
  37. width: 300px;
  38. height: 300px;
  39. }
  40. div#test{
  41. border: 2px solid #cccccc;
  42. width: 400px;
  43. height: 400px;
  44. }
  45. .bubble_tooltip_common{
  46. z-index: 1;
  47. color:#333333;
  48. width:150px;
  49. position:absolute;
  50. display:none;
  51. border: 1px solid #AAAAAA;
  52. box-shadow: 0px 0px 10px #AAAAAA;
  53. border-radius: 5px;
  54. padding: 5px 10px;
  55. background-color: #FEFAB8;
  56. }
2，css代码

  1. /*尖端指向左侧的三角形，外缘*/
  2. .triRight{
  3. z-index: 2;
  4. border: 10px solid #AAAAAA;
  5. border-color: transparent #AAAAAA transparent transparent;
  6. width: 0;
  7. height: 0;
  8. position: absolute;
  9. left:-20px;
  10. top: 5px;
  11. }
3，气泡效果部分
  1. <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>
  2. 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>
  3. <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()">jbxue.com</a></p>
  4. </div> <div id="editor" contenteditable> [Click to edit.] </div></body></html>
  5. <PRE></PRE>
  6. <P></P>
  7. <P><SPAN style="FONT-FAMILY: Microsoft YaHei; FONT-SIZE: 18px"><STRONG>这是JavaScript代码：</STRONG></SPAN></P>
  8. <P></P>
  9. <PRE class=javascript name="code">function showToolTip(e,text){
  10. if(document.all)e = event;
  11. var obj = document.getElementById('bubble_tooltip');
  12. var obj2 = document.getElementById('bubble_tooltip_content');
  13. obj2.innerHTML = text;
  14. var st = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
  15. if(navigator.userAgent.toLowerCase().indexOf('safari')>=0)st=0;
  16. var leftPos = e.clientX + 20; //clientX 事件属性返回当事件被触发时鼠标指针相对于浏览器页面（或客户区）的水平坐标
  17. if(leftPos<0)leftPos = 0;
  18. obj.style.left = leftPos + 'px';
  19. obj.style.top = e.clientY + st + 'px';
  20. obj.style.display = 'block';
  21. fadeIn(obj,5,100);
  22. }


  25. function hideToolTip()
  26. {
  27. var obj = document.getElementById('bubble_tooltip');
  28. //obj.style.display = 'none';
  29. fadeOut(obj,5,0);
  30. }


  33. //设置元素透明度,透明度值按IE规则计,即0~100
  34. function SetOpacity(ev, v){
  35. ev.filters ? ev.style.filter = 'alpha(opacity=' + v + ')' : ev.style.opacity = v / 100;
  36. }


  39. //淡入效果(含淡入到指定透明度)
  40. function fadeIn(elem, speed, opacity){
  41. /*
  42. * 参数说明
  43. * elem==>需要淡入的元素
  44. * speed==>淡入速度,正整数(可选)
  45. * opacity==>淡入到指定的透明度,0~100(可选)
  46. */
  47. speed = speed || 20;
  48. opacity = opacity || 100;
  49. //显示元素,并将元素值为0透明度(不可见)
  50. elem.style.display = 'block';
  51. SetOpacity(elem, 0);
  52. //初始化透明度变化值为0
  53. var val = 0;
  54. //循环将透明值以2递增,即淡入效果
  55. (function(){
  56. SetOpacity(elem, val);
  57. val += 5;
  58. if (val <= opacity) {
  59. setTimeout(arguments.callee, speed)
  60. }
  61. })();
  62. }


  65. //淡出效果(含淡出到指定透明度)
  66. function fadeOut(elem, speed, opacity){
  67. /*
  68. * 参数说明
  69. * elem==>需要淡入的元素
  70. * speed==>淡入速度,正整数(可选)
  71. * opacity==>淡入到指定的透明度,0~100(可选)
  72. */
  73. speed = speed || 20;
  74. opacity = opacity || 0;
  75. //初始化透明度变化值为0
  76. var val = 100;
  77. //循环将透明值以5递减,即淡出效果
  78. (function(){
  79. SetOpacity(elem, val);
  80. val -= 5;
  81. if (val >= opacity) {
  82. setTimeout(arguments.callee, speed);
  83. }else if (val < 0) {
  84. //元素透明度为0后隐藏元素
  85. elem.style.display = 'none';
  86. }
  87. })();
  88. }</PRE><BR>
  89. <BR>
  90. <P></P>
  91. <PRE></PRE>
阅读(2009) | 评论(0) | 转发(0) |
0

上一篇：JavaScript生成GUID的多种算法

下一篇：利用批处理结合winrar轻松压缩文件

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6