给出一个Tip
最近做项目,用到了一个要求,要求修复以前jquery 的一个Tip的兼容问题(真想不到,jquery 也会遇到这个问题啊). 结果自己写了一个
代码
<!DOCTYPE>
<html xmlns="http:www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN" >
<head>
<title>Tip </title>
<style type="text/css">
html,body{margin:0;padding:0;border:0;}
</style>
</head>
<body>
<a href='javascript:Tip("yes");'>yes</a>
123<br />123<br />123<br />123<br />123<br />123<br />123<br />123<br />123<br />
123<br />123<br />123<br />123<br />123<br />123<br />123<br />123<br />123<br />
123<br />123<br />123<br />123<br />123<br />123<br />123<br />123<br />123<br />
123<br />123<br />123<br />123<br />123<br />123<br />123<br />123<br />123<br />
123<br />123<br />123<br />123<br />123<br />123<br />123<br />123<br />123<br />
123<br />123<br />123<br />123<br />123<br />123<br />123<br />123<br />123<br />
<script type="text/javascript">
var TipIE = [,].length == 2,showTip = (function(){
function itemDelay(o,b,e,callback){
var st = +new Date(),p,speed = 350,it = setInterval(function(){
p = (+new Date() - st)/speed;
if(p >= 1) o.style["top"] = e+"px",callback && callback(),clearInterval(it);
o.style["top"] = b + (e - b)*((-Math.cos(Math.PI*p)/2)+0.5)+"px";
},10);
}
return function(){
var d = document,db = d.body,
dd = d.documentElement,o = d.getElementById("tips"),
m = Math,scrH = TipIE ? m.max(dd.scrollTop,db.scrollTop) : 0;
if(!o) return;
o.rTime ound-color: #f5f5f5; color: #000000;">&& clearTimeout(o.rTime);
itemDelay(o,-62,scrH,function(){
o.cTime ound-color: #f5f5f5; color: #000000;">= setInterval(function(){
scrH = TipIE ? m.max(dd.scrollTop,db.scrollTop) : 0,
o.style.top = scrH +"px";
},10),
o.rTime = setTimeout(function(){
clearInterval(o.cTime),
scrH = TipIE ? m.max(dd.scrollTop,db.scrollTop) : 0,
itemDelay(o,scrH,-63,function(){
clearTimeout(o.rTime);
},450)
},3000);
},450);
}
})(),createTip = function(){
var d = document,db = d.body,dd = d.documentElement,o = d.createElement("div");
o.id = "tips",o.innerHTML = "<div></div><div></div>";
var os0 = o.children[0].style,os1 = o.children[1].style;
o.style.cssText = "height:60px;\
width:100%;\
z-index:1020;\
left:0;\
top:-62px;\
overflow:hidden;\
border-bottom:2px red solid;"+(TipIE?"position:absolute;":"position:fixed;");
os0.cssText = "position:absolute;\
left:0;\
top:0;\
z-index:1;\
overflow:hidden;\
width:100%;\
height:60px;\
background:#fff;\
filter:alpha(opacity=70);\
opacity:0.7;",
os1.cssText = "position:absolute;\
left:0;\
top:0;\
z-index:2;\
padding:20px 0 0;\
overflow:hidden;\
width:100%;\
height:40px;\
text-align:center;";
db.appendChild(o);
return o;
}
,Tip = function(){
var arg = arguments,d = document,db = d.body,
dd = d.documentElement,o = d.getElementById("tips");
if(arg.length < 1) return;
if(!o) o = createTip();
o.rtime && clearTimeout(o.rtime);
showTip(),o.children[1].innerHTML = '<p><img src="html/img/loader.gif" alt="Loading..." '+([,].length!=2?'style="margin:-13px 0 0 0;align:middle;"':'')+' align="middle" /> <span>'+arg[0]+'</span></p></div>';
}
Tip("ni hao");
</script>
</body>
</html>
遇到的问题如下
1. ie6 是不兼容 position:fixed 的. 没错,开始的时候, 我也想利用 ie的特性 ,用 expression 算了. 可是后来发现,用了exprssion ,到了后面就比较难处理了,所以结果是用的setInterval 来模拟一直置顶的效果,但是,没有其他浏览器的 position:fixed 那样的效果来得漂亮与实在.
2. 显示部分的问题. 这个不算大问题, 主要是一些延时会有处理, 解决起来相对容易一点.
