jequery特效楼层

来源：互联网发布：java开源的wiki系统编辑：程序博客网时间：2024/04/28 14:21

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <script src="./jquery-1.7.2.min.js"></script>
   <script>
   $(function(){
       $(window).scroll(function(){
           var ling = $(document).scrollTop(); //获取滑轮与上方的距离
           document.title = ling;
           if(ling>900)
           {
               $("#box").show();
           }
           if(ling<900 || ling>6000)
           {
               $("#box").hide();
           }
           if(1000<ling && 2000>ling)
           {
               //让第一层的数字隐藏，文字显示，让其他兄弟元素的li数字显示，文字隐藏！
               $("#box ul li").eq(0).find('.num').hide().siblings('.word').css('display','block');
               $("#box ul li").eq(0).siblings("li").find('.num').css('display','block').siblings('.word').hide();
           }
           else if(2001<ling && ling<3000)
           {
               //让第二层的数字隐藏，文字显示，让其他兄弟元素的li数字显示，文字隐藏！
               $("#box ul li").eq(1).find('.num').hide().siblings('.word').css('display','block');
               $("#box ul li").eq(1).siblings('li').find('.num').css('display','block').siblings('.word').hide();
           }
           else if(3001<ling && ling<4000)
           {
               //让第三层的数字隐藏，文字显示，让其他兄弟元素的li数字显示，文字隐藏！
               $("#box ul li").eq(2).find('.num').hide().siblings('.word').css('display',"block");
               $("#box ul li").eq(2).siblings('li').find('.num').css('display','block').siblings('.word').hide();
           }
           else if(ling>4001 && ling<5000)
           {
               //让第四层的数字隐藏，文字显示，让其他兄弟元素的li数字显示，文字隐藏！
               $("#box ul li").eq(3).find('.num').hide().siblings('.word').css('display','block');
               $('#box ul li').eq(3).siblings('li').find('.num').css('display','block').siblings('.word').hide();
           }
           else if(ling>5001 && ling<6000)
           {
               //让第五层的数字隐藏，文字显示，让其他兄弟元素的li数字显示，文字隐藏！
               $('#box ul li').eq(4).find('.num').hide().siblings('.word').css('display','block');
               $('#box ul li').eq(4).siblings('li').find('.num').css('display','block').siblings('.word').hide();
           }
       });
       $("#box ul li").hover(function(){
           $(this).css('background','red');
       },function(){
           $(this).css('background','');
       });
       $("#box ul li").click(function(){
           var li = $(this);
           li.each(function(){
               for(var i=0;i<li.length;i++)
               {
                   var val=1000;
                   if(li.eq(i).attr('class')==1)
                   {
                       $(document).scrollTop(val*1);
                   }
                   else if(li.eq(i).attr('class')==2)
                   {
                       $(document).scrollTop(val*2);
                   }
                   else if(li.eq(i).attr('class')==3)
                   {
                       $(document).scrollTop(val*3);
                   }
                   else if(li.eq(i).attr('class')==4)
                   {
                       $(document).scrollTop(val*4);
                   }
                   else
                   {
                       $(document).scrollTop(val*5);
                   }
               }
           });
       });
   });
   </script>
</head>
<style>
   #box{
       float:left;
       position: fixed;
       padding-top:170px;
       display: none;
   }
   #bottom{
       float:right;
       padding-right: 320px;
   }
   #box ul li{
       text-align: center;
       padding-top:20px;
       list-style:none;
       border:1px solid red;
       width:60px;
       height:60px;
   }
   #box ul li .word{
       /*display:none;*/
   }
   #box ul li a{
       text-decoration: none;
       color:orange;
   }
</style>
<body>
   <div id="box">
       <ul>
           <li class='1'>
               <a href="javascript:;" class="num" style="display:none" >1F</a>
               <a href="javascript:;" class="word" style="display:block" >新品</a>
           </li>
           <li class='2'>
               <a class="num" href="javascript:;" >2F</a>
               <a class="word" href="javascript:;">精品</a>
           </li>
           <li class='3'>
               <a class="num" href="javascript:;">3F</a>
               <a class="word"href="javascript:;">热销</a>
           </li>
           <li class='4'>
               <a class="num" href="javascript:;">4F</a>
               <a class="word" href="javascript:;">热卖</a>
           </li>
           <li class='5'>
               <a class="num" href="javascript:;">5F</a>
               <a class="word" href="javascript:;">新品</a>
           </li>
       </ul>
   </div>
   <div id="bottom">
   <div style="width:1000px;height:1000px;background:pink">0F</div>
       <div style="width:1000px;height:1000px;background:orange">1F</div>
       <div style="width:1000px;height:1000px;background:red">2F</div>
       <div style="width:1000px;height:1000px;background:blue">3F</div>
       <div style="width:1000px;height:1000px;background:purple">4F</div>
       <div style="width:1000px;height:1000px;background:yellow">5F</div>
       <div style="width:1000px;height:1000px;background:black">6F</div>
   </div>
</body>
</html>

0 0