zoukankan      html  css  js  c++  java

  • jQuery 代码的层定位滑动动画效果

    <!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>jQuery层动画定位滑动</title>
    <style type="text/css">
    <!--
    body {
    font-family: 'Signika Negative', sans-serif;
    }
    #head {
    z-index:10;
    position:absolute;
    top:0;
    left:0;
    100%;
    height:30px;
    border-color:#0055ff;
    border-0 0 10px 0;
    border-style:solid;
    background:#0088ff;
    }
    #head li{
    list-style:none;
    float:left;
    display:block;
    height:30px;
    padding:0 10px; 0 10px;
    cursor:pointer;
    font-size:26px;
    }
    #head li:hover{
    color:#ffffff;
    background:#0055ff;
    border-color:#0011ff;
    border-0 0 10px 0;
    border-style:solid;
    }
    #box {
    position:absolute;
    top:0;
    left:0;
    100%;
    height:100%;
    overflow:hidden;
    }
    #bg {
    position:absolute;
    top:0;
    left:0;
    100%;
    height:100%;
    overflow:visible;
    background:;
    }
    .cell {
    100%;
    height:100%;
    overflow:auto;
    }
    .list {
    position:absolute;
    top:50%;
    left:50%;
    800px;
    height:600px;
    margin:-300px 0 0 -400px;
    background:#0088ff;
    }
    #class_1 {
    position:absolute;
    top:0;
    left:0;
    background:;
    }
    #class_2 {
    position:absolute;
    top:0;
    left:100%;
    background:;
    }
    #class_3 {
    position:absolute;
    top:0;
    left:200%;
    background:;
    }
    #class_4 {
    position:absolute;
    top:100%;
    left:0;
    background:;
    }
    #class_5 {
    position:absolute;
    top:100%;
    left:100%;
    background:;
    }
    #class_6 {
    position:absolute;
    top:100%;
    left:200%;
    background:;
    }
    #class_7 {
    position:absolute;
    top:200%;
    left:0;
    background:;
    }
    #class_8 {
    position:absolute;
    top:200%;
    left:100%;
    background:;
    }
    #class_9 {
    position:absolute;
    top:200%;
    left:200%;
    background:;
    }
    -->
    </style>
    <script type="text/javascript" src="/ajaxjs/jquery-1.6.2.min.js"></script> 
    <script type="text/javascript">
    $(document).ready(function()
    {
    $("#l_01").click(function(){
    $("#bg").stop().animate({top:0+"%",left:0+"%"},"slow");
    });
    $("#l_02").click(function(){
    $("#bg").stop().animate({top:0+"%",left:-100+"%"},"slow");
    });
    $("#l_03").click(function(){
    $("#bg").stop().animate({top:0+"%",left:-200+"%"},"slow");
    });
    $("#l_04").click(function(){
    $("#bg").stop().animate({top:-100+"%",left:0+"%"},"slow");
    });
    $("#l_05").click(function(){
    $("#bg").stop().animate({top:-100+"%",left:-100+"%"},"slow");
    });
    $("#l_06").click(function(){
    $("#bg").stop().animate({top:-100+"%",left:-200+"%"},"slow");
    });
    $("#l_07").click(function(){
    $("#bg").stop().animate({top:-200+"%",left:0+"%"},"slow");
    });
    $("#l_08").click(function(){
    $("#bg").stop().animate({top:-200+"%",left:-100+"%"},"slow");
    });
    $("#l_09").click(function(){
    $("#bg").stop().animate({top:-200+"%",left:-200+"%"},"slow");
    });
    });
    </script>
    </head>
    <body>
        <div id="head">
    <li id="l_01">1</li>
    <li id="l_02">2</li>
    <li id="l_03">3</li>
    <li id="l_04">4</li>
    <li id="l_05">5</li>
    <li id="l_06">6</li>
    <li id="l_07">7</li>
    <li id="l_08">8</li>
    <li id="l_09">9</li>
    </div>
    <div id="box">
       <div id="bg">
                  <div class="cell" id="class_1">
                    <div class="list"></div>
                  </div>
                  <div class="cell" id="class_2">
                    <div class="list"></div>
                  </div>
                  <div class="cell" id="class_3">
                    <div class="list"></div>
                  </div>
                  <div class="cell" id="class_4">
                    <div class="list"></div>
                  </div>
                  <div class="cell" id="class_5">
                    <div class="list"></div>
                  </div>
                  <div class="cell" id="class_6">
                    <div class="list"></div>
                  </div>
                  <div class="cell" id="class_7">
                    <div class="list"></div>
                  </div>
                  <div class="cell" id="class_8">
                    <div class="list"></div>
                  </div>
                  <div class="cell" id="class_9">
                    <div class="list"></div>
                  </div>
       </div>
    </div>
    <div><A href="http://www.999jiujiu.com/">http://www.999jiujiu.com/</A></div>
    </body>
    </html>

    版权声明：本文博主原创文章。博客，未经同意不得转载。
  • 相关阅读:
    Drupal 学习笔记 (4)
    property和field有什么区别
    Razor4Orchard v1.2
    Mono喜迁新家http://www.xamarin.com/
    jq中获取属性名的方法
    jquery中的文档操作之五
    PHP基础知识之三
    php基础知识之一
    注意点
    jquery中ajax的学习之$.ajax()
  • 原文地址：https://www.cnblogs.com/lcchuguo/p/4866808.html
Copyright © 2011-2022 走看看