点击访问：国家航天局

1.搜索按钮

    javascript代码如下：

<script type="text/javascript">

$(document).ready(function(){

    $(".searchBoxs").mouseover(function(event) {

       $(".searchBtn").css({"background":"url(img/6767732.png) no-repeat 0px 0px"});

       $(this).animate({width:200},500);

    });

    $(document).mouseup(function(e){

      if($(e.target).parent(".searchBoxs").length==0){

        $(".searchBoxs").animate({width:30},500);

        $(".searchBtn").css({"background":"url(img/6767733.png) no-repeat right top"});

      }

    });

});

</script>

2.轮播图

3.滑动提示层

（1）js实现

          <script>

      $(function() {

  $(".content li").hover(function() {

    $(this).children().children("p").stop().animate({'bottom':"0px"},400); 

  }, function() {

    $(this).children().children("p").stop().animate({'bottom':"-40px"},400); 

  });

      });

         </script>

（2）css3实现

         .content li p{

z-index: 9;

background-color: rgba(0,122,153,0.5);

color: #fff;

position: absolute;

        line-height: 40px;

height: 40px;

width: 100%;

padding-left: 10px;

bottom: -40px;  /*初始状态*/

transition: 0.5s;   /*过渡*/

 }

  .content li:hover p{

bottom:0;    /*鼠标移动到列表项上*/

 }