How to Implement the navigation menu of personalized flop effect using jQuery
This article mainly introduces jQuery's method of implementing the navigation menu for personalized flop effects. It provides examples of jQuery's skills for operating animate, css, and mouse events, and has some reference value, for more information, see
This article describes how jQuery implements the navigation menu for personalized flop effects. Share it with you for your reference. The specific implementation method is as follows:
The Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> navigation menu of jQuery personalized flop effect </title>
<Meta http-equiv = "content-type" content = "text/html; charset = gb2312">
<Style type = "text/css">
Ul, li {list-style: none; padding: 0; margin: 0 ;}
# Btncell {width: 300px; height: 100px; border: 1px solid #777; margin: 50px auto ;}
# Btncell li {width: 100px; float: left; height: 50px; font-size: 14px; text-align: center; line-height: 28px; position: relative; z-index: 1 ;}
# Btncell li a {display: block; height: 28px; border: 2px solid #333; text-decoration: none; width: 50px; background: #888; overflow: hidden; position: absolute; left: 25px; top: 10px ;}
</Style>
<Script type = "text/javascript" src = "js/jquery1.3.2.js"> </script>
<Script language = "javascript">
Var nummove = 0;
Var numout = 0;
$ (Function (){
$ ("# Btncell li"). hover (
Function (){
If (nummove = 0)
{
Nummove = 1;
$ ("A", this). animate ({height: "0px", top: "25px"}, 80, function () {nummove = 0 ;});
$ ("A", this). animate ({height: "28px", top: "10px"}, 80 );
$ ("A", this).css ("background", "yellow ");
}
},
Function (){
If (numout = 0)
{
Numout = 1;
$ ("A", this). animate ({height: "0px", top: "25px"}, 80, function () {numout = 0 ;});
$ ("A", this). animate ({height: "28px", top: "10px"}, 80 );
$ ("A", this).css ("background", "#888 ");
Numout = 0;
}
}
)
$ ("# Btncell li a"). click (function (){
$ (This). parents ("li" ).css ("z-index", "2 ")
$ (This ). animate ({height: "558px", top: "-255px", width: "1000px", left: "-460px", opacity: 'toggle ', lineHeight: '558px ', fontSize: '500px'}, 1000 );
$ (This ). animate ({height: "28px", top: "10px", width: "50px", left: "25px", opacity: 'toggle ', lineHeight: '28px ', fontSize: '12px '}, 400 );
$ (This). parents ("li" ).css ("z-index", "1 ")
})
})
</Script>
</Head>
<Body>
An error will be prompted in the lower left corner of the preview result, and the effect will not be displayed. Refresh the page to see the effect. <Ul id = "btncell">
<Li> <a href = "#"> 1 </a> </li>
<Li> <a href = "#"> 2 </a> </li>
<Li> <a href = "#"> 3 </a> </li>
<Li> <a href = "#"> 4 </a> </li>
<Li> <a href = "#"> 5 </a> </li>
<Li> <a href = "#"> 6 </a> </li>
</Ul>
</Body>
</Html>
I hope this article will help you with jQuery programming.
