Shulou(Shulou.com)06/03 Report--

In this issue, the editor will bring you about how to create a general uniform movement framework. The article is rich in content and analyzes and narrates it from a professional point of view. I hope you can get something after reading this article.

First, how to distinguish between different styles in the animate function?

In the above, the sidebar effect uses the animate function to change the left value

Function animate (obj, target, speed) {clearInterval (timer); timer = setInterval (function () {if (obj.offsetLeft = = target) {clearInterval (timer);} else {obj.style.left = obj.offsetLeft + speed + 'px';}}, 30);}

The animate function used to fade in and out changes transparency.

Function animate (obj, target, speed) {clearInterval (timer); var cur = 0; timer = setInterval (function () {cur = css (obj, 'opacity') * 100; if (cur = = target) {clearInterval (timer);} else {cur + = speed; obj.style.opacity = cur / 100; obj.style.filter = "alpha (opacity:" + cur + ")";}}, 30);}

The first problem we face in order to make the encapsulated function universal is that this function should support both left value and transparency changes. A more general approach should be to support all style changes, such as the carousel function, which slides left and right, as well as up and down.

We can just make a judgment when we get the style and change the style. If the judgment is divided into two categories, we can achieve the goal, because other styles (margin, left, top, right, font-size, etc.) are all px, and transparency has no px unit.

