给出一个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" />&nbsp; <span>'+arg[0]+'</span></p></div>';
}
Tip(
"ni hao");
</script>
</body>
</html>

 

 

 

遇到的问题如下
1. ie6 是不兼容 position:fixed 的. 没错,开始的时候, 我也想利用 ie的特性 ,用 expression 算了. 可是后来发现,用了exprssion ,到了后面就比较难处理了,所以结果是用的setInterval 来模拟一直置顶的效果,但是,没有其他浏览器的 position:fixed 那样的效果来得漂亮与实在.
2. 显示部分的问题. 这个不算大问题, 主要是一些延时会有处理, 解决起来相对容易一点.

posted on 2010-06-22 11:49  Hehe123  阅读(282)  评论(0编辑  收藏  举报