Home > Others

jquery implementation mouse over the display of the prompt box method _jquery

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

The example of this article describes the method of jquery implementation of the mouse-sliding display prompt box. Share to everyone for your reference. Specifically as follows:

One, jquery mouse over Show prompt box instance

1. Effect drawing

2, implementation code (need to add jquery.js, button picture, hint box picture)

HTML Code

Copy Code code as follows:
<! Doctype>
<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 a {
PADDING:14PX 10px;
Display:block;
Color: #000000;
width:144px;
Text-decoration:none;
Font-weight:bold;
Background:url (' background picture 1 ') No-repeat Center Center;
}
. menu Li em {
Background:url (' background picture 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>
<body>
<ul class= "Menu" >
<li>
<a href= "http://www.jb51.net" >web Designer wall</a>
<em>a wall of design ideas, web trends, and tutorials</em>
</li>
<li>
<a href= "http://www.jb51.net" >best Web gallery</a>
<em>featuring the best CSS and Flash Web sites</em>
</li>
<li>
<a href= "Http://www.jb51.net" >n.design studio</a>
<em>blog and design portfolio of WDW designer, Nick la</em>
</li>
</ul>
</body>

Two, jquery mouse over slide show prompt box instance two

Mouse across the user name, in the lower right corner of the mouse to display div display user data this effect

1. Effect drawing

2. Implementation mode

Nothing more than three chunks, one is the positioning of the DIV, this is the main difficulty of the effect; two is to load data asynchronously via Ajax; The third is to use two JS properties onmouseover and onmouseout, that is, the mouse pass and mouse away.

3. Implementation steps

(1), first design to display the user information of the div style, here to note that the method is not for each user name is bound to a div next to, when the mouse is hidden when the mouse away, the Web page on a display information Div, where need to display when the location where, You need to set the div's positioning to absolute positioning.

HTML code:

Copy Code code as follows:
<div class= "Blockdiv" id= "Blockdiv" >
<div class= "pic" >

</div>
<div class= "box" >
<table width= "border=" 0 "style=" Overflow:hidden; Text-overflow:ellipsis; White-space:nowrap ">
<tr>
&LT;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> Sex:</td>
<td>
<label id= "Sex" ></label>
</td>
</tr>
<tr>
<td> Area:</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), the corresponding CSS code

Copy Code code as follows:
#blockdiv {
width:380px;
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 able to accurately locate and easy to call, so first in the page put two tags, respectively, to save the current mouse coordinates

Copy Code code as follows:
<input type= "hidden" id= "Pagex"/>
<input type= "hidden" id= "Pagey"/>

Then use JS to get the current coordinates and save to the label:

Copy Code code as follows:
JQuery (document). Ready (function ($) {
$ (document). MouseMove (function (e) {
document.getElementById ("Pagex"). Value = E.pagex;//pagex () property is the position of the mouse pointer relative to the left edge of the document.
document.getElementById ("Pagey"). Value = E.pagey;//pagey () property is the position of the mouse pointer relative to the top edge of the document.
});
});

(4), the mouse passing and leaving the event JS code

Copy Code code 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"). html (data[0]. User_sex);
$ ("#lbladdress"). html (data[0]. user_address)
$ ("#lblemall"). 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"). HTML ("not loaded to data!");
});
}
function Hiddeninfo () {
$ ("#blockdiv"). CSS ({
"Display": "None",
});

$ ("#lblusername"). HTML ("")
$ ("#lblrealname"). HTML ("");
$ ("#sex"). HTML ("");
$ ("#lbladdress"). HTML ("")
$ ("#lblemall"). HTML ("");
}

(5), call

Copy Code code as follows:
<a class= "Showuserinfo" onmouseover= showinfo (' <% #Eval ("Response_person")%> ') "onmouseout=" HiddenInfo () " >
jquery mouse over Show prompt box
</a>

I hope this article will help you with your jquery programming.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
wordpress the field php prompt box jquery datatable search box jquery dialog box implementation of data structures implementation of ajax in php benefits of nosql over sql

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More