Analysis of adding motion methods to any value of JS motion effects, js Effects

Analysis of adding motion methods to any value of JS motion effects, js Effects

This article describes how to add motion to any value of JS motion effects. We will share this with you for your reference. The details are as follows:

Let's take a look at the previous example of JS's method for implementing multi-object motion:

<Script> window. onload = function () {var liTags = document. getElementsByTagName ('lil'); for (var I = 0; I <liTags. length; I ++) {liTags [I]. timer = null; // Add a timer liTags [I] to each li. onmouseover = function () {startMove (this, 400);} liTags [I]. onmouseout = function () {startMove (this, 200) ;}} function getStyle (obj, attr) {return getComputedStyle? GetComputedStyle (obj, false) [attr]: obj. currentStyle [attr];} function startMove (obj, iTarget) {clearInterval (obj. timer); obj. timer = setInterval (function () {var objWidth = parseInt (getStyle (obj, 'width'); // because the property is called through, therefore, the width must be enclosed in single quotes // var iSpeed = (iTarget-obj. offsetWidth)/10; // because objWidth stores the width of the current object, write objWidth instead of obj directly. objWidth var iSpeed = (iTarget-objWidth)/10; iSpeed = iSpeed> 0? Math. ceil (iSpeed): Math. floor (iSpeed); if (objWidth = iTarget) {clearInterval (obj. timer);} else {obj. style. width = objWidth + iSpeed + 'px '; }}, 30) ;}</script>

If the demand changes at this time, let the 2nd li mouse move in, the height changes, the third li mouse is still the border, the fourth li mouse moves into the background changes. One way is to copy a few minutes of the startMove function and change the previous width changes to height, borderWidht, and opacity transparency changes. But this is obviously a waste of time, so we can put themMerge into a function and pass the changed attributes as parameters.That's all.

1. the attr parameter is added to the function startMove (obj, attr, iTarget ).
2. How to call parameters: change the property name from obj. style to obj. style [attribute name]
3. Add events for each li separately

<Script> window. onload = function () {var liTags = document. getElementsByTagName ('lil'); for (var I = 0; I <liTags. length; I ++) {liTags [I]. timer = null; // Add a timer liTags [0] to each li. onmouseover = function () {startMove (this, 'width', 400);} liTags [0]. onmouseout = function () {startMove (this, 'width', 200);} liTags [1]. onmouseover = function () {startMove (this, 'height', 100);} liTags [1]. onmouseout = function () {StartMove (this, 'height', 50);} liTags [2]. onmouseover = function () {startMove (this, 'borderwidth', 10);} liTags [2]. onmouseout = function () {startMove (this, 'borderwidth', 2);} liTags [3]. onmouseover = function () {startMove (this, 'padding', 10);} liTags [3]. onmouseout = function () {startMove (this, 'padding', 0) ;}} function getStyle (obj, attr) {return getComputedStyle? GetComputedStyle (obj, false) [attr]: obj. currentStyle [attr];} function startMove (obj, attr, iTarget) {// attr: Pass the changed attribute to clearInterval (obj. timer); obj. timer = setInterval (function () {var objAttr = parseInt (getStyle (obj, attr); var iSpeed = (iTarget-objAttr)/10; iSpeed = iSpeed> 0? Math. ceil (iSpeed): Math. floor (iSpeed); if (objAttr = iTarget) {clearInterval (obj. timer);} else {// obj. style. width = objWidth + iSpeed + 'px '; obj. style [attr] = objAttr + iSpeed + 'px '; // required again. attribute name format changed to [] }}, 30) ;}</script>

When I run it, I find that the width, height, and border of the change are all correct, but the last change "Transparency" does not respond. What is the problem ??

First, the opacity value is 0.3 decimal,parseInt(getStyle(obj,attr)Then it becomes 0, and the biggest problem is when the final attribute value is set:obj.style[attr] =  objAttr+iSpeed+'px';Obviously, the opacity does not have the px Unit, so we need to further process the motion frame.

You need to judge that when the accepted parameter is "Transparency", you need to handle it separately.To solve the problem above.

Var objAttr = 0; if (attr = "opacity") {// because the computer has a problem with decimal processing, Math is used here. round: // objAttr = parseFloat (getStyle (obj, attr) * 100); // objAttr = parseInt (parseFloat (getStyle (obj, attr) * 100 ); objAttr = Math. round (parseFloat (getStyle (obj, attr) * 100);} else {objAttr = parseInt (getStyle (obj, attr ));}

DirectlyobjAttr = parseFloat(getStyle(obj,attr)*100);The computer cannot accurately process decimal places, which may cause some problems.

ParseInt:objAttr = parseInt(parseFloat(getStyle(obj,attr))*100);It can also process decimal places, but there is a slight deviation from the original state when the mouse is removed after testing.

It can be seen that when the mouse is removed, opacity should return to 1, but the result is 0.94.Math.roundRounding the function to solve the decimal problem here

Make a judgment, and make a judgment as follows

If (attr = "opacity") {obj. style. filter = 'Alpha (opacity: '+ (objAttr + iSpeed) +') '; obj. style. opacity = (objAttr + iSpeed)/100;} else {// obj. style. width = objWidth + iSpeed + 'px '; obj. style [attr] = objAttr + iSpeed + 'px '; // required again. attribute name format changed to []}

Complete code:

HTML section

<body><ul>  <li></li>  <li></li>  <li></li>  <li></li></ul></body>

Css section:

<style>    ul{list-style: none;}    ul li{      margin: 10px;      width: 200px;height: 50px;      border: 2px solid #c00;      background: lightblue;    }</style>

Js Section

<Script> window. onload = function () {var liTags = document. getElementsByTagName ('lil'); for (var I = 0; I <liTags. length; I ++) {liTags [I]. timer = null; // Add a timer liTags [0] to each li. onmouseover = function () {startMove (this, 'width', 400);} liTags [0]. onmouseout = function () {startMove (this, 'width', 200);} liTags [1]. onmouseover = function () {startMove (this, 'height', 100);} liTags [1]. onmouseout = function () {StartMove (this, 'height', 50);} liTags [2]. onmouseover = function () {startMove (this, 'borderwidth', 10);} liTags [2]. onmouseout = function () {startMove (this, 'borderwidth', 2);} liTags [3]. onmouseover = function () {startMove (this, 'opacity ', 30);} liTags [3]. onmouseout = function () {startMove (this, 'opacity ', 100) ;}} function getStyle (obj, attr) {return getComputedStyle? GetComputedStyle (obj, false) [attr]: obj. currentStyle [attr];} function startMove (obj, attr, iTarget) {// attr: Pass the changed attribute to clearInterval (obj. timer); obj. timer = setInterval (function () {var objAttr = 0; if (attr = "opacity") {// because the computer has a problem with decimal processing, here we use parseFloat to convert objAttr = Math. round (parseFloat (getStyle (obj, attr) * 100);} else {objAttr = parseInt (getStyle (obj, attr);} var iSpeed = (iTarget-objAttr) /1 0; iSpeed = iSpeed> 0? Math. ceil (iSpeed): Math. floor (iSpeed); if (objAttr = iTarget) {clearInterval (obj. timer);} else {if (attr = "opacity") {obj. style. filter = 'Alpha (opacity: '+ (objAttr + iSpeed) +') '; obj. style. opacity = (objAttr + iSpeed)/100;} else {// obj. style. width = objWidth + iSpeed + 'px '; obj. style [attr] = objAttr + iSpeed + 'px ';}}, 30) ;}</script>

The final result is as follows: