Home > Developer > JavaScript
Javascript learning notes are moving at a constant speed-Case Study: sharing common functions of websites
The exercise in Javascript is often used on websites. This time, I would like to share with you some basic applications of the exercise. This makes it easy for you to use it directly during development. The code is easy to understand and suitable for beginners. Finally, we will organize a set of our own motion frames step by step. Move the mouse over the share, and the div on the left will be displayed. Move the meeting to recover. I believe this is useful for everyone. Let's take a look at how the code is implemented. <Style type = "text/css"> # div1 {width: 150px; height: 200px; background: green; position: absolute; left:-150px ;} # div1 span {position: absolute; width: 20px; height: 60px; line-height: 20px; background: blue; right:-20px; top: 70px ;} </style> <body> <div id = "div1"> <span> share to </span> </div> </body> The following Javascript code <script type = "text/javascript"> window. onload = function () {var oDiv = document. g EtElementById ("div1"); oDiv. onmouseover = function () {startMove (0) ;}; oDiv. onmouseout = function () {startMove (-150) ;};} var time = null; function startMove (iTraget) {var oDiv = document. getElementById ("div1"); clearInterval (time); time = setInterval (function () {var speed = 0; if (oDiv. offsetLeft> iTraget) {speed =-10;} else {speed = 10;} if (oDiv. offsetLeft = iTraget) {clearInterval (time);} else {oDiv. style. left = ODiv. offsetLeft + speed + 'px ';}}, 30) ;}</script> the initial left of the style is-150, so that the div is scaled in, 0 is displayed. We only need to change this value. The iTarget parameter in startMove is the target point, indicating which target point will be stopped. Control the speed to control the speed. If it reaches the target point, stop the timer. Rule: * assume that * left: 30 iTarget: 300 is the right X left: 600 iTarget: 50 to get to the left as the negative ** through the current position left and the relationship between the target point iTarget to infer the speed of the positive and negative note: first, the timer is turned off, because every time you move to share, A timer will be enabled, and the more you open it, the faster it will be, because multiple timers will be executed at the same time. So ensure that a timer works every time. Follow the principle that the fewer parameters, the better, the same function, so according to the above rule, speed is not passed as a parameter. For example, if you take a taxi and tell the taxi driver where the speed is already 100 yards, it is generally impossible. You can't tell the master how fast you want to run, so the program is the same. Here we will remove the passing parameter of speed.
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
