Home > Developer > Web Develop
Elastic movement + friction, Elastic Friction
| <! DOCTYPE html> | |
| <Html> | |
| <Head lang = "en"> | |
| <Meta charset = "UTF-8"> | |
| <Style type = "text/css"> | |
| # Box {width: 100px; height: 100px; background: red; position: absolute; left: 0 ;} | |
| Span {height: 900px; border-left: 1px red solid; position: absolute; left: 500px ;} | |
| </Style> | |
| <Title> </title> | |
| <Script type = "text/javascript"> | |
| Window. onload = function () | |
| { | |
| Var oInput = document. getElementById ("input1 "); | |
| Var oDiv = document. getElementById ("box "); | |
| Var timer = null; | |
| OInput. onclick = function () | |
| { | |
| StartMove (); | |
| }; | |
| Function startMove () | |
| { | |
| ClearInterval (timer ); | |
| Var iSpeed = 0; | |
| Timer = setInterval (function () | |
| { | |
| ISpeed + = (500-oDiv.offsetLeft)/50; // elastic motion | |
| ISpeed * = 0.95; // Friction | |
| ODiv. style. left = oDiv. offsetLeft + iSpeed + "px "; | |
| }, 30) | |
| } | |
| } | |
| </Script> | |
| </Head> | |
| <Body> | |
| <Input type = "button" value = "Start motion" id = "input1"/> | |
| <Div id = "box"> </div> | |
| <Span> </span> | |
| </Body> | |
| </Html> |
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
