A new day is a new start. Today we will share the effect of imitating the Dock of the Apple operating system desktop with JQuery, which is called the basic edition because there are some bugs and the display effect is unstable. Due to the time, these bugs have not been fixed. I hope the experts will give us some advice and give us better suggestions. I hope we can make better versions for you.
This is static. Well, it seems like you want to make a decent image.
The following is the HTML page code:
Copy codeThe Code is as follows: <! DOCTYPE html PUBLIC "-// W3C // dtd html 4.01 // EN"A page without CSS decoration is terrible, so it is essential to use appropriate CSS for decoration.Copy codeThe Code is as follows: # topBody {
Height: 300px;
}
# TopMenu {
Height: 256px;
Line-height: 256px;
}
# TopMenu img {
Height: 50px;
Width: 50px;
}
A few months after graduation, I forgot to solve the equation. So when the mouse moves, the icon amplification algorithm is a headache for me. The algorithm here is just my personal idea and is for reference only, I hope that you can come up with better algorithms. In addition, we only consider the algorithm for moving the mouse horizontally. We have not added the algorithm for moving the mouse vertically.Copy codeThe Code is as follows: $ (function (){
$ ("# TopBody"). mousemove (function (e ){
Var mouseX = parseInt (e. pageX );
$ ("# TopMenu img"). each (function (){
Var obj = $ (this );
Var objWidth = obj.css ("width ");
// Obtain the horizontal coordinates of the image Center
Var objX = parseInt (obj. offset (). left) + parseInt (objWidth. substr (0, objWidth. length-2)/2;
Var x = Math. abs (objX-mouseX );
If (x <75 & x>-75 ){
Obj.css ("width", (128-(78 * x)/(75*75) + "px ");
Obj.css ("height", (128-(78 * x)/(75*75) + "px ");
}
});
});
});
Let's talk about JQuery's method of getting the mouse. When executing mousemove (function (e) {}), the method parameter e provides e. pageX obtains the horizontal coordinates, e. you can use var x = e. originalEvent. x | e. originalEvent. layerX | 0; obtain the horizontal position of the mouse. You can also use var y = e. originalEvent. y | e. originalEvent. layerY | 0; obtain the vertical position of the mouse.
When the mouse moves slowly, the display effect is acceptable. However, when the mouse moves quickly, the icon is enlarged, but the corresponding bug also comes out.
Thank you for your valuable suggestions and better algorithms.
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
