淘宝双11专题两侧导航缩放特效

2013-11-02 12:11 7888 次阅读分类: JS+jQuery, XHTML+CSS, 前端相关 6 条评论

免打扰阅读

本来是逛淘宝双11活动页面，想看下有没宝贝淘下的，拖动页面浏览商品时就注意到了页面上两侧导航的缩放展示效果，看完页面上的商品展示，没关页面，直接跑去查看人家有代码实现了。真心怀疑是不是前端都有这毛病啊，没事总喜欢折腾下。做为一名前端，真心伤不起啊......

效果描述：

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

实现思路：

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

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

完整源码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="https://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>测试页面</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> <style> *{margin:0;padding:0;} body, td, input, textarea, select, button{color:#5f5f5f;font:12px/1.5 "Microsoft YaHei",Tahoma,Arial Geneva, sans-serif;} .demonstrate{width: 41%;height: 1000px;padding: 20px;margin: 10px auto;border: 1px #bbb solid;border-radius: 5px;} .description h3{color:#f00;padding-bottom:8px;}d .description p{padding-bottom:5px;} .description strong{color:#080; border-bottom:1px dotted;} .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);} .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);} .anim-nav{ visibility: hidden; -webkit-transform: scale(0.01, 0.01); -moz-transform: scale(0.01, 0.01); -ms-transform: scale(0.01, 0.01); -o-transform: scale(0.01, 0.01); transform: scale(0.01, 0.01); -webkit-transition: all 500ms ease-in; -moz-transition: all 500ms linear; -ms-transition: all 500ms linear; -o-transition: all 500ms linear; transition: all 500ms linear; } .anim-nav-show{ visibility: visible; -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } </style> <script> $(function(){ var temp=parseInt($(".test").css("bottom")); $(window).scroll(function(event) { $(".test").css({ bottom:temp-$(window).scrollTop() }) if($(window).scrollTop()>100){ console.log("a"); $(".anim-nav").hasClass('anim-nav-show')?"":$(".anim-nav").addClass('anim-nav-show'); }else{ $(".anim-nav").removeClass('anim-nav-show'); } }); }) </script> </head> <body> <script> </script> <div class="demonstrate"> <div class="description"> <h2>跨域请求：JSONP获取JSON数据，含jq ajax实例</h2> <div class="txt"> <h3>先说说JSONP是怎么产生的？</h3> <p> 1、一个众所周知的问题，Ajax直接请求普通文件存在跨域无权限访问的问题，甭管你是静态页面、动态网页、web服务、WCF，只要是跨域请求，一律不准； </p> </div> <div class="left-nav anim-nav"> <a class="fancy-link" href="https://gtms01.alicdn.com/tps/i1/T1CpSFFmBhXXapY9za-89-114.png"><img width="89" height="114" alt="天猫客户端随时随地双11" src="https://gtms01.alicdn.com/tps/i1/T1CpSFFmBhXXapY9za-89-114.png"></a> </div> <div class="right-nav anim-nav"> <a class="fancy-link" href="https://gtms01.alicdn.com/tps/i1/T1NzjEFi8cXXXOxZgs-110-493.png"><img width="110" height="493" alt="天猫客户端随时随地双11" src="https://gtms01.alicdn.com/tps/i1/T1NzjEFi8cXXXOxZgs-110-493.png"></a> </div> </div> </div> </body> </html>

提示：你可以先修改部分代码再运行。

点击上面的运行按钮，在新打开的代码效果演示页面中拖动下页面滚动条，不出意外，就能看到展示效果啦！ enjoy...

快速留言：

7889

上一篇： 主域页面发起ajax请求获取二级域名页面内容 下一篇： 什么叫CallBack函数，怎么用回调函数？

作者: phpvar

快速找到本文的关键字：淘宝双11 css3 transform 和 transition用法、语法

作者其它文章:

2012年11月2日 Christine Welch(美国) 原创中文新单曲《That's How It Is》,很好听！(0)

你可能会喜欢...

6条评论( 网友:3 条,站长:3 条 ) 网友评论{有您的评论更精彩....}

(*必填)

(选填)

[ 请确保填写正确的邮箱地址，您的留言审核通过会收到邮件通知！ ]

粘贴图片链接

CAPTCHAis initialing...

有人回复时邮件通知我

tiandi 2013/11/04 上午 9:48

IE是反人类的。

#-24
- phpvar 2013/11/04 下午 10:23
  
  tiandi 对ie的仇恨值有点高啊，呵呵….
什么值得买 2013/11/03 上午 8:33

挺好玩的，不知道是不是全兼容。。。。。

#-23
- phpvar 2013/11/03 下午 9:20
  
  旧的ie版本只能通过js去实现兼容，不过我觉得没必要做这样的兼容，现代浏览器才能让网民获得更好用户体验，旧浏览器就应该让它慢慢消失，降级处理就显示很有必要了，呵….
  - 什么值得买 2013/11/03 下午 9:24
    
    我有严重的强迫症。。。
    - phpvar 2013/11/04 上午 9:17
      
      对此我只能说：有强迫症的亲，伤不起啊…