Imitate the Dock effect of Apple desktop based on JQuery (junior version)_javascript skills

A new day and a new beginning. What I want to share today is to use JQuery to imitate the Dock effect of the Apple operating system desktop. The reason why it is called the junior version is because there are still some bugs in it and the display effect is not stable. Due to time constraints, these bugs have not been fixed yet. I hope that experts will give you some advice and provide better opinions. I hope that I can make a better version and share it with everyone.

This is a static rendering, okay, it looks decent

The following is the code of the HTML page:

Copy the code The code is as follows:

"http://www.w3.org/TR/html4/strict.dtd">

< ;img alt="Link" src="images/link.png" />

A page without CSS decoration is terrible, so it is essential to use appropriate CSS for decoration

Copy code The code is as follows:

#topBody{
height: 300px;
}
#topMenu{
height: 256px;
line-height: 256px;
}
#topMenu img{
height: 50px;
width: 50px;
}

I only graduated a few months ago and I have forgotten to solve equations. , so the icon amplification algorithm when the mouse moves gives me a headache. The algorithm given here is just a personal idea and for reference only. I hope experts can come up with better algorithms. Moreover, only the algorithm for moving the mouse horizontally is considered here, and the algorithm for vertical mouse movement has not yet been added.

Copy code The 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");
//Get the horizontal coordinates of the center of the picture
var objX = parseInt(obj.offset().left) parseInt(objWidth.substr (0,objWidth.length-2))/2;
var x = Math.abs(objX-mouseX);
if(x-75){
obj.css( "width",(128-((78*x*x)/(75*75))) "px");
obj.css("height",(128-((78*x*x) /(75*75))) "px");
}
});
});
});

Let’s talk about JQuery’s method of obtaining the mouse. When executing mousemove(function(e){}), the parameter e of the method provides e.pageX to obtain the horizontal coordinate and e.pageY to obtain the vertical coordinate. It can also be used var x = e.originalEvent.x || e.originalEvent.layerX || 0; Get the horizontal position of the mouse. You can also use var y = e.originalEvent.y || e.originalEvent.layerY || 0; Get the horizontal position of the mouse vertical position.

When the mouse moves slowly, the display effect is acceptable. However, when the mouse moves quickly, the icon is enlarged, but corresponding bugs also appear.

We sincerely invite all the experts and masters who have passed by to put forward your valuable suggestions for modifications and better algorithms. Thank you for watching.