[关闭]
@fantaghiro 2014-10-17T17:06:56.000000Z 字数 28610 阅读 1579

JavaScript中的运动

js 学习笔记 妙味课堂


运动的基础原理

在js中,如何让一个页面元素动起来:

  1. <input type="button" value="动起来" id="btn" />
  2. <div id="div1"></div>
  1. #div1 { width: 100px; height: 100px; background: red; position: absolute; left: 0px; top: 30px; }
  1. var oBtn = document.getElementById('btn');
  2. var oDiv = document.getElementById('div1');
  3. var iTimer = null;
  4. //点击按钮,让div1横向向右移动
  5. //定时器
  6. oBtn.onclick = function(){
  7. clearInterval(iTimer);
  8. iTimer = setInterval(function(){
  9. //oDiv.style.left = oDiv.offsetLeft + 10 + 'px';
  10. if(oDiv.offsetLeft == 500){
  11. clearInterval(iTimer);
  12. } else {
  13. oDiv.style.left = oDiv.offsetLeft + 10 + 'px';
  14. }
  15. }, 30)
  16. }
  1. 清除定时器:保证运动过程中只有一个定时器在执行
  2. 开启定时器
  3. 开始运动(同时在运动中加入判断,以便在需要的时候或者是在满足某个要求的时候停止运动)

小数的计算精度问题

  1. //alert(0.1 + 0.2); // 0.3 -> 0.3000000004
  2. //alert(0.2 + 0.7); //0.9 -> 0.8999999999
  3. //近似值:可能比正确要小,也可能要比正确的大
  4. //近似值:进行“四舍五入”(不是真正的四舍五入)以后可以得到正确值

简单运动的函数封装

  1. function css(obj, attr){
  2. if(obj.currentStyle){
  3. return obj.currentStyle[attr];
  4. } else {
  5. return getComputedStyle(obj, false)[attr];
  6. }
  7. }
  8. function startMove(obj, json, iSpeed, fn){
  9. clearInterval(obj.iTimer);
  10. var iCur = 0;
  11. obj.iTimer = setInterval(function(){
  12. var iBtn = true;
  13. for(var attr in json){
  14. var iTarget = json[attr];
  15. if(attr == 'opacity'){
  16. iCur = Math.round(css(obj, 'opacity') * 100);
  17. } else {
  18. iCur = parseInt(css(obj, attr));
  19. }
  20. if(iCur != iTarget){
  21. iBtn = false;
  22. if(attr == 'opacity'){
  23. obj.style.opacity = (iCur + iSpeed) / 100;
  24. obj.style.filter = 'alpha(opacity=' + (iCur + iSpeed) + ')';
  25. } else {
  26. obj.style[attr] = iCur + iSpeed + 'px';
  27. }
  28. }
  29. }
  30. if(iBtn){
  31. clearInterval(obj.iTimer);
  32. fn && fn.call(obj);
  33. }
  34. }, 30);
  35. }

摩擦运动

摩擦,减速:在运动过程中,速度越来越慢

让iSpeed在定时器里面递减即可。iSpeed -= 2; 或 iSpeed /= 2; 或 iSpeed *= 0.9; 但是这种方法不太好控制目标点。

缓冲运动

越接近目标点,速度越小。速度和距离成正比。

设置 iSpeed = ( 500 - oDiv.offsetLeft) * 0.2; iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);

CSS解析和js解析:

CSS解析是认小数点之后的值的,但是offsetLeft等等这些经过js运算过后的没有单位的值是不认小数点之后的值的(会将有小数点的值进行四舍五入运算)

运动框架加入缓冲模式

  1. function css(obj, attr){
  2. if(obj.currentStyle){
  3. return obj.currentStyle[attr];
  4. } else {
  5. return getComputedStyle(obj, false)[attr];
  6. }
  7. }
  8. function startMove(obj, json, fn){
  9. clearInterval(obj.iTimer);
  10. var iCur = 0;
  11. var iSpeed = 0; //速度初始化
  12. obj.iTimer = setInterval(function(){
  13. var iBtn = true;
  14. for(var attr in json){
  15. var iTarget = json[attr];
  16. if(attr == 'opacity'){
  17. iCur = Math.round(css(obj, 'opacity') * 100);
  18. } else {
  19. iCur = parseInt(css(obj, attr));
  20. }
  21. iSpeed = (iTarget - iCur) / 8;
  22. iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
  23. if(iCur != iTarget){
  24. iBtn = false;
  25. if(attr == 'opacity'){
  26. obj.style.opacity = (iCur + iSpeed) / 100;
  27. obj.style.filter = 'alpha(opacity=' + (iCur + iSpeed) + ')';
  28. } else {
  29. obj.style[attr] = iCur + iSpeed + 'px';
  30. }
  31. }
  32. }
  33. if(iBtn){
  34. clearInterval(obj.iTimer);
  35. fn && fn.call(obj);
  36. }
  37. }, 30);
  38. }

运动框架的应用

多图展开收缩实例

  1. <ul id="ul1">
  2. <li></li>
  3. <li></li>
  4. <li></li>
  5. <li></li>
  6. <li></li>
  7. <li></li>
  8. <li></li>
  9. <li></li>
  10. <li></li>
  11. </ul>
  1. body { margin: 0; }
  2. li { width: 100px; height: 100px; background: red; float: left; list-style: none; margin: 10px 0 0 10px; }
  3. #ul1 { margin: 0; padding: 0; width: 330px; margin: 100px auto 0; position: relative; }
  1. //要先引入startMove函数
  2. /*
  3. 元素居中放大:除了要改变元素的宽高以外,还要改变元素定位(left, top)
  4. 如果图片放大一倍,那么位移放大的宽高的一半。
  5. 元素必须是定位的。
  6. */
  7. window.onload = function(){
  8. var oUl = document.getElementById('ul1');
  9. var aLi = oUl.getElementsByTagName('li');
  10. var arr = [];
  11. var zIndex = 1;
  12. for(var i=0; i<aLi.length; i++){
  13. arr.push({left: aLi[i].offsetLeft, top: aLi[i].offsetTop});
  14. }
  15. for(var i=0; i<aLi.length; i++){
  16. aLi[i].index = i;
  17. //在转化布局的时候,相对用户眼睛的位置保持不变。利用offsetLeft/offsetTop
  18. //在用js去设置css样式的时候注意:在同一个代码块当中,有些css样式的设置的权限要高于其他的样式。因为在一个代码块中,position = 'absolute'先被解析了,而offsetLeft和offsetTop要经过运算后才解析,所以先定位成了absolute,然后再计算offsetLeft和offsetTop就出现了问题。因此要把offsetLeft和offsetTop的设置放在单独的代码块中先行解析。
  19. /*
  20. aLi[i].style.left = aLi[i].offsetLeft + 'px';
  21. aLi[i].style.top = aLi[i].offsetTop + 'px';
  22. */
  23. aLi[i].style.left = arr[i].left + 'px';
  24. aLi[i].style.top = arr[i].top + 'px';
  25. aLi[i].style.position = 'absolute';
  26. aLi[i].style.margin = '0px';
  27. aLi[i].onmouseover = function(){
  28. this.style.backgroundColor = 'green';
  29. this.style.zIndex = zIndex++;
  30. startMove(this, {
  31. width: 200,
  32. height: 200,
  33. left: arr[this.index].left - 50,
  34. top: arr[this.index].top - 50
  35. });
  36. }
  37. aLi[i].onmouseout = function(){
  38. startMove(this, {
  39. width: 100,
  40. height: 100,
  41. left: arr[this.index].left,
  42. top: arr[this.index].top
  43. });
  44. }
  45. }
  46. }

