JQuery implements gradient pop-up layer and pop-up menu
This article mainly introduces jQuery's method for implementing the gradient pop-up layer and menu. It involves jQuery's gradient effect and css display implementation skills and has some reference value. For more information, see
This document describes how jQuery implements the gradient pop-up layer and pop-up menu. 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> jQuery implements the gradient pop-up layer and pop-up menu </title>
<Script type = "text/javascript" src = "/images/jquery. js"> </script>
<Style>
/* Gradient pop-up layer */
Body {font-size: 9pt ;}
# Race {display: block; width: 200px; height: 50px; line-height: 50px; text-align: center; background: # CCC; border: #555 1px solid ;}
. RaceShow {background-color: # f1f1f1; border: solid 1px # ccc; position: absolute; display: none; width: 300px; height: 100px; padding: 5px; font-size: 12px ;}
# UpLayer span {border: # fff 1px solid; width: 80px; padding: 0 5px; line-height: 20px; display: block ;}
# UpLayer ul {display: none; position: absolute; border: # ccc 1px solid; width: 80px; padding: 5px; line-height: 20px; background: # f1f1f1; margin: -1px 0 0 0 ;}
# UpLayer ul li {border-bottom: # ccc 1px dashed ;}
</Style>
</Head>
<Body>
<Script type = "text/javascript">
// Gradient pop-up layer
$ (Document). ready (function (){
Var speed = 600; // animation speed
$ ("# Race a"). click (function (event) {// bind event processing
Event. stopPropagation ();
Var offset = events (event.tar get). offset (); // cancel event bubbling
$ ("# RacePop" 2.16.css ({top: offset. top + keys (event.tar get ). height () + "px", left: offset. left}); // set the position of the pop-up layer
$ ("# RacePop"). show (speed); // animated display
});
$ (Document). click (function (event) {$ ("# racePop"). hide (speed)}); // click the blank area to hide
$ ("# RacePop"). click (function (event) {$ ("# racePop"). hide (speed)}); // click the pop-up layer to hide it.
Var objStr = "# UpLayer ";
$ (ObjStr). mouseover (function () {$ (objStr + "ul"). show ();});
$ (ObjStr). mouseout (function () {$ (objStr + "ul"). hide ();});
});
</Script>
<! -- Gradient pop-up layer -->
<Div id = "race"> <a href = "#"> click </a> </div>
<Div id = "racePop" class = "raceShow"> here is the pop-up Layer Effect </div>
<Div id = "UpLayer">
<Span> <a href = "javascript: void (0)"> pop-up layer </a> </span>
<Ul>
<Li> <a href = "http://www.baidu.com"> Baidu search </a> </li>
<Li> <a href = "http://www.jb51.net"> foot home </a> </li>
<Li> <a href = "http:// SC .jb51.net"> Home materials </a> </li>
<Li> <a href = "http://www.sina.com.cn/"> Sina homepage </a> </li>
</Ul>
</Div>
</Body>
</Html>
I hope this article will help you with jQuery programming.
