zoukankan      html  css  js  c++  java
  • 百度经验滑动效果

     效果预览:

    代码:

     1 <!doctype html>
     2 <html>
     3 <head>
     4 <meta charset="utf-8">
     5 <title>无标题文档</title>
     6 <style>
     7 *{margin:0;padding:0;}
     8 .box{margin-left:50px;}
     9 li{ list-style:none;}
    10 .box ul li{width:800px;height:344px;border-left:1px dotted #666666;position:relative;}
    11 .box2{height:500px;}
    12 .box3{height:2000px;}
    13 .box ul li a{line-height:32px; text-align:center;color:#fff;background:url(http://img.baidu.com/img/iknow/exp/global/step_ico_bg.png) no-repeat left top;width:32px;height:32px;display:block;position:absolute;left:-16px;top:0;}
    14 .icon_link{position:fixed;top:0;left:34px;}
    15 .icon_link a{line-height:32px; text-align:center;color:#fff;background:url(http://img.baidu.com/img/iknow/exp/global/step_ico_bg.png) no-repeat left -68px;width:32px;height:32px;display:block;display:none;}
    16 
    17 .icon_link a.current{background-position:0 0;}
    18 </style>
    19 <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    20 <script src="mousewheel.js"></script>
    21 <script>
    22 $(function(){
    23         var $window = $(window);
    24         var iconList = $('.icon_link a');
    25         var aList = $('ul a');
    26         aList.each(function(index,em){
    27                 $(this).attr('top',index*32);
    28         });
    29         $window.scroll(function(){
    30                         var scrollTop = $window.scrollTop();
    31                         if(($('ul a:last').offset().top+ $('ul li:last').outerHeight()) - scrollTop-150 <= 0){
    32                                 aList.css('visibility','visible');
    33                                 iconList.css('display','none');
    34                                 return;
    35                         }
    36                         aList.each(function(index,em){
    37                                 if(aList.eq(index).offset().top - scrollTop <= aList.eq(index).attr('top')){
    38                                         aList.eq(index).css('visibility','hidden');
    39                                         iconList.removeClass('current');
    40                                         iconList.eq(index).addClass('current').css('display','block');
    41                                 }else{
    42                                         aList.eq(index).css('visibility','visible');
    43                                         iconList.eq(index).removeClass('current').css('display','none');
    44                                 }
    45                         });
    46                         
    47         });
    48         iconList.click(function(){
    49                 var i = $(this).index();
    50                 var t = $('ul li').eq(i).offset().top;
    51                 $('body,html').stop().animate({scrollTop:t});
    52         });
    53 })
    54 </script>
    55 </head>
    56 
    57 <body>
    58 <div class="box">
    59     <div class="box2"></div>
    60         <ul>
    61             <li id="icon1"><a>1</a><img src="http://hiphotos.baidu.com/exp/w=500/sign=ab84830bc9ea15ce41eee00986013a25/203fb80e7bec54e79e6ef790b9389b504ec26aba.jpg"></li>
    62             <li id="icon2"><a>2</a><img src="http://hiphotos.baidu.com/exp/w=500/sign=8ca475112edda3cc0be4b82031e83905/5fdf8db1cb134954ceb104ea564e9258d0094a95.jpg"></li>
    63             <li id="icon3"><a>3</a><img src="http://hiphotos.baidu.com/exp/w=500/sign=33fa75d0ddc451daf6f60ceb86fc52a5/b64543a98226cffc3638523cb9014a90f603ea2a.jpg"></li>
    64     </ul>
    65     <div>end</div>
    66     <div class="icon_link">
    67             <a href="javascriptl:;" class="icon1">1</a>
    68             <a href="javascriptl:;" class="icon2">2</a>
    69             <a href="javascriptl:;" class="icon3">3</a>
    70     </div>
    71     <div class="box3"></div>
    72 </div>
    73 </body>
    74 </html>
  • 相关阅读:
    右击DataGrilView行事件
    winForm textBox的数字输入验证
    C#获取本月开始日期和结束日期
    异步加载js文件并执行js方法:实现异步处理网页的复杂效果
    Windows Phone 7 IEnumerable<T>.Select和SelectMany的区别
    Windows Phone 7 Perst嵌入式数据库的学习
    Windows Phone 7 Coding4Fun的弹出框
    MVVM模式介绍
    Windows Phone 7 网络编程之天气预报应用
    Windows Phone 7 扩展TextBox控件为数字输入文本框
  • 原文地址:https://www.cnblogs.com/loverows/p/3894948.html
Copyright © 2011-2022 走看看