页面加载完淡入向下掉落 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title> New Document </title> <mce:style type="text/css"><!-- #loadeddiv{ text-align:left; right:10px; bottom:100px; position:fixed;_position:absolute; width:238px;height:83px; border:1px solid #bcbcbc; padding:10px; background:url(/media/images/float_down.png) no-repeat; } --></mce:style><style type="text/css" mce_bogus="1">#loadeddiv{ text-align:left; right:10px; bottom:100px; position:fixed;_position:absolute; width:238px;height:83px; border:1px solid #bcbcbc; padding:10px; background:url(/media/images/float_down.png) no-repeat; }</style> </head> <body> <!-- 加载完后弹出 --> <div id="loadeddiv" style="display:none;" mce_style="display:none;"> <div style="margin-left:75px;" mce_style="margin-left:75px;"> <a target="_blank" href="http://money.sohu.com/20090925/n266992588.shtml" mce_href="http://money.sohu.com/20090925/n266992588.shtml">搜狐网报道,“网购+快递”方便购票 火车票“服务链”形成</a> </div> <div style="margin-left:75px;margin-top:20px;" mce_style="margin-left:75px;margin-top:20px;"> <a target="_blank" href="http://www.bj.xinhuanet.com/bjpd_sdzx/2009-09/24/content_17794373.htm" mce_href="http://www.bj.xinhuanet.com/bjpd_sdzx/2009-09/24/content_17794373.htm">新华网报道,不必去拥挤的车站排队,只要在家点点鼠标就能买到车票</a> </div> <div style="text-align:left;margin-top:-12px;cursor:pointer;" mce_style="text-align:left;margin-top:-12px;cursor:pointer;" οnclick="$('#loadeddiv').css('display', 'none');">关闭</div> </div> <mce:script language="javascript"><!-- $().ready(function(){ //定义新闻弹出层最底部多高 var limitBottom = 0; window.setTimeout(function(){ $("#loadeddiv").fadeIn(1500); //网页可见区域的高度 var clientH = document.body.clientHeight; //滚动条的高度 var scrollPos; if (typeof window.pageYOffset != 'undefined') { scrollPos = window.pageYOffset; } else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') { scrollPos = document.documentElement.scrollTop; } else if (typeof document.body != 'undefined') { scrollPos = document.body.scrollTop; } var allH = clientH+scrollPos; //定义下落的速度 var downSpeed = 2.5; //设置定时下沉 var timing = window.setInterval(function(){ //层的最底部 var loadBottom = parseInt($("#loadeddiv").css("bottom")); if (loadBottom < limitBottom+10) { window.clearInterval(timing); return true; } else { //修改速度 if (loadBottom > 40 && loadBottom <60){ downSpeed = 1.5; } else if (loadBottom > 20 && loadBottom <40) { downSpeed = 0.7; } else if (loadBottom < 20) { downSpeed = 0.3; } $("#loadeddiv").css("bottom", loadBottom-downSpeed+"px"); } }, 30); window.onscroll = function(){ //网页可见区域的高度 var clientH = document.body.clientHeight; //滚动条的高度 var scrollPos; if (typeof window.pageYOffset != 'undefined') { scrollPos = window.pageYOffset; } else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') { scrollPos = document.documentElement.scrollTop; } else if (typeof document.body != 'undefined') { scrollPos = document.body.scrollTop; } document.getElementById("loadeddiv").style.display = "none"; document.getElementById("loadeddiv").style.bottom = limitBottom+10+"px"; document.getElementById("loadeddiv").style.display = "block"; } }, 1500); }); // --></mce:script> </body> </html>