Home > Developer > JavaScript

How to realize uniform motion _javascript technique in JavaScript

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

The web site will often use JavaScript in the movement, this time to share some of the basic sports applications. Convenient for everyone to use directly in the development.

The code is easy to understand and is suitable for beginners. Finally, a step-by-step arrangement of their own sports framework.

Application Case Effect Chart:

The mouse moves to share and the div on the left is displayed. Move the meeting to restore itself. Believe this everyone will use very practical, below see how the code is implemented.

Copy Code code as follows:

<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>

Copy Code code as follows:

<body>
<div id= "Div1" >
<span>
Share to
</span>
</div>
</body>

Here's the JavaScript code

Copy Code code as follows:

<script type= "Text/javascript" >
Window.onload=function () {
var Odiv=document.getelementbyid ("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>

Ideas:

The original left in the style is-150 so the div is indented inside and the 0 will show up. So we just need to change the value.

The parameter ITarget in the Startmove is the target point, indicating which target point will stop.

Control the size of the speed can control the speed of movement. Stop the timer if the target point is reached.

Law:

* Assuming

* Left:30 itarget:300 to the right
* left:600 itarget:50 to left negative
*
* By the relationship between the current position left and the target point ITarget infer the positive and negative of the velocity


Note: A timer will be turned off, because every time you move to share, you will open a timer, the more open the more relative speed is faster, because there will be multiple timer execution.

So each time to ensure that a timer work.

Follow: function function, the less the better the principle, so according to the above rules of speed is not as a parameter passed in.

Give a life example: You take a taxi, tell the taxi driver has 100 yards of speed to where, generally is not possible bar. You can't tell Shifu how fast you're going to run.

So the program is the same, here is the speed of the reference removed.

Of course, there will be many problems in the current framework of motion, which will be solved in succession. In the next article, let's explore how the uniform motion stops.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
how to encode in javascript how to print in javascript how to exit in javascript how to get browser type in javascript how to get type in javascript how to get user input in javascript how to output text in javascript
Related Article
JavaScript solution to the eight Queens Problem method summar...
Ajax and 302 response code Testing

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More