求一个CSS效果

杰子 2009-12-29 11:11:27

和163首页一样的广告效果：
广告慢慢的从网页顶部下拉出来，又慢慢的缩回去。
或
这个div广告图片显示在网页中央，又慢慢的消失。
谢谢各给高手，马上结贴。

...全文

82 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

wosizy 2009-12-29

打赏
举报

body>
<div id="ads" style=" width:620px; margin:auto; display:none; margin-top:25px; height:0px;overflow:hidden; ">
<a href="http://www.po-soft.com" target="_blank"><img src="http://www.po-soft.com/images/image1.jpg" alt="百洋软件研究实验室" width="620" height="195" border="0"/></a> </div>
<p align="center" style="line-height:24px;">本demo来源于<a href="http://www.po-soft.com/" target="_blank">百洋软件研究实验室</a>博客的<br />
<a href="http://www.po-soft.com/blog/xuan/145.html">JS特效代码大全（二）能记录cookie的顶部伸缩广告</a>一文。</p>
</body>
</html>
<script type="text/javascript" language="javascript">
var time = 500;
var h = 0;
function addCount()
{
if(time>0)
{
time--;
hh = h+5;
}
else
{
return;
}
if(h>198) //高度
{
return;
}
document.getElementById("ads").style.display = "";
document.getElementById("ads").style.height = h+"px";
setTimeout("addCount()",30);
}

window.onload = function showAds()
{
addCount();
setTimeout("noneAds()",7000); //停留时间自己适当调整
}
</script>

<script type="text/javascript" language="javascript">
var T = 500;
var N = 195; //高度
function noneAds()
{
if(T>0)
{
T--;
NN = N-5;
}
else
{
return;
}
if(N<0)
{
document.getElementById("ads").style.display = "none";
return;
}

document.getElementById("ads").style.height = N+"px";
setTimeout("noneAds()",30);
}
</script>
拿去试试。

jenny0810 2009-12-29

打赏
举报

你把163另存为看看就知道了吧

杰子 2009-12-29

打赏
举报

找到了一个合适的，比2楼的好多了..结贴了
<html>
<head>
<title>163头部ad显示效果</title>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>

<script>
$(document).ready(function() {
$("#ad").slideDown(1000,function(){
var dom = $(this);
setTimeout(function(){dom.slideUp(1000);},2000);
});});
</script>

<style type="text/css">
body {margin:0;padding:0; }
div#ad {width:500px;height:400px;font-size:18px; padding:0; margin:0; background-color:#eee; display:none;}
/*div#ad p {height:14px;}//这是第一次发布时候p的样式*/
div#ad p {height:25px; padding:0;margin:0;line-height:150%;}//这是第二次发布时候p的样式
</style>
</head>
<body>
<div id="ad">
<p>这是网易163的广告代码</p>
<p>这是网易163的广告代码</p>
<p>这是网易163的广告代码</p>
<p>这是网易163的广告代码</p>
<p>这是网易163的广告代码</p>
<p>这是网易163的广告代码</p>
<p>这是网易163的广告代码</p>
<p>这是网易163的广告代码</p>
</div>
csacasc
</body>
</html>