开发者社区> 技术小胖子> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

js实现tooltips

简介:
+关注继续查看
js代码使用的是来自zcool的一段代码,好像是个老外的,可惜没找到地址。
 
script.js:
 
//封装的tooltip 
var tooltip=function(){ 
  var id = 'tt';//tooltip的id#tt 
  var top = 3; 
  var left = 3; 
  var maxw = 300; 
  var speed = 10; 
  var timer = 20;//定时间隔20ms 
  var endalpha = 95;//最终不透明度95% 
  var alpha = 0;//不透明度 
  var tt,t,c,b,h; 
  var ie = document.all ? true : false
  return { 
    show:function(v,w){ 
      if(tt == null){ 
        tt = document.createElement('div'); 
        tt.setAttribute('id',id);//设置创建的div的id属性 
            
        t = document.createElement('div'); 
        t.setAttribute('id',id + 'top');//#tttop 
            
        c = document.createElement('div'); 
        c.setAttribute('id',id + 'cont');//内容部分#ttcont 
         
        b = document.createElement('div'); 
        b.setAttribute('id',id + 'bot');//底部#ttbot 
         
        tt.appendChild(t); 
        tt.appendChild(c); 
        tt.appendChild(b); 
         
        //生成形式如下: 
        /* 
            <div id="tt"> 
              <div id="tttop"></div> 
              <div id="ttcont"></div> 
              <div id="ttbot"></div> 
            </div> 
         */
 
         
        document.body.appendChild(tt); 
        tt.style.opacity = 0;//对于火狐等用css属性设置不透明度 
        tt.style.filter = 'alpha(opacity=0)';//对于ie使用滤镜 
        document. = this.pos; 
      } 
      tt.style.display = 'block'; 
      c.innerHTML = v;//v为要显示的html内容 
      tt.style.width = w ? w + 'px' : 'auto'; 
      if(!w && ie){ 
        t.style.display = 'none'; 
        b.style.display = 'none'; 
        tt.style.width = tt.offsetWidth; 
        t.style.display = 'block'; 
        b.style.display = 'block'; 
      } 
      if(tt.offsetWidth > maxw){tt.style.width = maxw + 'px'} 
      h = parseInt(tt.offsetHeight) + top; 
      clearInterval(tt.timer); 
      tt.timer = setInterval(function(){tooltip.fade(1)},timer);//返回值可以作为定时ID,清理时使用 
    },//显示方法 
        
    pos:function(e){ 
      var u = ie ? event.clientY + document.documentElement.scrollTop : e.pageY; 
      var l = ie ? event.clientX + document.documentElement.scrollLeft : e.pageX; 
      tt.style.top = (u - h) + 'px'; 
      tt.style.left = (l + left) + 'px'; 
    }, 
    fade:function(d){ 
      var a = alpha; 
      if((a != endalpha && d == 1) || (a != 0 && d == -1)){ 
        var i = speed; 
        if(endalpha - a < speed && d == 1){ 
          i = endalpha - a; 
        }else if(alpha < speed && d == -1){ 
          i = a; 
        } 
        alpha = a + (i * d); 
        tt.style.opacity = alpha * .01; 
        tt.style.filter = 'alpha(opacity=' + alpha + ')'; 
      }else
        clearInterval(tt.timer);//清除定时 
        if(d == -1){tt.style.display = 'none'}//如果是隐藏则设置display 
      } 
    }, 
        
    hide:function(){ 
      clearInterval(tt.timer); 
      tt.timer = setInterval(function(){tooltip.fade(-1)},timer); 
    }//隐藏方法 
     
  };//返回一个对象 
}();
 
 
style.css:
 
{margin:0; padding:0} 
html 
{ 
background-color
:#fff
} 
body    
{ 
font
:12px/1.5 Verdana, Arial, Helvetica, sans-serif; 
background-color
:#efefef; 
width
:1000px; 
margin
:0 auto
} 

/*tooltip样式定义*/ 

#text 
{margin:50px auto; width:500px} 
.hotspot 
{color:#900; padding-bottom:1px; border-bottom:1px dotted #900; cursor:pointer} 

#tt 
{position:absolute; display:block; background:url(images/tt_left.gif) top left no-repeat} 
#tttop 
{display:block; height:5px; margin-left:5px; background:url(images/tt_top.gif) top right no-repeat; overflow:hidden} 
#ttcont 
{display:block; padding:2px 12px 3px 7px; margin-left:5px; background:#666; color:#FFF} 
#ttbot 
{display:block; height:5px; margin-left:5px; background:url(images/tt_bottom.gif) top right no-repeat;overflow:hidden} 

/*demo div样式定义*/ 

#divDemo 
{ 
padding
:30px
} 
#divDemo p 
{ 
width
:200px; 
border
:1px solid #efefef; 
background-color
:#fff; 
margin
:0 auto
}
 
 
index.html:
 
<!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"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>JavaScript Tooltips 演示</title> 
<link rel="stylesheet" type="text/css" href="style.css" /> 
</head> 
<body> 
<div id="divDemo"> 
  <p>这里是测试普通文本<span class="hotspot" onmouseover="tooltip.show('测试1 <strong>测试加粗</strong>');" onmouseout="tooltip.hide();">鼠标移上来</span></p> 
  <p> 
    这里测试连接 
    <span    class="hotspot" onmouseover="tooltip.show('<h3>网易</h3><strong>[url]http://www.163.com[/url]</strong>');" onmouseout="tooltip.hide();"> 
    <a href="http://www.163.com">网易</a> 
    </span> 
  </p> 
  <p>测试图片<span class="hotspot" onmouseover="tooltip.show('<img src=\'images/bofu.gif\'/>');" onmouseout="tooltip.hide();">图片</span></p> 
</div> 
<script type="text/javascript" language="javascript" src="script.js"></script> 
</body> 
</html>
 
 
显示:
 




本文转自 xcf007 51CTO博客,原文链接:http://blog.51cto.com/xcf007/107757,如需转载请自行联系原作者



版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
JavaScript中Promises/A+规范的实现
Promises是一种异步编程模型,通过一组API来规范化异步操作,这样也能够让异步操作的流程控制更加容易。
42 0
JavaScript实现二叉树算法
JavaScript实现二叉树算法
18 0
JavaScript深入之call和apply的模拟实现
JavaScript深入系列第十篇,通过call和apply的模拟实现,带你揭开call和apply改变this的真相
47 0
JavaScript深入之bind的模拟实现
JavaScript深入系列第十一篇,通过bind函数的模拟实现,带大家真正了解bind的特性
44 0
JavaScript深入之new的模拟实现
JavaScript深入系列第十二篇,通过new的模拟实现,带大家揭开使用new获得构造函数实例的真相
37 0
JavaScript 专题之从零实现 jQuery 的 extend
JavaScritp 专题系列第七篇,讲解如何从零实现一个 jQuery 的 extend 函数
37 0
JavaScript专题之jQuery通用遍历方法each的实现
JavaScript 专题系列第十一篇,讲解 jQuery 通用遍历方法 each 的实现
48 0
JavaScript闭包(一)——实现
闭包的官方的解释是:一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分。
41 0
多叉树结合JavaScript树形组件实现无限级树形结构(一种构建多级有序树形结构JSON(或XML)数据源的方法)
如何将数据库中的层次数据转换成对应的层次结构的JSON或XML格式的字符串,返回给客户端的JavaScript树形组件?这就是我们要解决的关键技术问题。
254 0
文章
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
编程语言如何演化—— 以 JS 的 private 为例
立即下载
yqdh_58c13162a73...1510469851.pdf
立即下载