Function animate (obj, attr, target, speed) {clearInterval (timer); var cur = 0; timer = setInterval (function () {if (attr = = 'opacity') {cur = css (obj,' opacity') * 100;} else {cur = parseInt (css (obj, attr));} if (cur = target) {clearInterval (timer);} else {if (attr = 'opacity') {obj.style.opacity = (cur + speed) / 100 Obj.style.filter = "alpha (opacity:" + (cur + speed) + ")";} else {obj.style [attr] = cur + speed + "px";}, 30);}

The merged animate has one more parameter attr than before, which is the changed style, obj: the changed object, target: the target value to which the style needs to be changed. Speed: size of each change in the style

Such as:

OImg.onmouseover = function () {animate (this, 'opacity', 100,10);}

OImg is the acquired picture object. The meanings of the parameters are as follows:

This: current picture object

Opacity: the style of change is transparency

100: when you move the mouse over the picture, the transparency becomes 100

10: transparency is added to the original by 10 at a time

Merged movement-by ghostwu img {border: none; opacity: 0.3; filter: alpha (opacity:30); position: absolute; left: 200px;} # box {width: 150px; height: 300px; background: red; position: absolute; left:-150px; top: 50px;} # box div {width: 28px; height: 100px; position: absolute; right:-28px; top: 100px; background: green } _ window.onload = function () {var oImg = document.getElementById ("img"), oBox = document.getElementById ("box"), timer = null; oImg.onmouseover = function () {animate (this, 'opacity', 100,10);} oImg.onmouseout = function () {animate (this,' opacity', 30,-10);} oBox.onmouseover = function () {animate (this, 'left', 0,10) } oBox.onmouseout = function () {animate (this, 'left',-150,10);} function animate (obj, attr, target, speed) {clearInterval (timer); var cur = 0; timer = setInterval (function () {if (attr = =' opacity') {cur = css (obj, 'opacity') * 100;} else {cur = parseInt (css (obj, attr));} if (cur = target) {clearInterval (timer) } else {if (attr = = 'opacity') {obj.style.opacity = (cur + speed) / 100; obj.style.filter = "alpha (opacity:" + (cur + speed) + ")";} else {obj.style [attr] = cur + speed + "px";}, 30);} function css (obj, attr) {if (obj.currentStyle) {return obj.currentStyle [attr] } else {return getComputedStyle (obj, false) [attr];} share to

The above is the complete code example.

When you test these two functions separately:

Move to the picture and move it out.

Move to share to, and then move out

There's no problem with this.

If you test like this:

Move to share, and then quickly move to the picture, at this time you will find that the sharing has stopped, which is illogical! According to reason, moving the mouse over the picture is equivalent to triggering the mouseout (mouse removal event) of "sharing to", so "sharing to" should be hidden at this time, not stop. What causes it? Because the two motions share a timer, when the mouse moves over the picture and starts the timer, the "share to" timer is stopped. So when we do multi-object motion, we have to split the timer, and each object has to have a timer, how to do it? Very simple, do not define a simple timer variable, we just add timer to the obj object, then each object has a timer property, which achieves the separation effect of the timer

The complete code after modification is as follows. Please expand it by yourself:

Document img {border: none; opacity: 0.3; filter: alpha (opacity:30); position: absolute; left: 200px;} # box {width: 150px; height: 300px; background: red; position: absolute; left:-150px; top: 50px;} # box div {width: 28px; height: 100px; position: absolute; right:-28px; top: 100px; background: green } _ window.onload = function () {var oImg = document.getElementById ("img"), oBox = document.getElementById ("box"); oImg.onmouseover = function () {animate (this, 'opacity', 100,10);} oImg.onmouseout = function () {animate (this,' opacity', 30,-10);} oBox.onmouseover = function () {animate (this, 'left', 0,10) } oBox.onmouseout = function () {animate (this, 'left',-150,10);} function animate (obj, attr, target, speed) {clearInterval (obj.timer); var cur = 0; obj.timer = setInterval (function () {if (attr = =' opacity') {cur = css (obj, 'opacity') * 100;} else {cur = parseInt (css (obj, attr)) } if (cur = = target) {clearInterval (obj.timer);} else {if (attr = = 'opacity') {obj.style.opacity = (cur + speed) / 100; obj.style.filter = "alpha (opacity:" + (cur + speed) + ")";} else {obj.style [attr] = cur + speed + "px";}, 30) } function css (obj, attr) {if (obj.currentStyle) {return obj.currentStyle [attr];} else {return getComputedStyle (obj, false) [attr];} share to

At this point, we have completed the modification of multi-object motion and different styles.

Second, let the animate function support multiple styles to change at the same time

For example:

OBox.onmouseover = function () {animate (this, {"width": 500, "height": 400}, 10);}

OBox is a div element, and the parameters of animate mean:

This: current div element

{width: 500, "height": 400}: change the width to 500 and the height to 400. The two styles should be completed at the same time.

10: the style changes 10 at a time (for example, the initial value of width 200-> 210,220,230.)

Complete simultaneous motion change code:

Document div {width: 200px; height: 200px; background: red;} _ window.onload = function () {var oBox = document.getElementById ("box"); oBox.onmouseover = function () {/ / animate (this, {"width": 500,500}, 10); animate (this, {"width": 500,400}, 10);} function animate (obj, attr, speed) {clearInterval (obj.timer) Var cur = 0; obj.timer = setInterval (function () {for (var key in attr) {if (key = = 'opacity') {cur = css (obj,' opacity') * 100;} else {cur = parseInt (css (obj, key));} var target = attr [key]; if (cur = = target) {clearInterval (obj.timer) } else {if (key = = 'opacity') {obj.style.opacity = (cur + speed) / 100; obj.style.filter = "alpha (opacity:" + (cur + speed) + ")";} else {obj.style [key] = cur + speed + "px";}}, 30);} function css (obj, attr) {if (obj.currentStyle) {return obj.currentStyle [attr] } else {return getComputedStyle (obj, false) [attr];}

Please expand this code yourself, this code can move at the same time, but there is a problem:

Initial width and height of div (width: 200, height: 200)

Change step size is the same (10)

The change time is the same (every 30 milliseconds)

Target (width: 500, height: 400)

Can you think of anything? (two people are on the same starting line, the same speed and the same time, but they have to reach different goals at the same time, one 500 and one 400)

The answer is obvious, it must be the one near the target (height: 400) that arrives first, then turns off the timer on the object, and the other target that is farther away (width: 500) will not reach it.

You can output the current and target values under this code:

Var target = attr [key]; console.log (key, cur, target)

The result of the output is:

As you can see from the figure above, height has reached 400px, but width has stopped at 410px, why not 400px? Because the else statement is executed, width = cur + 10 = 400 + 10 = 410, and then height arrives at 400px and stops the timer, so width stops at 410px.

So how do we solve this problem?

In fact, it is also easy to do, that is, do not turn off the timer when height = 400. you should turn off the timer when width = 500. isn't it the same time to achieve the goal at the same time?

The modified code is as follows:

Document div {width: 200px; height: 200px; background: red;} _ window.onload = function () {var oBox = document.getElementById ("box"); oBox.onmouseover = function () {animate (this, {"width": 500,400}, 10);} function animate (obj, attr, speed) {clearInterval (obj.timer); var cur = 0; obj.timer = setInterval (function () {var bFlag = true) For (var key in attr) {if (key = = 'opacity') {cur = css (obj,' opacity') * 100;} else {cur = parseInt (css (obj, key));} var target = attr [key]; if (cur! = target) {bFlag = false; if (key = = 'opacity') {obj.style.opacity = (cur + speed) / 100 Obj.style.filter = "alpha (opacity:" + (cur + speed) + ")";} else {obj.style [key] = cur + speed + "px";} if (bFlag) {clearInterval (obj.timer);}}, 30);} function css (obj, attr) {if (obj.currentStyle) {return obj.currentStyle [attr];} else {return getComputedStyle (obj, false) [attr];}

Declare a variable in the (width, height) style of bFlag = true. As long as one of the for loops fails to reach the target, the value of bFlag is false, so the timer will not be turned off. When both reach the target, turn off the timer.

III. Sequential motion

If the style changes, come in order, not at the same time, such as:

OBox.onmouseover = function () {/ / callback function: pass the function as an argument to another function animate (this, {'width': 500}, 10, function () {animate (this, {' height': 500}, 10);});}

When you change width to 500px, if you pass the callback function, then execute the motion in the callback function

The complete code after modification:

General uniform motion framework-by ghostwu div {width: 200px; height: 200px; background: red;} _ window.onload = function () {var oBox = document.getElementById ("box"); oBox.onmouseover = function () {/ / callback function: pass the function as an argument to another function animate (this, {'width': 500}, 10, function () {animate (this, {' height': 500}, 10) });} function animate (obj, attr, speed, fn) {clearInterval (obj.timer); var cur = 0; obj.timer = setInterval (function () {var bFlag = true; for (var key in attr) {if (key = = 'opacity') {cur = css (obj,' opacity') * 100;} else {cur = parseInt (css (obj, key));} var target = attr [key] If (cur! = target) {bFlag = false; if (key = = 'opacity') {obj.style.opacity = (cur + speed) / 100; obj.style.filter = "alpha (opacity:" + (cur + speed) + ")";} else {obj.style [key] = cur + speed + "px";} if (bFlag) {clearInterval (obj.timer); fn & fn.call (obj) }}, 30);} function css (obj, attr) {if (obj.currentStyle) {return obj.currentStyle [attr];} else {return getComputedStyle (obj, false) [attr];} above is how to build a general uniform motion framework shared by the editor. If you happen to have similar doubts, please refer to the above analysis to understand. If you want to know more about it, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.