zoukankan      html  css  js  c++  java
  • 一个Banner广告收缩效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>一个Banner广告收缩效果</title>
    <style type="text/css">
    *{margin:0; padding:0;}/*为了方便 直接这样重置了*/
    #main{margin:0 auto; 960px;}
    #banner{display:none; margin:0 auto; 960px; height:160px; background:url(http://www.codefans.net/jscss/demoimg/201107/banner.png) no-repeat; position:relative;}
    #close{display:block; 50px; height:22px; text-align:center; line-height:22px; border:1px #ddd solid; background:#000; color:#fff; font-size:12px; float:right; cursor:pointer;}
    </style>
    <script type="text/javascript" src="http://www.codefans.net/ajaxjs/jquery1.3.2.js"></script>
    <script type="text/javascript">
    $
    (
    function()
    {
    $("#banner").slideDown();
    var Up=function(){$("#banner").slideUp(1500)}
    setTimeout(Up,3000);
    $("#close").click
    (
    function()
    {
    $("#banner").slideToggle
    (
    600,function()
    {
    if($("#banner").css("display") == "none")
    {
    $("#close").text("打开");
    }
    else
    {
    $("#close").text("关闭");
    }
    }
    );
    }
    );
    }
    );
    </script>
    </head>
    <body>
    <div id="main">
    <div id="banner"></div>
    <span id="close">关闭</span>
    </div>
    </body>
    </html>

  • 相关阅读:
    面试(转)
    Expression Blend实战开发技巧
    Twelve Principles of Agile Software
    Test Software Engineer
    Web开发工程师必读的15个设计博客
    麻省理工的C/C++的课程
    Orchard:处理1对多的关系
    DotNetNuke Switches to C# !!
    我的那个他
    2011 微软MVP全球大会
  • 原文地址:https://www.cnblogs.com/handsomer/p/4117937.html
Copyright © 2011-2022 走看看