带运动效果的留言本

  1. <textarea id="content" rows="10" cols="50"></textarea>
  2. <input type="button" value="留言" id="btn">
  3. <ul id="ul1"></ul>
  1. #ul1 { margin: 0; position: aboslute; right: 10px; top: 8px; width: 700px; height: 500px; border: 1px solid #000; padding: 10px; overflow: auto; }
  2. li { line-height: 28px; border-bottom: 1px dotted #000; list-style: none; word-break: break-all; overflow: hidden; }
  1. //先引入startMove函数
  2. window.onload = function(){
  3. var oContent = document.getElementById('content');
  4. var oBtn = document.getElementById('btn');
  5. var oUl = document.getElementById('ul1');
  6. oBtn.onclick = function(){
  7. var oLi = document.createElement('li');
  8. oLi.innerHTML = oContent.value;
  9. if(oUl.children[0]){
  10. oUl.insertBefore(oLi, oUl.children[0])
  11. } else {
  12. oUl.appendChild(oLi);
  13. }
  14. var iHeight = parseInt(css(oLi, 'height'));
  15. oLi.style.height = '0px'; //初始化样式,然后再变
  16. oLi.style.opacity = '0';
  17. oLi.style.filter = 'alpha(opacity=0)';
  18. startMove(oLi, {
  19. height: iHeight,
  20. opacity: 100
  21. });
  22. }
  23. }

淘宝幻灯片

  1. <div id="div1">
  2. <ul id="ul1">
  3. <li><img src="1.png"></li>
  4. <li><img src="2.jpg"></li>
  5. <li><img src="3.jpg"></li>
  6. <li><img src="4.jpg"></li>
  7. <li><img src="5.jpg"></li>
  8. <li><img src="6.jpg"></li>
  9. </ul>
  10. <p>
  11. <span></span>
  12. <span></span>
  13. <span></span>
  14. <span></span>
  15. <span></span>
  16. <span></span>
  17. </p>
  18. </div>
  1. #div1 { width: 520px; height: 280px; border: 1px solid #000; margin: 100px auto 0; position: relative; overflow: hidden; }
  2. #ul1 { position: absolute; left: 0; top: 0; margin: 0; padding: 0; }
  3. li { list-style: none; float: left; }
  4. img { display: block; }
  5. #div1 p { text-align: center; position: absolute; width: 100%; bottom: 10px; }
  6. #div1 p span { padding: 2px 9px; background: #ccc; border-radius: 50%; margin-left: 5px; cursor: pointer; }
  7. #div1 p span.current { background: #f90; }
  1. window.onload = function(){
  2. var oDiv = document.getElementById('div1');
  3. var oUl = document.getElementById('ul1');
  4. var aLi = document.getElementsByTagName('li');
  5. var aSpan = oDiv.getElementsByTagName('span');
  6. var iLen = aLi.length;
  7. var iWidth = aLi[0].offsetWidth;
  8. oUl.style.width = iLen * iWidth + 'px';
  9. for(var i=0; i<iLen; i++){
  10. aSpan[i].index = i;
  11. aSpan[i].onclick = function(){
  12. for(var i=0; i<iLen; i++){
  13. aSpan[i].className = '';
  14. }
  15. this.className = 'current';
  16. startMove(oUl, {
  17. left: -this.index * iWidth;
  18. })
  19. }
  20. }
  21. }

带运动的返回顶部

  1. <body style="height: 2000px">
  2. <div id="div1"></div>
  3. </body>
  1. #div1 { width: 100px; height: 100px; background: red; position: absolute; right: 0; top: 0; }
  1. window.onload = function(){
  2. var oDiv = document.getElementById('div1');
  3. var iTimer = null;
  4. var b = 0;
  5. setTop();
  6. window.onscroll = function(){
  7. //console.log('2');
  8. if(b != 1){
  9. //如果b == 1,那么当前的scroll事件被定时器所触发;不过b != 1,那么就是非定时器的其他任何一个操作触发了该事件
  10. clearInterval(iTimer);
  11. }
  12. b = 2;
  13. setTop();
  14. }
  15. oDiv.onclick = function(){
  16. clearInterval(iTimer);
  17. var iCur = iSpeed = 0;
  18. iTimer = setInterval(function(){
  19. iCur = document.documentElement.scrollTop || document.body.scrollTop;
  20. iSpeed = Math.floor((0 - iCur) / 8);
  21. if(iCur == 0){
  22. clearInterval(iTimer);
  23. } else {
  24. document.documentElement.scrollTop = document.body.scrollTop = iCur + iSpeed;
  25. }
  26. //console.log('1');
  27. b = 1;
  28. }, 30)
  29. }
  30. function setTop(){
  31. var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  32. oDiv.style.top = scrollTop + document.documentElement.clientHeight - oDiv.offsetHeight + 'px';
  33. }
  34. }

图片预加载

我们经常会用下载软件下载电视剧,一个电视剧可以有n集。

  1. 先把所有的集数全部下载完成,然后一个个开开心心地看。你真的开心吗?
  2. 我们先下一集,然后按完,看完以后再去下下一集,然后再看。
  3. 我们先下载第一集,下载完成以后,在看第一集的时候去下载后面的内容。这样,在看前面的内容的时候,把后面的下完,节约了很多时间。

图片预加载就是采用上述第3种方式:在页面刚打开的时候,去加载第一张图片。然后页面加载完成以后,在用户看的时间内,去加载后面的内容。那么我们必须有个工具(迅雷)-> Image对象。

图片预加载原理

  1. <img id="img1" src='' />
  1. window.onload = function(){
  2. var oImage = new Image();
  3. var oImg = document.getElementById('img1');
  4. /*
  5. 属性:
  6. src:当我们给Image对象的src属性赋值一个url的时候,这个Image对象就会去加载url资源。加载完成以后的资源被保存到了浏览器的缓存文件夹里面。下次如果我们要去调用这个url地址的时候,直接是从缓存文件夹读取到的。所以速度很快。
  7. 事件:
  8. onload:当资源加载完成的时候触发
  9. onerror:当资源加载失败的时候触发
  10. */
  11. oImage.src = '1.png';
  12. oImage.onload = function(){
  13. alert('加载完成');
  14. document.onclick = function(){
  15. oImg.src = '1.png';
  16. }
  17. }
  18. oImage.onerror = function(){
  19. alert('加载出错');
  20. }
  21. }

图片预加载的应用实例

  1. <img src="1.jpg" id="img1" style="width: 300px;" />
  1. window.onload = function(){
  2. var oImg = document.getElementById('img1');
  3. var oImage = new Image();
  4. var arr = [
  5. '2.jpg',
  6. '3.jpg',
  7. '4.jpg',
  8. '5.jpg',
  9. '6.jpg',
  10. '7.jpg'
  11. ];
  12. var iCur = 0;
  13. var i = 0;
  14. xunlei();
  15. oImg.onclick = function(){
  16. i++;
  17. if(i < arr.length){
  18. oImg.src = arr[i];
  19. }
  20. }
  21. function xunlei(){
  22. oImage.src = arr[iCur];
  23. oImage.onload = function(){
  24. iCur++;
  25. if(iCur < arr.length){
  26. xunlei();
  27. }
  28. }
  29. }
  30. }

图片的按需加载

  1. <ul id="ul1">
  2. <li><img _src="1.jpg" src="white.jpg"></li>
  3. <li><img _src="2.jpg" src="white.jpg"></li>
  4. <li><img _src="3.jpg" src="white.jpg"></li>
  5. <li><img _src="4.jpg" src="white.jpg"></li>
  6. <li><img _src="5.jpg" src="white.jpg"></li>
  7. <li><img _src="6.jpg" src="white.jpg"></li>
  8. <li><img _src="7.jpg" src="white.jpg"></li>
  9. <li><img _src="1.jpg" src="white.jpg"></li>
  10. <li><img _src="2.jpg" src="white.jpg"></li>
  11. <li><img _src="3.jpg" src="white.jpg"></li>
  12. <li><img _src="4.jpg" src="white.jpg"></li>
  13. <li><img _src="5.jpg" src="white.jpg"></li>
  14. <li><img _src="6.jpg" src="white.jpg"></li>
  15. <li><img _src="7.jpg" src="white.jpg"></li>
  16. <li><img _src="1.jpg" src="white.jpg"></li>
  17. <li><img _src="2.jpg" src="white.jpg"></li>
  18. <li><img _src="3.jpg" src="white.jpg"></li>
  19. <li><img _src="4.jpg" src="white.jpg"></li>
  20. <li><img _src="5.jpg" src="white.jpg"></li>
  21. <li><img _src="6.jpg" src="white.jpg"></li>
  22. <li><img _src="7.jpg" src="white.jpg"></li>
  23. <li><img _src="1.jpg" src="white.jpg"></li>
  24. <li><img _src="2.jpg" src="white.jpg"></li>
  25. <li><img _src="3.jpg" src="white.jpg"></li>
  26. <li><img _src="4.jpg" src="white.jpg"></li>
  27. <li><img _src="5.jpg" src="white.jpg"></li>
  28. <li><img _src="6.jpg" src="white.jpg"></li>
  29. <li><img _src="7.jpg" src="white.jpg"></li>
  30. <li><img _src="1.jpg" src="white.jpg"></li>
  31. <li><img _src="2.jpg" src="white.jpg"></li>
  32. <li><img _src="3.jpg" src="white.jpg"></li>
  33. <li><img _src="4.jpg" src="white.jpg"></li>
  34. <li><img _src="5.jpg" src="white.jpg"></li>
  35. <li><img _src="6.jpg" src="white.jpg"></li>
  36. <li><img _src="7.jpg" src="white.jpg"></li>
  37. <li><img _src="1.jpg" src="white.jpg"></li>
  38. <li><img _src="2.jpg" src="white.jpg"></li>
  39. <li><img _src="3.jpg" src="white.jpg"></li>
  40. <li><img _src="4.jpg" src="white.jpg"></li>
  41. <li><img _src="5.jpg" src="white.jpg"></li>
  42. <li><img _src="6.jpg" src="white.jpg"></li>
  43. <li><img _src="7.jpg" src="white.jpg"></li>
  44. <li><img _src="1.jpg" src="white.jpg"></li>
  45. <li><img _src="2.jpg" src="white.jpg"></li>
  46. <li><img _src="3.jpg" src="white.jpg"></li>
  47. <li><img _src="4.jpg" src="white.jpg"></li>
  48. <li><img _src="5.jpg" src="white.jpg"></li>
  49. <li><img _src="6.jpg" src="white.jpg"></li>
  50. <li><img _src="7.jpg" src="white.jpg"></li>
  51. </ul>
  1. #ul1 { margin: 100px auto 0; padding: 0; }
  2. li { float: left; margin: 0 0 10px 10px; list-style: none; border: 1px solid black;}
  3. img { width: 300px; height: 200px; display: block; }
  1. window.onload = function(){
  2. var oUl = document.getElementById('ul1');
  3. var aImg = oUl.getElementsByTagName('img');
  4. showImg();
  5. window.onscroll = showImage;
  6. function showImg(){
  7. var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  8. for(var i=0; i<aImg.length; i++){
  9. if(!aImg[i].isLoad && getTop(aImg[i]) < scrollTop + document.documentElement.clientHeight ){
  10. aImg[i].src = aImg[i].getAttribute('_src');
  11. aImg[i].isLoad = true;
  12. }
  13. }
  14. }
  15. function getTop(obj){
  16. var iTop = 0;
  17. while(obj){
  18. iTop += obj.offsetTop;
  19. obj = obj.offsetParent;
  20. }
  21. return iTop;
  22. }
  23. }

弹性运动

加速运动

  1. <input type="button" value="开始运动" id="input1">
  2. <div id="div1"></div>
  1. #div1 { width: 100px; height: 100px; background: red; position: absolute; left: 0; }
  1. window.onload = function(){
  2. var oInput = document.getElementById('input1');
  3. var oDiv = document.getElementById('div1');
  4. var timer = null;
  5. var iSpeed = 0;
  6. oInput.onclick = function(){
  7. startMove();
  8. }
  9. function startMove(){
  10. clearInterval(timer);
  11. timer = setInterval(function(){
  12. iSpeed += 3;
  13. oDiv.style.left = oDiv.offsetLeft + iSpeed + 'px';
  14. }, 30)
  15. }
  16. }

减速运动

  1. window.onload = function(){
  2. var oInput = document.getElementById('input1');
  3. var oDiv = document.getElementById('div1');
  4. var timer = null;
  5. var iSpeed = 80;
  6. oInput.onclick = function(){
  7. startMove();
  8. }
  9. function startMove(){
  10. clearInterval(timer);
  11. timer = setInterval(function(){
  12. iSpeed -= 3;
  13. oDiv.style.left = oDiv.offsetLeft + iSpeed + 'px';
  14. }, 30)
  15. }
  16. }

弹性运动

  1. <input type="button" value="开始运动" id="input1">
  2. <div id="div1"></div>
  3. <div id="bg"></div>
  1. #div1 { width: 100px; height: 100px; background: red; position: absolute; left: 0; }
  2. #bg { width: 1px; height: 500px; background: black; position: absolute; left: 500px; top: 0; }
  1. window.onload = function(){
  2. var oInput = document.getElementById('input1');
  3. var oDiv = document.getElementById('div1');
  4. var timer = null;
  5. var iSpeed = 0;
  6. oInput.onclick = function(){
  7. startMove();
  8. }
  9. function startMove(){
  10. clearInterval(timer);
  11. timer = setInterval(function(){
  12. if(oDiv.offsetLeft < 500){
  13. iSpeed += 5;
  14. } else {
  15. iSpeed -= 5;
  16. }
  17. oDiv.style.left = oDiv.offsetLeft + iSpeed + 'px';
  18. }, 30)
  19. }
  20. }

弹性运动带加速度

  1. window.onload = function(){
  2. var oInput = document.getElementById('input1');
  3. var oDiv = document.getElementById('div1');
  4. var timer = null;
  5. var iSpeed = 0;
  6. oInput.onclick = function(){
  7. startMove();
  8. }
  9. function startMove(){
  10. clearInterval(timer);
  11. timer = setInterval(function(){
  12. // if(oDiv.offsetLeft < 500){
  13. // iSpeed += (500 - oDiv.offsetLeft)/50;
  14. // } else {
  15. // iSpeed -= (oDiv.offsetLeft - 500)/50;
  16. // }
  17. iSpeed += (500 - oDiv.offsetLeft)/50;
  18. oDiv.style.left = oDiv.offsetLeft + iSpeed + 'px';
  19. }, 30)
  20. }
  21. }

摩擦力:F = fM (f是摩擦系数、M是质量)

弹性运动带摩擦

  1. window.onload = function(){
  2. var oInput = document.getElementById('input1');
  3. var oDiv = document.getElementById('div1');
  4. var timer = null;
  5. var iSpeed = 0;
  6. oInput.onclick = function(){
  7. startMove();
  8. }
  9. function startMove(){
  10. clearInterval(timer);
  11. timer = setInterval(function(){
  12. // if(oDiv.offsetLeft < 500){
  13. // iSpeed += (500 - oDiv.offsetLeft)/50;
  14. // } else {
  15. // iSpeed -= (oDiv.offsetLeft - 500)/50;
  16. // }
  17. iSpeed += (500 - oDiv.offsetLeft)/50;
  18. iSpeed *= 0.95;
  19. if(Math.abs(iSpeed) <= 1 && Math.abs(500 - oDiv.offsetLeft) <=1 ){
  20. clearInterval(timer);
  21. oDiv.style.left = '500px';
  22. iSpeed = 0;
  23. } else {
  24. oDiv.style.left = oDiv.offsetLeft + iSpeed + 'px';
  25. }
  26. }, 30)
  27. }
  28. }

弹性运动与缓冲运动的区别

弹性运动:

缓冲运动:

弹性菜单实例

  1. <ul id="ul1">
  2. <li id="mark"></li>
  3. <li class="box">首页</li>
  4. <li class="box">论坛</li>
  5. <li class="box">视频</li>
  6. <li class="box">留言</li>
  7. </ul>
  1. * { margin: 0; padding: 0; }
  2. #ul1 { width: 428px; height: 30px; margin: 20px auto; position: relative; }
  3. #ul1 li { width: 100px; height: 30px; background: red; border: 1px #000 solid; margin-right: 5px; float: left; list-style: none; line-height: 30px; text-align: center; }
  4. #ul1 #mark { position: absolute; left: 0; top: 0; background: blue; height: 10px; }
  1. window.onload = function(){
  2. var oMark = document.getElementById('mark');
  3. var aBox = document.getElementsByClassName('box');
  4. var timer = null
  5. var iSpeed = 0;
  6. for(var i=0; i<aBox.length; i++){
  7. aBox[i].onmouseover = function(){
  8. startMove(this.offsetLeft);
  9. }
  10. aBox[i].onmouseout = function(){
  11. startMove(0);
  12. }
  13. function startMove(iTarget){
  14. clearInterval(timer);
  15. timer = setInterval(function(){
  16. iSpeed += (iTarget - oMark.offsetLeft) / 6;
  17. iSpeed *= 0.75;
  18. if(Math.abs(iSpeed) <= 1 && Math.abs(iTarget - oMark.offsetLeft) <= 1){
  19. clearInterval(timer);
  20. oMark.style.left = iTarget + 'px';
  21. iSpeed = 0;
  22. } else {
  23. oMark.style.left = oMark.offsetLeft + iSpeed + 'px';
  24. }
  25. }, 30)
  26. }
  27. }
  28. }

弹性菜单优化

滚动歌词效果

  1. <div id="div1"><span>阿里的房间啊高领导看见噶的离开房间爱多了几分</span></div>
  2. <div id="div2"><span>阿里的房间啊高领导看见噶的离开房间爱多了几分</span></div>
  1. * { margin: 0; padding: 0; }
  2. #div1, #div2 { position: absolute; left: 0; top: 0; }
  3. #div2 { color: red; width: 15px; height: 16px; overflow: hidden; }
  4. #div2 span { position: absolute; left: 0; top: 0; width: 2000px; }
  1. window.onload = function(){
  2. var oDiv2 = document.getElementById('div2');
  3. var oSpan2 = oDiv2.getElementsByTagName('span')[0];
  4. setInterval(function(){
  5. oDiv2.style.left = oDiv2.offsetLeft + 1 + 'px';
  6. oSpan2.style.left = -oDiv2.offsetLeft + 'px';
  7. }, 30)
  8. }

弹性菜单实例优化

  1. <ul id="ul1">
  2. <li id="mark">
  3. <ul>
  4. <li class="box">首页</li>
  5. <li class="box">论坛</li>
  6. <li class="box">视频</li>
  7. <li class="box">留言</li>
  8. </ul>
  9. </li>
  10. <li class="box">首页</li>
  11. <li class="box">论坛</li>
  12. <li class="box">视频</li>
  13. <li class="box">留言</li>
  14. </ul>
  1. * { margin: 0; padding: 0; }
  2. #ul1 { width: 428px; height: 30px; margin: 20px auto; position: relative; }
  3. #ul1 li { width: 100px; height: 30px; background: red; border: 1px #000 solid; margin-right: 5px; float: left; list-style: none; line-height: 30px; text-align: center; }
  4. #ul1 #mark { position: absolute; left: 0; top: 0; overflow: hidden; background: blue; }
  5. #ul1 #mark ul { width: 428px; position: absolute; left: -1px; top: -1px; color: #fff; }
  6. #mark ul li { background: blue; }
  1. window.onload = function(){
  2. var oMark = document.getElementById('mark');
  3. var aBox = document.getElementsByClassName('box');
  4. var childUl = oMark.getElementsByTagName('ul')[0];
  5. var timer = null;
  6. var timer2 = null;
  7. var iSpeed = 0;
  8. for(var i=0; i<aBox.length; i++){
  9. aBox[i].onmouseover = function(){
  10. clearTimeout(timer2);
  11. startMove(this.offsetLeft);
  12. }
  13. aBox[i].onmouseout = function(){
  14. timer2 = setTimeout(function(){
  15. startMove(0);
  16. }, 100);
  17. }
  18. }
  19. oMark.onmouseover = function(){
  20. clearTimeout(timer2);
  21. }
  22. oMark.onmouseout = function(){
  23. timer2 = setTimeout(function(){
  24. startMove(0);
  25. }, 100);
  26. }
  27. function startMove(iTarget){
  28. clearInterval(timer);
  29. timer = setInterval(function(){
  30. iSpeed += (iTarget - oMark.offsetLeft) / 6;
  31. iSpeed *= 0.75;
  32. if(Math.abs(iSpeed) <= 1 && Math.abs(iTarget - oMark.offsetLeft) <= 1){
  33. clearInterval(timer);
  34. oMark.style.left = iTarget + 'px';
  35. childUl.style.left = -iTarget + 'px';
  36. iSpeed = 0;
  37. } else {
  38. oMark.style.left = oMark.offsetLeft + iSpeed + 'px';
  39. childUl.style.left = -oMark.offsetLeft + 'px';
  40. }
  41. }, 30)
  42. }
  43. }

弹性过界:

IE老版本下,宽高不能为负数。

  1. <div id="div1"></div>
  1. #div1 { width: 100px; height: 30px; background: red; }
  1. window.onload = function(){
  2. var oDiv = document.getElementById('div1');
  3. var timer = null;
  4. var iSpeed = 0;
  5. oDiv.onmouseover = function(){
  6. startMove(300);
  7. }
  8. oDiv.onmouseout = function(){
  9. startMove(30);
  10. }
  11. function startMove(iTarget){
  12. clearInterval(timer);
  13. timer = setInterval(function(){
  14. iSpeed += (iTarget - oDiv.offsetHeight) / 6;
  15. iSpeed *= 0.75;
  16. if(Math.abs(iSpeed) <= 1 && Math.abs(iTarget - oDiv.offsetHeight) <= 1){
  17. clearInterval(timer);
  18. iSpeed = 0;
  19. oDiv.style.height = iTarget + 'px';
  20. } else {
  21. var H = oDiv.offsetHeight + iSpeed;
  22. if(H < 0) {
  23. H = 0;
  24. } //解决IE下的弹性过界的问题
  25. oDiv.style.height = H + 'px';
  26. }
  27. }, 30)
  28. }
  29. }

弹性运动框架

  1. function startMove(obj,json,fn){
  2. clearInterval(obj.timer);
  3. var iSpeed = {};
  4. for(var attr in json){
  5. iSpeed[attr] = 0;
  6. }
  7. obj.timer = setInterval(function(){
  8. var bBtn = true;
  9. for(var attr in json){
  10. var iCur = 0;
  11. if(attr == 'opacity'){
  12. iCur = Math.round(getStyle(obj,attr)*100);
  13. }
  14. else{
  15. iCur = parseInt(getStyle(obj,attr));
  16. }
  17. iSpeed[attr] += (json[attr] - iCur)/6;
  18. iSpeed[attr] *= 0.75;
  19. if( Math.abs(iSpeed[attr])>1 || Math.abs(json[attr] - iCur)>1 ){
  20. bBtn = false;
  21. }
  22. var value = iCur + iSpeed[attr];
  23. if(value < 0 && (attr == 'width'||attr == 'height')){
  24. value = 0;
  25. }
  26. if(attr == 'opacity'){
  27. obj.style.filter = 'alpha(opacity='+ value +')';
  28. obj.style.opacity = value/100;
  29. }
  30. else{
  31. obj.style[attr] = value + 'px';
  32. }
  33. }
  34. if(bBtn){
  35. clearInterval(obj.timer);
  36. for(var attr in json){
  37. iSpeed[attr] = 0;
  38. if(attr == 'opacity'){
  39. obj.style.filter = 'alpha(opacity='+ json[attr] +')';
  40. obj.style.opacity = json[attr]/100;
  41. }
  42. else{
  43. obj.style[attr] = json[attr] + 'px';
  44. }
  45. }
  46. if(fn){
  47. fn.call(obj);
  48. }
  49. }
  50. },30);
  51. }
  52. function getStyle(obj,attr){
  53. if(obj.currentStyle){
  54. return obj.currentStyle[attr];
  55. }
  56. else{
  57. return getComputedStyle(obj,false)[attr];
  58. }
  59. }

碰撞运动

无重力匀速碰撞运动

  1. <div id="div1"></div>
  1. #div1 { width: 100px; height: 100px; background: red; position: absolute; }
  1. window.onload = function(){
  2. var oDiv = document.getElementById('div1');
  3. var iSpeedX = 10;
  4. var iSpeedY = 10;
  5. startMove();
  6. function startMove(){
  7. setInterval(function(){
  8. var L = oDiv.offsetLeft + iSpeedX;
  9. var T = oDiv.offsetTop + iSpeedY;
  10. if(T > document.documentElement.clientHeight - oDiv.offsetHeight){
  11. T = document.documentElement.clientHeight - oDiv.offsetHeight;
  12. iSpeedY *= -1;
  13. } else if(T < 0){
  14. T = 0;
  15. iSpeedY *= -1;
  16. }
  17. if(L > document.documentElement.clientWidth - oDiv.offsetWidth){
  18. L = document.documentElement.clientWidth - oDiv.offsetWidth;
  19. iSpeedX *= -1;
  20. } else if(L < 0){
  21. L = 0;
  22. iSpeedX *= -1;
  23. }
  24. oDiv.style.left = L + 'px';
  25. oDiv.style.top = T + 'px';
  26. }, 30);
  27. }
  28. }

自由落体加碰撞反弹

  1. <input type="button" value="开始运动" id="input1">
  2. <div id="div1"></div>
  1. #div1 { width: 100px; height: 100px; background: red; position: absolute; }
  1. window.onload = function(){
  2. var oInput = document.getElementById('input1');
  3. var oDiv = document.getElementById('div1');
  4. var timer = null;
  5. var iSpeed = 0;
  6. oInput.onclick = function(){
  7. startMove();
  8. }
  9. function startMove(){
  10. clearInterval(timer);
  11. timer = setInterval(function(){
  12. iSpeed += 3;
  13. var T = oDiv.offsetTop + iSpeed;
  14. if(T > document.documentElement.clientHeight - oDiv.offsetHeight){
  15. T = document.documentElement.clientHeight - oDiv.offsetHeight;
  16. iSpeed *= -1;
  17. iSpeed *= 0.75;
  18. }
  19. oDiv.style.top = T + 'px';
  20. }, 30);
  21. }
  22. }

抛物线落体

  1. <input type="button" value="开始运动" id="input1">
  2. <div id="div1"></div>
  1. #div1 { width: 100px; height: 100px; background: red; position: absolute; top: 500px; }
  1. window.onload = function(){
  2. var oInput = document.getElementById('input1');
  3. var oDiv = document.getElementById('div1');
  4. var timer = null;
  5. var iSpeed = -40;
  6. var iSpeedX = 10;
  7. oInput.onclick = function(){
  8. startMove();
  9. }
  10. function startMove(){
  11. clearInterval(timer);
  12. timer = setInterval(function(){
  13. iSpeed += 3;
  14. var T = oDiv.offsetTop + iSpeed;
  15. if(T > document.documentElement.clientHeight - oDiv.offsetHeight){
  16. T = document.documentElement.clientHeight - oDiv.offsetHeight;
  17. iSpeed *= -1;
  18. iSpeed *= 0.75;
  19. iSpeedX *= 0.75;
  20. }
  21. oDiv.style.top = T + 'px';
  22. oDiv.style.left = oDiv.offsetLeft + iSpeedX + 'px';
  23. }, 30);
  24. }
  25. }

iphone拖拽效果

  1. <div id="iphone" >
  2. <div id="wrap">
  3. <ul id="ul1">
  4. <li style="background:url(images/pic1.png);" title="妙味课堂"></li>
  5. <li style="background:url(images/pic2.png);" title="妙味课堂"></li>
  6. <li style="background:url(images/pic3.png);" title="妙味课堂"></li>
  7. <li style="background:url(images/pic4.png);" title="妙味课堂"></li>
  8. </ul>
  9. </div>
  10. </div>
  1. window.onload = function(){
  2. var oUl = document.getElementById('ul1');
  3. var aLi = oUl.getElementsByTagName('li');
  4. var disX = 0;
  5. var downX = 0;
  6. var iNow = 0;
  7. var timer = null;
  8. var iSpeed = 0;
  9. oUl.onmousedown = function(ev){
  10. var ev = ev || window.event;
  11. disX = ev.clientX - oUl.offsetLeft;
  12. downX = ev.clientX;
  13. clearInterval(timer);
  14. document.onmousemove = function(ev){
  15. var ev = ev || window.event;
  16. oUl.style.left = ev.clientX - disX + 'px';
  17. };
  18. document.onmouseup = function(ev){
  19. document.onmousemove = null;
  20. document.onmouseup = null;
  21. var ev = ev || window.event;
  22. if( ev.clientX < downX ){
  23. //alert('←');
  24. if( iNow != aLi.length-1 ){
  25. iNow++;
  26. }
  27. startMove( - iNow * aLi[0].offsetWidth );
  28. }
  29. else{
  30. //alert('→');
  31. if( iNow != 0 ){
  32. iNow--;
  33. }
  34. startMove( - iNow * aLi[0].offsetWidth );
  35. }
  36. };
  37. return false;
  38. };
  39. function startMove(iTarget){
  40. clearInterval(timer);
  41. timer = setInterval(function(){
  42. iSpeed += (iTarget - oUl.offsetLeft)/6;
  43. iSpeed *= 0.75;
  44. if( Math.abs(iSpeed)<=1 && Math.abs(iTarget - oUl.offsetLeft)<=1 ){
  45. clearInterval(timer);
  46. iSpeed = 0;
  47. oUl.style.left = iTarget + 'px';
  48. }
  49. else{
  50. oUl.style.left = oUl.offsetLeft + iSpeed + 'px';
  51. }
  52. },30);
  53. }
  54. };

碰撞弹窗,模仿官网公告菜单实例

  1. <div id="div1"></div>
  1. #div1{ width:100px; height:100px; background:red; position:absolute;}
  1. window.onload = function(){
  2. var oDiv = document.getElementById('div1');
  3. var disX = 0;
  4. var disY = 0;
  5. var prevX = 0;
  6. var prevY = 0;
  7. var iSpeedX = 0;
  8. var iSpeedY = 0;
  9. var timer = null;
  10. oDiv.onmousedown = function(ev){
  11. var ev = ev || window.event;
  12. disX = ev.clientX - oDiv.offsetLeft;
  13. disY = ev.clientY - oDiv.offsetTop;
  14. prevX = ev.clientX;
  15. prevY = ev.clientY;
  16. document.onmousemove = function(ev){
  17. var ev = ev || window.event;
  18. oDiv.style.left = ev.clientX - disX + 'px';
  19. oDiv.style.top = ev.clientY - disY + 'px';
  20. iSpeedX = ev.clientX - prevX;
  21. iSpeedY = ev.clientY - prevY;
  22. prevX = ev.clientX;
  23. prevY = ev.clientY;
  24. };
  25. document.onmouseup = function(){
  26. document.onmousemove = null;
  27. document.onmouseup = null;
  28. startMove();
  29. };
  30. return false;
  31. };
  32. function startMove(){
  33. clearInterval(timer);
  34. timer = setInterval(function(){
  35. iSpeedY += 3;
  36. var L = oDiv.offsetLeft + iSpeedX;
  37. var T = oDiv.offsetTop + iSpeedY;
  38. if(T>document.documentElement.clientHeight - oDiv.offsetHeight){
  39. T = document.documentElement.clientHeight - oDiv.offsetHeight;
  40. iSpeedY *= -1;
  41. iSpeedY *= 0.75;
  42. iSpeedX *= 0.75;
  43. }
  44. else if(T<0){
  45. T = 0;
  46. iSpeedY *= -1;
  47. iSpeedY *= 0.75;
  48. }
  49. if(L>document.documentElement.clientWidth - oDiv.offsetWidth){
  50. L = document.documentElement.clientWidth - oDiv.offsetWidth;
  51. iSpeedX *= -1;
  52. iSpeedX *= 0.75;
  53. }
  54. else if(L<0){
  55. L = 0;
  56. iSpeedX *= -1;
  57. iSpeedX *= 0.75;
  58. }
  59. oDiv.style.left = L + 'px';
  60. oDiv.style.top = T + 'px';
  61. },30);
  62. }
  63. };

运动框架(时间版)

JQ的animate

Tween介绍

用原生JS写时间版运动框架

原生JS写运动框架

  1. function startMove(obj, json, time, fx, fn){
  2. //time: 运动事件 fx: 运动形式
  3. var iCur = {}; //初始值
  4. var startTime = now();
  5. for(var attr in json){
  6. iCur[attr] = 0;
  7. if(attr == 'opacity'){
  8. iCur[attr] = Math.round(getStyle(obj, attr)*100);
  9. } else {
  10. iCur[attr] = parseInt(getStyle(obj, attr));
  11. }
  12. }
  13. clearInterval(obj.timer)
  14. obj.timer = setInterval(function(){
  15. var changeTime = now();
  16. var t = time - Math.max(0, startTime - changeTime + time) //范围:0到time
  17. for(var attr in json){
  18. var value = Tween[fx](t, iCur[attr], json[attr] - iCur[attr], time);
  19. if(attr == 'opacity'){
  20. obj.style.oapcity = value / 100;
  21. obj.style.filter = 'alpha(opacity=' + value + ')';
  22. } else {
  23. obj.style[attr] = value + 'px';
  24. }
  25. }
  26. if(t == time){
  27. clearInterval(obj.timer);
  28. if(fn){
  29. fn.call(obj);
  30. }
  31. }
  32. }, 13)
  33. function getStyle(obj, attr){
  34. if(obj.currentStyle){
  35. return obj.currentStyle[attr];
  36. } else {
  37. return getComputedStyle(obj, false)[attr];
  38. }
  39. }
  40. function now(){
  41. return (new Date()).getTime();
  42. }
  43. }
  44. var Tween = {
  45. //t: 当前时间 b: 初始值 c: 变化量 d: 持续时间
  46. //return: 返回的是运动到的目标点
  47. linear: function (t, b, c, d){ //匀速
  48. return c*t/d + b;
  49. },
  50. easeIn: function(t, b, c, d){ //加速曲线
  51. return c*(t/=d)*t + b;
  52. },
  53. easeOut: function(t, b, c, d){ //减速曲线
  54. return -c *(t/=d)*(t-2) + b;
  55. },
  56. easeBoth: function(t, b, c, d){ //加速减速曲线
  57. if ((t/=d/2) < 1) {
  58. return c/2*t*t + b;
  59. }
  60. return -c/2 * ((--t)*(t-2) - 1) + b;
  61. },
  62. easeInStrong: function(t, b, c, d){ //加加速曲线
  63. return c*(t/=d)*t*t*t + b;
  64. },
  65. easeOutStrong: function(t, b, c, d){ //减减速曲线
  66. return -c * ((t=t/d-1)*t*t*t - 1) + b;
  67. },
  68. easeBothStrong: function(t, b, c, d){ //加加速减减速曲线
  69. if ((t/=d/2) < 1) {
  70. return c/2*t*t*t*t + b;
  71. }
  72. return -c/2 * ((t-=2)*t*t*t - 2) + b;
  73. },
  74. elasticIn: function(t, b, c, d, a, p){ //正弦衰减曲线(弹动渐入)
  75. if (t === 0) {
  76. return b;
  77. }
  78. if ( (t /= d) == 1 ) {
  79. return b+c;
  80. }
  81. if (!p) {
  82. p=d*0.3;
  83. }
  84. if (!a || a < Math.abs(c)) {
  85. a = c;
  86. var s = p/4;
  87. } else {
  88. var s = p/(2*Math.PI) * Math.asin (c/a);
  89. }
  90. return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
  91. },
  92. elasticOut: function(t, b, c, d, a, p){ //正弦增强曲线(弹动渐出)
  93. if (t === 0) {
  94. return b;
  95. }
  96. if ( (t /= d) == 1 ) {
  97. return b+c;
  98. }
  99. if (!p) {
  100. p=d*0.3;
  101. }
  102. if (!a || a < Math.abs(c)) {
  103. a = c;
  104. var s = p / 4;
  105. } else {
  106. var s = p/(2*Math.PI) * Math.asin (c/a);
  107. }
  108. return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
  109. },
  110. elasticBoth: function(t, b, c, d, a, p){
  111. if (t === 0) {
  112. return b;
  113. }
  114. if ( (t /= d/2) == 2 ) {
  115. return b+c;
  116. }
  117. if (!p) {
  118. p = d*(0.3*1.5);
  119. }
  120. if ( !a || a < Math.abs(c) ) {
  121. a = c;
  122. var s = p/4;
  123. }
  124. else {
  125. var s = p/(2*Math.PI) * Math.asin (c/a);
  126. }
  127. if (t < 1) {
  128. return - 0.5*(a*Math.pow(2,10*(t-=1)) *
  129. Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
  130. }
  131. return a*Math.pow(2,-10*(t-=1)) *
  132. Math.sin( (t*d-s)*(2*Math.PI)/p )*0.5 + c + b;
  133. },
  134. backIn: function(t, b, c, d, s){ //回退加速(回退渐入)
  135. if (typeof s == 'undefined') {
  136. s = 1.70158;
  137. }
  138. return c*(t/=d)*t*((s+1)*t - s) + b;
  139. },
  140. backOut: function(t, b, c, d, s){
  141. if (typeof s == 'undefined') {
  142. s = 3.70158; //回缩的距离
  143. }
  144. return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
  145. },
  146. backBoth: function(t, b, c, d, s){
  147. if (typeof s == 'undefined') {
  148. s = 1.70158;
  149. }
  150. if ((t /= d/2 ) < 1) {
  151. return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
  152. }
  153. return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
  154. },
  155. bounceIn: function(t, b, c, d){ //弹球减振(弹球渐出)
  156. return c - Tween['bounceOut'](d-t, 0, c, d) + b;
  157. },
  158. bounceOut: function(t, b, c, d){
  159. if ((t/=d) < (1/2.75)) {
  160. return c*(7.5625*t*t) + b;
  161. } else if (t < (2/2.75)) {
  162. return c*(7.5625*(t-=(1.5/2.75))*t + 0.75) + b;
  163. } else if (t < (2.5/2.75)) {
  164. return c*(7.5625*(t-=(2.25/2.75))*t + 0.9375) + b;
  165. }
  166. return c*(7.5625*(t-=(2.625/2.75))*t + 0.984375) + b;
  167. },
  168. bounceBoth: function(t, b, c, d){
  169. if (t < d/2) {
  170. return Tween['bounceIn'](t*2, 0, c, d) * 0.5 + b;
  171. }
  172. return Tween['bounceOut'](t*2-d, 0, c, d) * 0.5 + c*0.5 + b;
  173. }
  174. }

解决定时器缓慢的问题的方法

  1. window.onfocus = function(){ //当页面切换回来之后再把定时器打开
  2. console.log(1);
  3. timer = setInterval(toRun, 2000);
  4. }
  5. window.onblur = function(){ //当切换页面的时候把定时器关上
  6. console.log(2);
  7. clearInterval(timer);
  8. }
  9. //timer = setInterval(toRun, 2000);

扩展JQ的运动形式

  1. $.extend(jQuery.easing, {
  2. //以下为Tween中的公式 为了匹配jQuery,添加了一个不用的参数x
  3. easeIn: function(x, t, b, c, d){ //加速曲线
  4. return c*(t/=d)*t + b;
  5. },
  6. easeOut: function(x, t, b, c, d){ //减速曲线
  7. return -c *(t/=d)*(t-2) + b;
  8. },
  9. easeBoth: function(x, t, b, c, d){ //加速减速曲线
  10. if ((t/=d/2) < 1) {
  11. return c/2*t*t + b;
  12. }
  13. return -c/2 * ((--t)*(t-2) - 1) + b;
  14. },
  15. easeInStrong: function(x, t, b, c, d){ //加加速曲线
  16. return c*(t/=d)*t*t*t + b;
  17. },
  18. easeOutStrong: function(x, t, b, c, d){ //减减速曲线
  19. return -c * ((t=t/d-1)*t*t*t - 1) + b;
  20. },
  21. easeBothStrong: function(x, t, b, c, d){ //加加速减减速曲线
  22. if ((t/=d/2) < 1) {
  23. return c/2*t*t*t*t + b;
  24. }
  25. return -c/2 * ((t-=2)*t*t*t - 2) + b;
  26. },
  27. elasticIn: function(x, t, b, c, d, a, p){ //正弦衰减曲线(弹动渐入) //a和p与运动幅度有关,可以不写,因为有默认值
  28. if (t === 0) {
  29. return b;
  30. }
  31. if ( (t /= d) == 1 ) {
  32. return b+c;
  33. }
  34. if (!p) {
  35. p=d*0.3;
  36. }
  37. if (!a || a < Math.abs(c)) {
  38. a = c;
  39. var s = p/4;
  40. } else {
  41. var s = p/(2*Math.PI) * Math.asin (c/a);
  42. }
  43. return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
  44. },
  45. elasticOut: function(x, t, b, c, d, a, p){ //正弦增强曲线(弹动渐出)
  46. if (t === 0) {
  47. return b;
  48. }
  49. if ( (t /= d) == 1 ) {
  50. return b+c;
  51. }
  52. if (!p) {
  53. p=d*0.3;
  54. }
  55. if (!a || a < Math.abs(c)) {
  56. a = c;
  57. var s = p / 4;
  58. } else {
  59. var s = p/(2*Math.PI) * Math.asin (c/a);
  60. }
  61. return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
  62. },
  63. elasticBoth: function(x, t, b, c, d, a, p){
  64. if (t === 0) {
  65. return b;
  66. }
  67. if ( (t /= d/2) == 2 ) {
  68. return b+c;
  69. }
  70. if (!p) {
  71. p = d*(0.3*1.5);
  72. }
  73. if ( !a || a < Math.abs(c) ) {
  74. a = c;
  75. var s = p/4;
  76. }
  77. else {
  78. var s = p/(2*Math.PI) * Math.asin (c/a);
  79. }
  80. if (t < 1) {
  81. return - 0.5*(a*Math.pow(2,10*(t-=1)) *
  82. Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
  83. }
  84. return a*Math.pow(2,-10*(t-=1)) *
  85. Math.sin( (t*d-s)*(2*Math.PI)/p )*0.5 + c + b;
  86. },
  87. backIn: function(x, t, b, c, d, s){ //回退加速(回退渐入)
  88. if (typeof s == 'undefined') {
  89. s = 1.70158;
  90. }
  91. return c*(t/=d)*t*((s+1)*t - s) + b;
  92. },
  93. backOut: function(x, t, b, c, d, s){
  94. if (typeof s == 'undefined') {
  95. s = 3.70158; //回缩的距离
  96. }
  97. return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
  98. },
  99. backBoth: function(x, t, b, c, d, s){
  100. if (typeof s == 'undefined') {
  101. s = 1.70158;
  102. }
  103. if ((t /= d/2 ) < 1) {
  104. return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
  105. }
  106. return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
  107. },
  108. bounceIn: function(x, t, b, c, d){ //弹球减振(弹球渐出)
  109. return c - this['bounceOut'](x, d-t, 0, c, d) + b;
  110. },
  111. bounceOut: function(x, t, b, c, d){
  112. if ((t/=d) < (1/2.75)) {
  113. return c*(7.5625*t*t) + b;
  114. } else if (t < (2/2.75)) {
  115. return c*(7.5625*(t-=(1.5/2.75))*t + 0.75) + b;
  116. } else if (t < (2.5/2.75)) {
  117. return c*(7.5625*(t-=(2.25/2.75))*t + 0.9375) + b;
  118. }
  119. return c*(7.5625*(t-=(2.625/2.75))*t + 0.984375) + b;
  120. },
  121. bounceBoth: function(x, t, b, c, d){
  122. if (t < d/2) {
  123. return this['bounceIn'](x, t*2, 0, c, d) * 0.5 + b;
  124. }
  125. return this['bounceOut'](x, t*2-d, 0, c, d) * 0.5 + c*0.5 + b;
  126. }
  127. });
添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注