Home > Developer > JavaScript
First, let's take a look at how the animation of the past few days constructs javascript:
Copy codeThe Code is as follows:
Var photo = function (){
Var index = 0, a, B, c, d;
Return {
Show: function (){},
Auto: function (){}
}
}
Var aa = photo ();
// Basically some methods are returned using return.
// 1: Execute auto if initialization fails.
// 2: during initialization, I cannot point this to aa.
// The two problems above will be inconvenient.
1: I don't want to write this article myself:
Copy codeThe Code is as follows:
Var aa = photo ("id ");
Aa. auto () // a few more words, not nice.
The ideal status is
When var aa = photo ("id"), it tells the program whether to play automatically.
2: If two animations are on the same page.
For example:
Copy codeThe Code is as follows:
Var aa = photo ("id1 ");
Aa. auto ()
Var bb = photo ("id2 ");
Bb. auto ()
Then they all have A label for the user to control the animation, and they are responsible for their own animation. No mutual interference. (In fact, it involves the issue of private variables, and this points );
Note: There are many ways to solve the above problems on the Internet. The following is what I understand. So I want to share it with you.
Yes, it's on the bus again. I solved this problem. Javascript language essence 52nd page 5.4 function-based
Let me take a look at the source code of this function constructor:
// Bold to emphasize
// This method is fully functional on page 52nd of the essence of javascript language.
Var constructor = function (spec, my ){
Var that, other private instance variables;
My = my | {};
Add shared variables and functions to my
That = a new object
Privileged method added to that
Return that;
}
See the following method:
Copy codeThe Code is as follows:
Var photo = function (spec ){
Var _ this = {}, index, a, c, d;
// The user-controlled a tag can be initialized here
// For example
A. onmouseover = function (){
_ This. go (); // can be called.
}
_ This. show = function (){};
_ This. auto = function (){};
_ This. go = function (){};
// You can directly call the method just stated here
_ This. auto () // can be called directly
Return _ this;
}
Var bb = photo ({index: 1 ;});
Var aa = photo ({index: 2 });
// Two different animations, bb aa, are created above, which do not affect each other.
// If I have a problem with functional understanding of the javascript language. Please advise...
Finally, this animation is perfect. However, there are too many private variables. If you can set the default value, you can choose to upload it. Will be better
So you can add the following function: (this is used by many people)
Copy codeThe Code is as follows:
Var Extend = function (destination, source ){
For (var property in source ){
Destination [property] = source [property];
}
Return destination;
}
// When we see Extend, everyone knows what it is.
Finally, I posted the source code of the image rotation I wrote today:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <ptml xmlns = "http://www.w3.org/1999/xhtml"> <pead> <meta http-equiv =" content-Type "content =" text/html; charset = gb2312 "/> <title> javascript image rotation </title> </pead> <body> <style type =" text/css "> body, ul, li {margin: 0; padding: 0 ;}# div {width: 610px; height: 210px; overflow: hidden ;}# photo Li {height: 210px; overflow: hidden; background: # fff url(001.gif) no-repeat center ;}# photo2 li {height: 210px; overflow: hidden; background: # fff url(001.gif) no-repeat center ;}. number-warp {position: absolute; margin-top:-50px; width: 600px; text-align: right ;}. number-warp a {border: 1px solid # CCC; width: 30px; height: 30px; display: inline-block; height: 100%; margin-left: 5px; text-align: center; t Ext-decoration: none ;}. sel {background: # CCC ;}</style> <ul id = "photo" style = "margin-top: 0px; "> <li> </ul> 1 2 3 4 5 <ul id = "photo2" style = "margin-top: 0px; "> <li> </ul> 1 2 3 4 <script type = "text/javascript"> var Extend = function (destination, source) {for (var property in source) {destination [property] = source [prope Rty];} return destination;} var photo = function (spec) {var $ = function (id) {return document. getElementById (id) ;}, _ this ={}, a = document. getElementById (spec ["number"]). getElementsByTagName ("A"), my = {$: "", change:-210, d: 50, num: 3, au: true, index: 0, x: null, v: null}, tween = function (t, B, c, d) {return-c * (t/= d) * (t-2) + B ;}, autoo = function () {_ this. show (my. index + 1> my. num? 0: my. index + 1) ;}; Extend (my, spec) // use him for (var I = 0; I </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
