Home > Developer > JavaScript
I can't wait to share my latest results with you. In fact, the code is very similar to the previous version.
The Prime Minister is the HTML page code:
Copy codeThe Code is as follows:
<! DOCTYPE html>
<Html lang = "zh-cen-Hans-CN">
<Head>
<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>
</Head>
<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>
</Html>
Add the corresponding CSS code:
Copy codeThe 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 codeThe 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 ");
// 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 ){
Obj.css ("width", (128-(78 * x)/(75*75) + "px" ).css ("height ", (128-(78 * 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 from 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 obtained first, determines whether the mouse is within the vertical range of the dock menu. If the mouse is not within this range, all icons are restored to the initial state. On the contrary, if the mouse is within this range, continue to obtain the horizontal coordinates of the mouse on the page, and use mouseX to record. Obtain the horizontal coordinates of the image center on the page and use objX to save the corresponding values. when the absolute value of the difference between mouseX and objX (recorded by x) is less than 75, it enters the operational range of the current image, and the dock effect will be triggered, use y to indicate the width of an image when the mouse moves (for the sake of simplicity, the width and height of the icon used in this example are equal ), in this example, the equation y = 128-78 * x2/752 is used to represent the relationship between the mouse position and the image size. when x is greater than 75, the corresponding image is restored.
In this example, a small bug of ie is found. If the content in the <a> tag is , if no CSS style is provided to the border of the img, ie will add a blue border to the img. Even if the <a> label is added with the CSS style of text-decoration: none;, the img will still be added with a blue border by ie, when border: none is added to the img, the annoying blue border disappears. It is a demo of the improved version. All the code is for reference only. Thank you for reading.
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
