Simulating Apple desktop Dock effect based on JQuery (stable version)_jquery

I can't wait to share my latest results with everyone. In fact, the code is very similar to the previous version.

The prime minister is the HTML page code:

Copy the code The code is as follows:

< a href="#">




< img alt="History" src="images/history.png" />

Also add the corresponding CSS code:

Copy the code The code is as follows:

#topMenu {
height:128px;
line-height:250px;
width: 630px;
background-image:url(../images/dock-bg1.png);
}
#topMenu img{
width: 50px;
height:50px;
border:none;
}

The corresponding JS code is as follows:

Copy code The code is as follows:

$(function(){
$(this).mousemove( function(e){
var mouseY = parseInt(e.pageY);
if(mouseY<136 && mouseY>8){
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").css("height",( 128-((78*x*x)/(75*75))) "px");
}else{
obj.css("width","50px").css("height" ,"50px");
}
});
}else{
$("#topMenu img").each(function(){
$(this).css( "width","50px").css("height","50px");
});
}
});
});

The biggest change compared to the previous version is in JS. When the mouse moves on the page, the mousemove event is triggered. In the mousemove method, the vertical coordinates of the mouse on the page are first obtained to determine whether the mouse is in the operable dock menu. Within the vertical range, if the mouse is not within this range, all icons will be restored to their initial state; on the contrary, if the mouse is within this range, the horizontal coordinates of the mouse on the page will continue to be obtained, and mouseX will be used to record them. At the same time, obtain the horizontal coordinates of the center of the picture in the page, and use objX to save the corresponding value. When the absolute value of the difference between mouseX and objX (recorded with x) is less than 75, it enters the operable range of the current picture, and the dock effect will be triggered, using y to represent the width of a certain picture when the mouse moves (for simplicity, the icon width and height used in this example are equal), this example uses the equation y=128-78*x2/752 Represents the relationship between the mouse position and the picture size. When x is greater than 75, the corresponding picture will be restored.
A small bug in IE was discovered during the process of this example. When the content in the middle of the tag is , if there is no CSS style for the border of img, IE will Add a blue border to img. Even if you add the CSS style of text-decoration: none; to the tag, img will still be added with a blue border by IE. When adding border:none; to img, the annoying blue color will appear. The color border disappears. The picture below is a demonstration picture of the improved version. All codes are for reference only. Thank you for reading.