首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > asp.net >

请问一个DIV慢慢展现出来的效果

2012-07-15 
请教一个DIV慢慢展现出来的效果是这样的,我做了一个交友站,为了更好的留住来访用户。我想这样做,在网页顶部

请教一个DIV慢慢展现出来的效果
是这样的,我做了一个交友站,为了更好的留住来访用户。

我想这样做,在网页顶部预先设置好一个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);        }        else{            current++;            SetHeight(current);        }    }    function SlideUp(){        if(current<=height){            clearInterval(Timer);        }        else{            current--;            SetHeight(current);        }    }    function GetHeight(){        return parseInt(obj.style.marginTop);    }    function SetHeight(h){        obj.style.marginTop=h+"px";    }</script></body></html> 

热点排行