I can't wait to share my latest results with you, but the code is very similar to the previous version.
Prime Minister is HTML page code:
Copy Code code as follows:
<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<title>jquery dock</title>
<link type= "Text/css" rel= "stylesheet" href= "Css/dock.css"/>
<script type= "Text/javascript" src= "Js/jquery-1.8.0.js" ></script>
<script type= "Text/javascript" src= "Js/dock.js" ></script>
<body id= "Content" >
<div id= "topbody" align= "Center" >
<div id= "Topmenu" >
<a href= "#" ></a>
<a href= "#" ></a>
<a href= "#" ></a>
<a href= "#" ></a>
<a href= "#" ></a>
<a href= "#" ></a>
<a href= "#" ></a>
<a href= "#" ></a>
<a href= "#" ></a>
</div>
</div>
</body>
Also add the corresponding CSS code:
Copy Code code 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 code 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 Picture Center Horizontal coordinate
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");
});
}
});
});
Compared to the previous version of the biggest change or in JS above, when the mouse moved on the page triggered MouseMove event, in the MouseMove method first get the mouse on the page in the vertical coordinates, to determine whether the mouse in the operation of the dock menu in the vertical range, if the mouse is not within this range , all icons are restored to their original state; Conversely, if the mouse is within this range, continue to get the horizontal coordinates of the mouse on the page and use MouseX to record them. Also gets the horizontal coordinates of the center of the picture on the page, use OBJX to save the corresponding value, when MouseX and objx difference of the absolute value (with X to record) less than 75 o'clock, entered the current picture's operational range, the dock effect will be triggered, using Y to indicate when the mouse moved a picture of the width of a (In order to use the same icon width and height for this example), this example uses equation y=128-78*x2/752 to represent the relationship between the position of the mouse and the size of the picture, and restores the corresponding picture when x is greater than 75 o'clock.
In the process of this example, we found a small bug of IE, when the contents of <a> tags in the middle of without any CSS style for img border, then IE will add a blue border to IMG, even if the <A&G T Tags plus text-decoration:none; CSS style, IMG will still be added by IE blue border, when the IMG add Border:none; Then the annoying blue border is gone. The following figure is an improved version of the demo, all code for reference only, thank you for reading.
