类百度的小贴士

ccyingfu

浏览: 71266 次
性别:
来自: 长春

最近访客更多访客>>

hao___feng

hunlingv

emmaFeng

x1911

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript

百度 IE JavaScript XHTML HTML

这是好久以前写的，当时正在学习Javascript。看见百度空间里总有一个小贴士的东西，挺好玩的，就把它的的图片都保存下来了，模仿它的样式做的一个东西，项目里有时就能用的上哦，呵呵。虽然代码写的很烂，但还是能用的。如果有人也有这样的需要，可以下来用哈。

主要功能就是：可以在页面的某一个元素下显示一个小贴士。

var Tips = function(){
	    var ie = document.all;
	    function domLocation(node){
	        var left , top , right , bottom;
			left = top = right = bottom = 0;
		    var n = node;
			while (n) { left += n.offsetLeft, top += n.offsetTop; n = n.offsetParent; };
			right = left + node.offsetWidth; bottom = top + node.offsetHeight;
			return {"left":left,"right":right,"top":top,"bottom":bottom,"width":node.offsetWidth,"height":node.offsetHeight}
             }
		function g(id){return "string" == typeof id ? document.getElementById(id) : id}
		function getOpacity(domOpacity){return ie ? parseInt(domOpacity.replace(/[^\d]/ig, "")) : parseFloat(domOpacity);}
		return function(nodeId, options){
		    var dom = g(options.id);
			function show(){
			    if(dom.style["display"] == "block") return;
			    var loc = domLocation(g(nodeId));
                with(dom.style){
			        display = "block";
				    left = loc.left - loc.width/2+"px";
				    top = loc.top + loc.height+"px";
				    ie ? filter = "alpha(opacity=0)" : opacity = ".0";
				}
	            var t = window.setInterval(function(){
				        var opacityNum = 10;
					  var opacity = ie ? getOpacity(dom.style["filter"]) : getOpacity(dom.style["opacity"]) * 100;
					   ie ? dom.style["filter"] = "alpha(opacity="+(opacity+opacityNum)+")" 
						: dom.style["opacity"] = (opacity + opacityNum) / 100;
					   if((ie && opacity > 100) || (!ie && opacity/100 > 0.9 )){
				               if(!ie) dom.style.opacity = "1"
					       window.clearInterval(t);
					   }
		
					},50);
					if(options.show) options.show.call(this);
					return this;
				}
		    function hide(id){
			    g(id).onclick = function(){
			        dom.style.display = "none";
                                 if(options.hide) options.hide.call(this);
				}
				return this;
			}
			return {
			    "show":show,"hide":hide
			}
		}
	}();

<!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>百度Tips</title>
<link type="text/css" rel="stylesheet" href="css/BTips.css" />
<script type="text/javascript" src="BTips.js"></script>
<script type="text/javascript">

   

    var a,b;
    window.onload = function(){
      a = Tips("AA",{id:"tipsWrap",
						show:function(){alert("show1")},
						hide:function(){alert("hide1")}})
	  a.show().hide("close");



      b = Tips("BB",{id:"BBWrap"})
      b.show().hide("BBClose");

    }


	
</script>
</head>

<body>

   <!-- 超链接一 -->
   <div style="margin:100px;width:140px;height:20px;"><a href="#" id="AA" onclick="a.show()">这是一个超链接.....</a></div>
   <!-- 超链接二 -->
   <div style="margin:100px;width:140px;height:20px;"><a href="#" id="BB" onclick="b.show()">这是一个超链接.....</a></div>



   <div class="tipsWrap" id="tipsWrap">
       <div class="top">
           <div class="row"></div>
		   <div class="topLine"></div>
       </div>
       <div class="content">
   	       <div class="inCon">
	           <a class="close" href="javascript:" id="close"></a>
	           <span>
	               这是一个百度的tips 
	           </span>
	       </div>
       </div>
      <div class="bottom"></div>
   </div>


   <div class="tipsWrap" id="BBWrap">
       <div class="top">
           <div class="row"></div>
		   <div class="topLine"></div>
       </div>
       <div class="content">
   	       <div class="inCon">
	           <a class="close" href="javascript:" id="BBClose"></a>
	           <span>
	               这是一个百度的tips 
	           </span>
	       </div>
       </div>
      <div class="bottom"></div>
   </div>

</body>
</html>

baiduTips.rar (8.9 KB)
下载次数: 4

分享到：

UUID生成器_Javascript版 | JavaScript时间

2010-06-26 10:22
浏览 718
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

类百度的小贴士

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

类百度的小贴士

评论

发表评论

相关推荐

AMD研究，组件的动态加载。

代码分行

Date

百度地图

TEST_INEDITOR

浏览器判断

循环添加事件

上下选择

简易向上的滚动

JS中获取各种窗口大小

两点间直线

Dojo类似Jquery操作DOM的方法

多对象inherit

字符串连接和StringBuffer的对比

获得Event对象

根据类名获得元素

UUID生成器_Javascript版

JavaScript时间

禁止IE下右键等功能

call、apply、caller、callee使用方法

最近访客更多访客>>