Home > Developer > JavaScript
Jquery allows you to move the mouse over the display prompt box. jquery slides over
This example describes how to use jquery to move the mouse over the display prompt box. Share it with you for your reference. The details are as follows:
1. jquery mouse sliding over show prompt box instance
1,
2. Implementation Code (you need to add jquery. js, button images, and prompt box images on your own)
HTML code
Copy codeThe Code is as follows: <! DOCTYPE>
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> Animated Menu Hover 1 </title>
<Script type = "text/javascript" src = "jquery. Js "> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){
$ (". Menu li"). hover (function (){
$ (This). find ("em"). animate ({opacity: "show", top: "-75"}, "slow ");
}, Function (){
$ (This). find ("em"). animate ({opacity: "hide", top: "-85"}, "fast ");
});
});
</Script>
<Style type = "text/css">
Body {
Margin: 10px auto;
Width: 570px;
Font: 75%/120% Arial, Helvetica, sans-serif;
}
. Menu {
Margin: 100px 0 0;
Padding: 0;
List-style: none;
}
. Menu li {
Padding: 0;
Margin: 0 2px;
Float: left;
Position: relative;
Text-align: center;
}
. Menu {
Padding: 14px 10px;
Display: block;
Color: #000000;
Width: 144px;
Text-decoration: none;
Font-weight: bold;
Background: url ('background image 1') no-repeat center;
}
. Menu li em {
Background: url ('background image 2') no-repeat;
Width: 180px;
Height: 45px;
Position: absolute;
Top:-85px;
Left:-15px;
Text-align: center;
Padding: 20px 12px 10px;
Font-style: normal;
Z-index: 2;
Display: none;
}
</Style>
</Head>
<Body>
<Ul class = "menu">
<Li>
<A href = "http://www.bkjia.com"> Web Designer Wall </a>
<Em> A wall of design ideas, web trends, and tutorials </em>
</Li>
<Li>
<A href = "http://www.bkjia.com"> Best Web Gallery </a>
<Em> Featuring the best CSS and Flash web sites </em>
</Li>
<Li>
<A href = "http://www.bkjia.com"> N. Design Studio </a>
<Em> Blog and design portfolio of WDW designer, Nick La </em>
</Li>
</Ul>
</Body>
</Html>
Ii. jquery mouse slide show prompt box example 2
When you move the mouse over the user name, The div displays the user information in the lower right corner of the mouse.
1,
2. Implementation Method
It is nothing more than three blocks. One is div positioning, which is the main difficulty of this effect; the other is loading data asynchronously through ajax; the third is to use two js attributes onmouseover and onmouseout, that is, the mouse passes and the mouse leaves.
3. Implementation steps
(1) first, design the div style for displaying user data. Note that this method is not bound to a div next to each user name. It is displayed when the mouse passes, hide when you move the mouse away. A div is displayed on the webpage. When you need to display the div, you need to set the div's positioning method to absolute positioning.
HTML code:
Copy codeThe Code is as follows: <div class = "blockdiv" id = "blockdiv">
<Div class = "pic">
</Div>
<Div class = "box">
<Table width = "220" border = "0" style = "overflow: hidden; text-overflow: ellipsis; white-space: nowrap">
<Tr>
<Td style = "width: 70px;"> User name: </td>
<Td>
<Label id = "lblusername"> </label>
</Td>
</Tr>
<Tr>
<Td> real name: </td>
<Td>
<Label id = "lblrealname"> </label>
</Td>
</Tr>
<Tr>
<Td> Gender: </td>
<Td>
<Label id = "sex"> </label>
</Td>
</Tr>
<Tr>
<Td> region: </td>
<Td>
<Label id = "lbladdress"> </label>
</Td>
</Tr>
<Tr>
<Td> Email: </td>
<Td>
<Label id = "lblemall"> </label>
</Td>
</Tr>
</Table>
<Div style = "text-align: left; color: green; line-height: 40px; height: 30px; display: none; "id =" messagediv "> loading... </div>
</Div>
</Div>
(2) css code
Copy codeThe Code is as follows: # blockdiv {
Width: pixel PX;
Height: 160px;
Float: left;
Display: none;
Border: 1px solid # ccc; position: absolute; z-index: 1; opacity: 0.1; background: white
}
. Pic {
Width: 100px;
Height: 100px;
Border: 1px solid # ccc;
Border-radius: 10px;
Float: left; margin: 10px;
Overflow: hidden;
}
. Box {
Width: 240px;
Height: 140px;
Margin: 10px 0 10px 10px;
Float: left;
Overflow: hidden; text-overflow: ellipsis; white-space: nowrap ;}
(3) Positioning: in order to be precise and easy to call, two labels are placed on the page to save the coordinates of the current mouse.
Copy codeThe Code is as follows: <input type = "hidden" id = "pagex"/>
<Input type = "hidden" id = "pagey"/>
Then, use js to obtain the current coordinate and save it to the tag:
Copy codeThe Code is as follows: jQuery (document). ready (function ($ ){
$ (Document). mousemove (function (e ){
Document. getElementById ("pagex"). value = e. pageX; // The pageX () attribute is the cursor position, relative to the left edge of the document.
Document. getElementById ("pagey"). value = e. pageY; // The pageY () attribute is the cursor position, relative to the top edge of the document.
});
});
(4) move the mouse over and exit the event js Code
Copy codeThe Code is as follows: function ShowInfo (username ){
$ ("# Blockdiv" ).css ({
"Display": "block ",
"Left": document. getElementById ('pagex '). value,
"Top": document. getElementById ('pagey '). value,
});
$ ("# Messagediv" ).css ("display", "block ");
$. GetJSON ("../ashx/GetUserInfo. Ashx? Name = "+ username,
Function (data ){
If (data! = Null ){
$ ("# Lblusername" ).html (data [0]. User_Count)
$ ("# Lblrealname" ).html (data [0]. User_name );
$ ("# Sex" 2.16.html (data [0]. User_Sex );
$ ("# Lbladdress" ).html (data [0]. User_Address)
$ ("# Lblemall" pai.html (data [0]. User_Email );
If (data [0]. User_HeadImg! = Null & data [0]. User_HeadImg! = ""){
$ ("# Imguserhead"). attr ("src", ".../../Users/" + data [0]. User_HeadImg.toString (). substring (3 ));
}
Else {
$ ("# Imguserhead"). attr ("src", ".../Users/images/900.png ");
}
$ ("# Messagediv" ).css ("display", "none ");
}
Else
$ ("# Messagediv" pai.html ("not loaded to data! ");
});
}
Function HiddenInfo (){
$ ("# Blockdiv" ).css ({
"Display": "none ",
});
$ ("# Lblusername" ).html ("")
$ ("# Lblrealname" ).html ("");
$ ("# Sex" 2.16.html ("");
$ ("# Lbladdress" ).html ("")
$ ("# Lblemall" ).html ("");
}
(5) Call
Copy codeThe Code is as follows: <a class = "showuserinfo" onmouseover = "ShowInfo ('<% # Eval (" Response_Person ") %>')" onmouseout = "HiddenInfo ()">
Jquery mouse slide display prompt box
</A>
I hope this article will help you with jQuery programming.
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
