查看: 1097|回复: 0

[JavaScript/JQuery] javascript模拟重力感应弹跳,做个不一样的登陆端口

发表于 2018-4-7 08:00:02

javascript模拟重力感应弹跳,做个不一样的登陆端口

知识点:原生js动画效果 ,重力系统,弹跳算法, 迭代与递归, 动画序列, , 两种定时器配合使用, 循环判断注意事项 ,编程思想与解决方案思维。

html代码

  1. <div id="bg_wrap">
  2. <div><img src="images/1.jpg" width="100%" height="100%" alt="背景图"/></div>
  3. <div><img src="images/2.jpg" width="100%" height="100%" alt="背景图"/></div>
  4. <div><img src="images/3.jpg" width="100%" height="100%" alt="背景图"/></div>
  5. </div>
  6. <!--bg_wrap end-->
  7. <!--Login start-->
  8. <div id="Login">
  9. <h3 id="title" class="move">User Login</h3>
  10. <form action="http://web.tanzhouedu.com/" method="post" target="_blank">
  11. <input type="text" placeholder="Username" class="txt move" name="username" required autocomplete="off">
  12. <input type="password" placeholder="Password" class="txt move" name="password" required>
  13. <input 'type="submit" class="but move" value="Sign in" id="submit"/>
  14. </form>
  15. </div>
复制代码

css代码

  1. <style>
  2. * { margin: 0px; padding: 0px; }
  3. body { overflow: hidden; }
  4. #bg_wrap { width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; overflow: hidden; }
  5. #bg_wrap div { width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; opacity: 0; transition: opacity 3s}
  6. #bg_wrap div:nth-of-type(1){opacity:1}
  7. /*第一个背景div*/
  8. #Login { width: 272px; height: 300px; margin: 200px auto; }
  9. #Login .move { position: absolute; top:-100px; }
  10. #Login h3 { font-size: 30px; font-weight: 700; color: #ffffff; font-family: Andalus; text-align: center; margin-bottom: 30px; cursor: move; }
  11. #Login input.txt { width: 270px; height: 42px; color: #ffffff; background: rgba(45, 45, 45, .15); border-radius: 6px; border: 1px solid rgba(255, 255, 255, .15); box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1) inset; -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1) inset; -moz-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1) inset; margin-bottom: 25px; text-shadow: 0 1px 2px rgba(0, 0, 0, .1); text-indent: 10px; }
  12. #Login input.but { background: #ef4300; width: 272px; height: 44px; box-shadow: 0 15px 30px 0 rgba(255, 255, 255, .25) inset, 0 2px 7px 0 rgba(0, 0, 0, .2); -webkit-box-shadow: 0 15px 30px 0 rgba(255, 255, 255, .25) inset, 0 2px 7px 0 rgba(0, 0, 0, .2); -moz-box-shadow: 0 15px 30px 0 rgba(255, 255, 255, .25) inset, 0 2px 7px 0 rgba(0, 0, 0, .2); border: 0px; border-radius: 6px; color: #ffffff; font-size: 14px; text-align:center;}
  13. #Login input:focus { outline: none; -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1) inset, 0 2px 7px 0 rgba(0, 0, 0, .2); -moz-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1) inset, 0 2px 7px 0 rgba(0, 0, 0, .2); box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1) inset, 0 2px 7px 0 rgba(0, 0, 0, .2); }
  14. /*当input获取焦点的时候*/
  15. input::-webkit-input-placeholder { color: #ffffff; }
  16. /*修改输入框默认输入文字颜色*/
  17. #title { width: 270px; text-align: center }
  18. </style>
  19. </head>
复制代码

javascript代码:

  1. <script>
  2. /*
  3. 1. 背景渐变 (定时器 + 透明度改变){
  4. }
  5. */
  6. //function(){} /*匿名函数*/
  7. //()() /*IIFE 匿名函数立刻执行 函数自执行体*/
  8. (function(){
  9. var timer=null; /*声明定时器*/
  10. /*最新的元素获取写法 兼容ie8*//*一组元素*/
  11. var oImg=document.querySelectorAll('#bg_wrap div');
  12. var len=oImg.length; //3
  13. var index=0;
  14. timer=setInterval(function(){
  15. oImg[index].style.opacity=0;
  16. index++;//1 index=index+1;
  17. index%=len; // 求模取余 index=index%len;
  18. /*
  19. 0%3= 0 1%3=1 2%3=2 3%3=0整除了
  20. */
  21. oImg[index].style.opacity=1;
  22. },3000);
  23. })();
  24. // 表单重力模拟弹跳系统
  25. (function(){
  26. /*
  27. 改变定位元素的 top值 1
  28. 达到指定位置之后进行弹跳一次 1
  29. 多个元素依次运动
  30. 动画序列
  31. */
  32. var oMove=document.querySelectorAll('.move');
  33. var len=oMove.length;
  34. var timer=null;
  35. var timeout=null; //setTimeout
  36. var speed=3;
  37. /* for(var i=len-1;i>=0;i--){
  38. (function(x){
  39. setTimeout(function(){
  40. clearInterval(timer);
  41. var end=150+(x*60);
  42. timer=setInterval(function(){
  43. speed+=3;
  44. var T=oMove[x].offsetTop+speed;
  45. if(T>end){
  46. T=end;
  47. speed*=-1; // 让动量变为负数
  48. speed*=0.4; // 摩擦系数 每一次都慢一点
  49. }
  50. console.log(speed)
  51. oMove[x].style.top=T+'px';
  52. },20);
  53. },900*(len-1-x))
  54. })(i)
  55. } */
  56. //oMove[len-1];
  57. move(len-1);
  58. function move(index){
  59. //根据下标来计算end值
  60. if(index<0){//如果下标<0 我们清除所有定时器
  61. clearInterval(timer); //清除循环定时器
  62. clearTimeout(timeout); //清除延时定时器
  63. return; //终止函数
  64. }
  65. var end=150+(index*60);
  66. timer=setInterval(function(){
  67. //动量每回合自增3 模拟重力加速度
  68. speed+=3; // 4 7 11 -30 -27 -24 ... 30 -30
  69. //设置每一次的top值 他本身距离顶端的距离+ 动量
  70. var T=oMove[index].offsetTop+speed;
  71. //当元素的top大于设定值的时候
  72. if(T>end){
  73. T=end;
  74. speed*=-1; // 让动量变为负数
  75. speed*=0.4; // 摩擦系数 每一次都慢一点;
  76. }
  77. console.log(speed)
  78. oMove[index].style.top=T+'px';
  79. },20);
  80. //过多少时间之后执行函数
  81. timeout=setTimeout(function(){
  82. clearInterval(timer);
  83. index--; // 3=>2
  84. move(index); // 递归自己调用自己
  85. },900);
  86. }
  87. })();
  88. </script>
复制代码

有兴趣想学习web前端的可以来web前端qun“189394454”可以免费获取2018最新web前端学习资料。



回复

使用道具 举报