In a twinkling of an eye, the seventh lesson will be the last one. If you feel that the level of the seven lessons has not reached the expected level, you can continue to follow the blog post on this site, I will release some similar articles to help you improve your level. In addition, I plan to prepare the chm version of Chinese API manual for Mootools1.4 with several Mootools enthusiasts in the group recently, if you are interested in this, you can join the group for discussion (QQ group number: 16648471)
Today's course mainly describes the classes of Mootools. Because the classes of Mootools are usually used to encapsulate plug-ins, after completing the class, I will actually develop a plug-in and describe the development process of the plug-ins in detail.
There are two ways to create a Class using the Class constructor in Mootools, that is, to pass two different types of parameters to the constructor. The first is to pass an object literal in a standard way, this object can include all the attributes and methods you have added for the class. For example:
Var Person = new Class ({
// Initialization
Initialize: function (name, age ){
This. name = name;
This. age = age;
},
// Create a method
Log: function (){
Console. log (this. name + ',' + this. age );
}
});
Var mark = new Person ('mark', 24 );
Mark. log (); // returns 'Mark, 24'
The second method is to pass a common function. mootools automatically packs the function as an object containing only one initialize key value. Then you can use the implement method to extend the class. For example:
Var Person = new Class (function (name, age ){
This. name = name;
This. age = age;
});
Person. implement ('log', function (){
Console. log (this. name + ',' + this. age );
});
Var mark = new Person ('mark', 24 );
Mark. log (); // returns 'Mark, 24'
Of course, the first method is recommended, which is intuitive and clear. If you create a class using the standard method, you can also use implement and Extends to extend or inherit the class. Of course, this part of content is beyond the scope of learning Mootools in a week, if you are interested in this, you can refer to the official documentation.
Next, I will develop a plug-in to demonstrate the use of the class. For the effect of this plug-in, please refer to the following article:
Http://www.bkjia.com/a/view/42563.html
The difference is that I used function directly before, but now I have encapsulated it using class. below is the implementation code.
<Script style = "text/javascript" src = "http://www.bkjia.com/uploads/common/js/mootools-yui-compressed.js"> </script>
<Body id = 'A'>
<H2 class = 'A'> Single images <Div id = 'bsfdimg 'style = 'background: url ("http://www.bkjia.com/uploads/common/images/wall1.jpg") no-repeat scroll-50px-50px transparent; width: 260px; height: 200px; 'W = '000000' h = '000000'> </div>
<Script type = 'text/javascript '>
Var MoveBKimg = new Class ({
Initialize: function () {// Initialization
This. $ L = 0;
This. $ T = 0;
},
Todo: function (I, opt ){
This. opt = {
Bw: opt. bw | 0, // container width
Bh: opt. bh | 0,
Iw: opt. iw | 0, // Image Width
Ih: opt. ih | 0,
X: opt. X | 0, // clientX coordinate of the mouse
Y: opt. Y | 0
}; O = this. opt;
If (! I |! O. iw |! O. ih |! O. bw |! O. bh) {return false ;}
O. iw = o. iw-o.bw; // the x-axis range where the image can actually be moved
O. ih = o. ih-o.bh;
Var P = I. getStyle ('background-position'); P = P. split (""); // obtain the position value of the current background image and convert it into Int type.
P [0] = P [0]. toInt (); P [0] = (P [0]. abs ()> o. iw )? (P [0] <0 )? -O. iw: o. iw): P [0]; // The current X offset of the background image, and the value is corrected twice.
P [1] = P [1]. toInt (); P [1] = (P [1]. abs ()> o. ih )? (P [1] <0 )? -O. ih: o. ih): P [1];
Console. log (o. X + '|' + o. Y );
If (o. X> this. $ L) {// move the mouse picture to the left
This. $ L = o. X;
P [0] = (o. iw <(P [0]-10 ))? O. iw :( P [0]-10 );
}
If (o. X <this. $ L) {// move the cursor to the left and run it to the right.
This. $ L = o. X;
P [0] = (P [0] + 10)> 0 )? 0: (P [0] + 10 );
}
If (o. Y> this. $ T) {// move the cursor down and move the image up.
This. $ T = o. Y;
P [1] = (o. ih <(P [1]-10 ))? O. ih :( P [1]-10 );
}
If (o. Y <this. $ T) {// move the mouse up and move the image down.
This. $ T = o. Y;
P [1] = (P [1] + 10)> 0 )? 0: (P [1] + 10 );
}
I. setStyle ('background-position', ''+ P [0] + 'px '+ P [1] + 'px'); // assign a value to the position of the background image.
}
});
El = $ ('bsfdimg '); // select dom
Var MoveBKimg = new MoveBKimg (); // instantiate the class. initialize is automatically executed during the instantiation process, and the values of the two variables are 0, the two variables are used to compare with the current coordinates of the mouse so that you can know where the mouse is moving.
El. addEvent ('mousemove ', function (event) {// bind an event to the dom Node
// Call the Todo method of the class. The dom node and options are passed during the call.
MoveBKimg. todo (El, {bw: 260, bh: 200, iw: 392, ih: 600, X: event. client. x, Y: event. client. y });
})
Let me talk about this sentence:
MoveBKimg. todo (El, {bw: 260, bh: 200, iw: 392, ih: 600, X: event. client. x, Y: event. client. y });
Here El is $ ('bsfdimg ')
{Bw: 260, bh: 200, iw: 392, ih: 600, X: event. client. x, Y: event. client. y}
Bw in this sentence is the width of the div container, bh is the height of the div container, iw is the actual width of the image, and ih Is the actual height of the image
The actual width and height of the image are obtained and assigned values in php for accuracy. Of course, you can also use any other method you can think of to obtain the image width and height.
X: event. client. x, Y: event. client. y
These two are coordinates of the corresponding mouse event, and do not need to be modified.
Event comes from El. addEvent ('mousemove ', function (event) {the value passed when binding to the event.
In this article, the effect of moving the background image with the mouse is that the function is used and the class encapsulation is not used. You can compare the differences between the two.
Now, it's time to draw a full stop when we learn Mootools1.4 in a week.
If the problem persists, we recommend that you read the following articles to help you.
(Source: The blog of Seven)
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
