A Preliminary Exploration of JavaScript -- Image Moving and javascript moving

A Preliminary Exploration of JavaScript -- Image Moving and javascript moving

When we open the page, most of the pages we see are dynamic. When I learned VB, I had to implement some dynamic pictures. The first thought was to use Flash, now I have learned BS, which is an eye-opener. I just learned the effects of an animation. I want to show you how a small function makes the page work.

In many cases, in order to achieve one-to-one effects, such as gradient and movement, if Flash painting is used, it will undoubtedly add too much load to the browser, if you use multiple images and one display, this is too rigid, which is not conducive to our changes. Therefore, the best way is to encapsulate a method, let our images move Based on the desired effect and use the object-oriented method, that is, to package a method, we only need to set parameters to move the method we want. Isn't it convenient?

// Set the animation Base. prototype. animate = function (obj) {for (var I = 0; I <this. elements. length; I ++) {var element = this. elements [I]; // you only need to add the width and height values to the animation. Var attr = obj ['attr '] = 'X '? 'Left': obj ['attr'] = 'y '? 'Top': obj ['attr'] = 'W '? 'Width': obj ['attr'] = 'H '? 'Height': 'left'; var start = obj ['start']! = Undefined? Obj ['start']: getStyle (element, attr); // optional. The default position is the starting position of CSS. var t = obj ['T']! = Undefined? Obj ['T']: 30; // optional. var step = obj ['step'] is executed once in 30 milliseconds by default. = Undefined? Obj ['step']: 10; // optional. 10 pixels are run each time. // two methods of alter increment and target volume are provided: var alter = obj ['alter ']; var target = obj ['target']; // buffer motion var speed = obj ['speed']! = Undefined? Obj ['speed']: 6; // optional. The default buffer speed is 6var type = obj ['type'] = 0? 'Constant': obj ['type'] = 1? 'Buffer': 'buffer'; // optional. 0 indicates a uniform speed, 1 indicates a buffer, and if (alter! = Undefined & target = undefined) {target = alter + start;} else if (alter = undefined & target = undefined) {throw new Error ('alter increment or target volume must be transmitted one! ');} If (start> target) step =-step; element. style [attr] = start + 'px '; clearInterval (window. timer); timer = setInterval (function () {// use Math for positive values. ceil is rounded up to one decimal point. When the negative value is used, Math. floor is used, and the fractional part is placed in one place. This will not lead to the feeling of being choppy and abrupt when the exercise ends. If (type = 'buffer') {step = (target-getStyle (element, attr)/speed; step = step> 0? Math. ceil (step): Math. floor (step);} * // It is better to solve the problem of several more pixels or a few fewer pixels. if (step = 0) {setTarget ();} else if (step> 0 & Math. abs (getStyle (element, attr)-target) <= step) {setTarget ();} else if (step <0 & (getStyle (element, attr)-target) <= Math. abs (step) {setTarget ();} else {// put in else will never and stop the motion notification execution, no problem occurs when 303 is cut to 300 at the same time // but the problem occurs when 300 is not cut at the same time, resulting in abrupt element. style [attr] = getStyle (element, attr) + step + 'px';} document. getElementById ('aaa '). innerHTML + = getStyle (element, attr) + '<br/>' ;}, t); function setTarget () {element. style [attr] = target + 'px '; clearInterval (timer) ;}} return this ;};

<Span style = "white-space: pre"> </span> function call

$(function () {$('#button').click(function () {$('#box').animate({'attr' : 'x','start' : 100,'alter' : 50,'target' : 0,'step' : 7});});});

HTML code. You only need to set an ID, that is, find the one in the body and add the following code.

<Div id = "box"> box </div> <input type = "button" id = "button" value = "button"/> <div id = "aaa"> </div>

After learning javaScript For the first time, I felt that it was amazing. When I used to learn HTML, static Web pages could work. But compared with JavaScript, small pages are more like a process-oriented process. What do I need, javaScript is more like object-oriented, and some methods are well encapsulated for better use. It is no wonder that JavaScript is called, and there is a Java word that is really object-oriented.