Demo:
Source code:
<Script style = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/mootools/1.4.1/mootools-yui-compressed.js"> </script>
</Head>
<Body id = 'A'>
<H2 class = 'A'> Single images <Div id = 'bsfdimg 'style = 'background: url ("http://www.bkjia.com/uploadfile/2011/1215/20111215025528249.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 (){
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 ');
Var MoveBKimg = new MoveBKimg ();
El. addEvent ('mousemove ', function (event ){
MoveBKimg. todo (El, {bw: 260, bh: 200, iw: 392, ih: 600, X: event. client. x, Y: event. client. y });
})
</Script>
Copy the code to run the code
From 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
