夏日博客

A-A+

仿淘宝双11卖场专题两侧缩放导航效果源码

2016年01月09日 前端设计 暂无评论 阅读 7 views 次

双11的时候，发现淘宝的活动页面的导航缩放展示效果做得非常有特色，所以连东西都没买就看别人的代码实现了，然后就把代码整理出来如下。

效果描述:

默认不显示两侧浮动导航，当页面滚动到一定位置时，两侧的导航内容以缩放显示的效果展示出来，当往上拖动滚动条至该位置临界点时两侧导航再以缩放显示的效果逐渐淡出显示！

实现思路:

2侧导航用postion:fixed定位，并默认visibility: hidden;当拖动滚动条至临界点位置时重新设置visibility: visible ,并用 css3 的transform 和 transition属性去实现缩放显示的效果。

关键代码是js根据滚动值去增删相应的class，以及相应class的transform 和 transition属性定义。

完整源码如下:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5.     <title>测试页面</title>  
  6.     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>  
  7.     <style>  
  8.     *{margin:0;padding:0;}  
  9. body, td, input, textarea, select, button{color:#5f5f5f;font:12px/1.5 "Microsoft YaHei",Tahoma,Arial Geneva, sans-serif;}  
  10. .demonstrate{width: 41%;height: 1000px;padding: 20px;margin: 10px auto;border: 1px #bbb solid;border-radius: 5px;}  
  11. .description h3{color:#f00;padding-bottom:8px;}d  
  12. .description p{padding-bottom:5px;}  
  13. .description strong{color:#080; border-bottom:1px dotted;}  
  14. .left-nav{width: 89px;height: 114px;position: fixed;left:50%;margin-left: -387px;bottom: 60px;z-index: 100;_position: absolute;_bottom: expression(60-documentElement.scrollTop);}  
  15. .right-nav{width: 110px;height: 493px;position: fixed;left:50%;margin-left: 297px;top: 60px;z-index: 100;_position: absolute;_bottom: expression(60+documentElement.scrollTop);}  
  16. .anim-nav{  
  17. visibility: hidden;  
  18. -webkit-transform: scale(0.01, 0.01);  
  19. -moz-transform: scale(0.01, 0.01);  
  20. -ms-transform: scale(0.01, 0.01);  
  21. -o-transform: scale(0.01, 0.01);  
  22. transform: scale(0.01, 0.01);  
  23. -webkit-transition: all 500ms ease-in;  
  24. -moz-transition: all 500ms linear;  
  25. -ms-transition: all 500ms linear;  
  26. -o-transition: all 500ms linear;  
  27. transition: all 500ms linear;  
  28. }  
  29. .anim-nav-show{  
  30.     visibility: visible;  
  31.     -webkit-transform: scale(1, 1);  
  32.     -moz-transform: scale(1, 1);  
  33.     -ms-transform: scale(1, 1);  
  34.     -o-transform: scale(1, 1);  
  35.     transform: scale(1, 1);  
  36. }  
  37.     </style>  
  38.     <script>  
  39.     $(function(){  
  40.         var temp=parseInt($(".test").css("bottom"));  
  41.         $(window).scroll(function(event) {  
  42.             $(".test").css({  
  43.                 bottom:temp-$(window).scrollTop()  
  44.             })  
  45.             if($(window).scrollTop()>100){  
  46.                 console.log("a");  
  47.                 $(".anim-nav").hasClass('anim-nav-show')?"":$(".anim-nav").addClass('anim-nav-show');  
  48.             }else{  
  49.                 $(".anim-nav").removeClass('anim-nav-show');  
  50.             }  
  51.         });  
  52.     })  
  53.     </script>  
  54. </head>  
  55. <body>  
  56. <script>  
  57. </script>  
  58.     <div class="demonstrate">  
  59.         <div class="description">  
  60.             <h2>跨域请求：JSONP获取JSON数据，含jq ajax实例</h2>  
  61.             <div class="txt">  
  62.                 <h3>先说说JSONP是怎么产生的？</h3>  
  63.                 <p>  
  64.                     1、一个众所周知的问题，Ajax直接请求普通文件存在跨域无权限访问的问题，甭管你是静态页面、动态网页、web服务、WCF，只要是跨域请求，一律不准；  
  65.                 </p>  
  66.             </div>  
  67.             <div class="left-nav anim-nav">  
  68.                 <img width="89" height="114" alt="天猫客户端随时随地双11" src="http://gtms01.alicdn.com/tps/i1/T1CpSFFmBhXXapY9za-89-114.png">  
  69.             </div>  
  70.             <div class="right-nav anim-nav">  
  71.                 <img width="110" height="493" alt="天猫客户端随时随地双11" src="http://gtms01.alicdn.com/tps/i1/T1NzjEFi8cXXXOxZgs-110-493.png">  
  72.             </div>  
  73.         </div>  
  74.     </div>  
  75. </body>  
  76. </html>  
标签：

给我留言