首页 > 代码库 > 百度经验滑动效果
百度经验滑动效果
效果预览：
代码：
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>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。