类百度的小贴士

最新推荐文章于 2024-08-24 22:38:48 发布

ccyingfu

最新推荐文章于 2024-08-24 22:38:48 发布

阅读量105

点赞数

分类专栏： JavaScript 文章标签：百度 IE JavaScript XHTML HTML ViewUI

本文链接：https://blog.csdn.net/ccyingfu/article/details/83648066

版权

JavaScript 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

这是好久以前写的，当时正在学习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>

ccyingfu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
类百度的小贴士

这是好久以前写的，当时正在学习Javascript。看见百度空间里总有一个小贴士的东西，挺好玩的，就把它的的图片都保存下来了，模仿它的样式做的一个东西，项目里有时就能用的上哦，呵呵。虽然代码写的很烂，但还是能用的。如果有人也有这样的需要，可以下来用哈。主要功能就是：可以在页面的某一个元素下显示一个小贴士。[code="javascript"]var Tips = function(...
复制链接

扫一扫

专栏目录