Home > Developer > Web Develop
Even if the mouse
It is named stable because it has previously shared a primary version, and there are many bugs in the previous starter version. Now after repeated pondering, experiments, fixed the previous version of the existence of many shortcomings, even if the mouse fast sliding still performance is very stable. I can't wait to share my latest results with you, but the code is similar to the previous version.
The Prime Minister is the HTML page code:
<!DOCTYPE HTML><HTMLLang= "ZH-CMN-HANS-CN"><Head> <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8"> <title>JQuery Dock</title> <Linktype= "Text/css"rel= "stylesheet"href= "Css/dock.css" /> <Scripttype= "Text/javascript"src= "Js/jquery-1.8.0.js"></Script> <Scripttype= "Text/javascript"src= "Js/dock.js"></Script></Head><BodyID= "Content"> <DivID= "Topbody"Align= "Center"> <DivID= "Topmenu"> <ahref="#"><imgalt= "Home"src= "Images/home.png" /></a> <ahref="#"><imgalt= "Music"src= "Images/music.png" /></a> <ahref="#"><imgalt= "Calendar"src= "Images/calendar.png" /></a> <ahref="#"><imgalt= "Email"src= "Images/email.png" /></a> <ahref="#"><imgalt= "Portfolio"src= "Images/portfolio.png" /></a> <ahref="#"><imgalt= "Video"src= "Images/video.png" /></a> <ahref="#"><imgalt= "Link"src= "Images/link.png" /></a> <ahref="#"><imgalt= "History"src= "Images/history.png" /></a> <ahref="#"><imgalt= "RSS"src= "Images/rss.png" /></a> </Div> </Div></Body></HTML>
Also add the corresponding CSS code:
#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:
$(function(){ $( This). MouseMove (function(e) {varMousey =parseint (E.pagey); if(mousey<136 && mousey>8){ varMouseX =parseint (E.pagex); $("#topMenu img"). each (function(){ varobj = $ ( This); varObjwidth = Obj.css ("width"); //Get Picture Center horizontal coordinates varOBJX = parseint (Obj.offset (). left) + parseint (Objwidth.substr (0,objwidth.length-2))/2;varx = 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 biggest change in the previous version or JS, when the mouse moves on the page to trigger the MouseMove event, in the MouseMove method, the mouse in the vertical coordinates on the page, to determine whether the mouse is in the vertical range of the Operation Dock menu, if the mouse is not within this range , all the icons are restored to their original state, and conversely, if the mouse is within this range, continue to get the horizontal coordinates of the mouse on the page and record them with MouseX. At the same time to get the center of the image in the page horizontal coordinates, with OBJX to save the corresponding value, when the difference between MouseX and OBJX (recorded by x) is less than 75 o'clock, the current picture into the operating range, the dock effect will be triggered, with Y to indicate when the mouse movement of a picture width (For the sake of simplicity This example uses the icon width and height equal), this example uses the equation y=128-78*x2/752 to indicate the relationship between the position of the mouse and the image size, and when x is greater than 75 o'clock, the corresponding picture is restored.
In the process of this example found a small bug in IE, when the content of the middle of the <a> tag is If there is no CSS style for img border, then IE will give IMG a blue border, even if the <A&G T Label plus Text-decoration:none; CSS style, IMG will still be added by IE with a blue border when adding Border:none to IMG; Then the annoying blue border was gone. is an improved version of the demo diagram, all the code for reference only, thank you for reading.
jquery-based desktop dock effect (stable version)
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
