请问一个DIV慢慢展现出来的效果
日期：2014-05-17 浏览次数：20478 次
请教一个DIV慢慢展现出来的效果
是这样的，我做了一个交友站，为了更好的留住来访用户。
我想这样做，在网页顶部预先设置好一个DIV，并命名id="div123"，DIV的内容文字大概是这样的：
亲爱的朋友，你知道吗？本站发信看信都是免费的，不花一分钱，你怎么不加入呢？
无帐号点击这里注册，有帐号点击这里登录
并且把这个DIV设置为隐藏，即style="height:300px;display:none"，然后在首次加载中进行判断，如果用户已经登录，则该DIV不显示出来。
如果说用户未登录，则让这个DIV展示出来，即style="display:block"。
为了更方便大侠们帮我，我把代码帖一下
JS代码——
后台CS代码——
现在我想要的效果是这样的：
1、延时展示：判断用户未登录后，并不立即展开div123,而是10秒钟后才慢慢展开。
2、div123展开的效果不是非常突然的展示，而是从高度0慢慢的展开到预定的高度300px。
3、div123展开后，有一个闭关按钮，用户点击关闭，div123从高度300px慢慢的减缩到0。如果用户不主动点击关闭按钮，那么div123完全展开后，停留10秒，然后div123又自动的慢慢的从高度300PX减缩到0。
这个效果，就与几大门户网站的顶部广告的展开关闭效果类似。
请问各位大侠，这样的效果该怎么做呢？
最好帮我写写代码，如果不想写的话，有网址也请推荐一下，谢谢啦！
非常感谢，祝大家快乐，美女天天围着转不停哈，呵呵……
------解决方案--------------------
jquery 的hide show
------解决方案--------------------
http://www.cnblogs.com/ruibo/archive/2009/06/18/jquery.html
然后LZ看下JS的setTimeout还有JQ的基本操作
------解决方案--------------------
------解决方案--------------------
用jquery
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn1").click(function(){
$("p").fadeOut(1000);
});
$(".btn2").click(function(){
$("p").fadeIn(1000);
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button class="btn1">Hide</button>
<button class="btn2">Show</button>
</body>
</html>
------解决方案--------------------
是这样的，我做了一个交友站，为了更好的留住来访用户。
我想这样做，在网页顶部预先设置好一个DIV，并命名id="div123"，DIV的内容文字大概是这样的：
亲爱的朋友，你知道吗？本站发信看信都是免费的，不花一分钱，你怎么不加入呢？
无帐号点击这里注册，有帐号点击这里登录
并且把这个DIV设置为隐藏，即style="height:300px;display:none"，然后在首次加载中进行判断，如果用户已经登录，则该DIV不显示出来。
如果说用户未登录，则让这个DIV展示出来，即style="display:block"。
为了更方便大侠们帮我，我把代码帖一下
JS代码——
- JScript code
<script type="text/javascript">
<!--
function abc()
{
document.getElementById('div123').style.display='none';
}
-->
</script>
后台CS代码——
- C# code
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
if (Session["flag"] == null) //如果尚未登录,Session["flag"]=true，表明已建立登录状态
{
Page.RegisterStartupScript("a", "<script type='text/javascript'>abc();</script>"); //展示提示DIV
}
}
}
现在我想要的效果是这样的：
1、延时展示：判断用户未登录后，并不立即展开div123,而是10秒钟后才慢慢展开。
2、div123展开的效果不是非常突然的展示，而是从高度0慢慢的展开到预定的高度300px。
3、div123展开后，有一个闭关按钮，用户点击关闭，div123从高度300px慢慢的减缩到0。如果用户不主动点击关闭按钮，那么div123完全展开后，停留10秒，然后div123又自动的慢慢的从高度300PX减缩到0。
这个效果，就与几大门户网站的顶部广告的展开关闭效果类似。
请问各位大侠，这样的效果该怎么做呢？
最好帮我写写代码，如果不想写的话，有网址也请推荐一下，谢谢啦！
非常感谢，祝大家快乐，美女天天围着转不停哈，呵呵……
------解决方案--------------------
jquery 的hide show
------解决方案--------------------
http://www.cnblogs.com/ruibo/archive/2009/06/18/jquery.html
然后LZ看下JS的setTimeout还有JQ的基本操作
------解决方案--------------------
------解决方案--------------------
用jquery
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn1").click(function(){
$("p").fadeOut(1000);
});
$(".btn2").click(function(){
$("p").fadeIn(1000);
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button class="btn1">Hide</button>
<button class="btn2">Show</button>
</body>
</html>
------解决方案--------------------
- HTML code
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>无标题页</title>
<style type="text/css">
*{margin:0px auto}
body{margin:0px auto 0px auto;text-align:center;padding:0px;}
</style>
</head>
<body>
<div id="div123" style="width:980px;height:50px;background:red;display:block;margin-top:-50px;">a<br />b<br />c<br /></div>
<div style="width:980px;height:1000px;background:black;color:#fff">def</div>
<script type="text/javascript">
var obj = document.getElementById("div123");
var height=-50,current;
var Timer;
obj.style.display="block";
Timer=setInterval(SlideDown,10);
function SlideDown(){
current = GetHeight(obj);
if(current>=0){
clearInterval(Timer);
setTimeout(function(){
Timer = setInterval(SlideUp,10);
},2000);
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
