Native JS encapsulate motion Functions

Native JS encapsulate motion Functions

Before learning native JS, I have been using jQuery to write sports for various conveniences, but I don't know why. Today I have to read a javascript video tutorial (I won't talk about it here to avoid advertising suspicion ), only one word can be used to describe the post feeling ------- just fill in the top.

 

 

/*-Obj refers to the DOM object-json refers to the CSS style-example startMove (oDiv, {width: 100, height: 100}, function (){}) */function startMove (obj, json, fnEnd) {clearInterval (obj. timer); // first clear the previous timer obj. timer = setInterval (function () {var bStop = true; // assume that all values are in for (var attr in json) {// traverse the json property var cur = (attr = 'opacity ')? Math. round (parseFloat (getStyle (obj, attr) * 100): parseInt (getStyle (obj, attr )); // special opacity processing var speed = (json [attr]-cur)/6; speed = speed> 0? Math. ceil (speed): Math. floor (speed); // speed digital conversion to prevent the bugif (cur! = Json [attr]) bStop = false; // if the target value is not reached, bStop is set to false; if (attr = 'opacity ') {obj. style. filter = 'Alpha (opacity = '+ (cur + speed) +') '; obj. style. opacity = (cur + speed)/100;} else {obj. style [attr] = cur + speed + 'px ';} if (bStop) {clearInterval (obj. timer); if (fnEnd) fnEnd (); // execute callback function }}, 30);} function getStyle (obj, name) {return obj. currentStyle? Obj. currentStyle [name]: window. getComputedStyle (obj, null) [name]; // browser compatibility processing. Note that getComputedStyle is a read-only attribute} function getByClass (oParent, sClass) {var aEle = oParent. getElementsByTagName ('*'); var aResult = []; var re = new RegExp ('\ B' + sClass + '\ B', 'I '); for (var I = 0; I
 
 
 
This framework can achieve most of the motion effects. Below is a slide of the Baidu homepage I wrote:
 
Window. onload = function () {var oSlide = document. getElementById ('slide'); var asmallpicWrap = getByClass (oSlide, 'smallpic ') [0]; var asmallUl = asmallpicWrap. getElementsByTagName ('ul ') [0]; var abigpicWrap = getByClass (oSlide, 'bigpic') [0]; var asmallpic = asmallpicWrap. getElementsByTagName ('lil'); var obigpic = abigpicWrap. getElementsByTagName ('img '); var oprev = getByClass (oSlide, 'prev') [0]; var onext = getByClass (oSlide, 'Next') [0]; var nowIndex = 2; var now = 0; // big chart switch for (var I = 0; iseout = "function (){". onmouseover = "function (){". style. zindex = "nowIndex ++;" asmallpic. length = "" else = "" function = "" I = "0;" now = "" onext. onclick = "function () {" oprev. onclick = "function () {" oslide. onmouseout = "function () {" oslide. onmouseover = "function () {" pre = "" return = "" this. index = "=" timer = "setInterval (onext. onclick, 3000); "var =" ">