This article is a jquery prompt plug-in that prompts the code for moving the mouse over the rounded corner frame. It can be a good description of the role and purpose of this image, and can also be a mix of image text.
This article is a jquery prompt plug-in that prompts the code for moving the mouse over the rounded corner frame. It can be a good description of the role and purpose of this image, and can also be a mix of image text.
<! Doctype html public "-// w3c // dtd html 4.01 // en" "http://www.w3.org/tr/html4/strict.dtd">
<Html>
<Head>
<Meta http-equiv = "content-type" content = "text/html; charset = gb2312"/>
<Title> jquery prompts the plug-in to move the mouse over the rounded corner frame </title>
<Script type = "text/Webpage effects" src = "js/jquery-1.4.1.min.js"> </script>
<Script type = "text/javascript">// Load this script once the document is ready
$ (Document). ready (function (){
// Get all the thumbnail
$ ('Div. thumbnail-item'). mouseenter (function (e ){// Calculate the position of the image tooltip
X = e. pagex-$ (this). offset (). left;
Y = e. pagey-$ (this). offset (). top;// Set the z-index of the current item,
// Make sure it's greater than the rest of thumbnail items
// Set the position and display the image tooltip
Tutorial (this).css ('z-Index', '15 ')
. Children ("div. tooltip ")
. Css ({'top': y + 10, 'left': x + 20, 'display': 'block '});
}). Mousemove (function (e ){
// Calculate the position of the image tooltip
X = e. pagex-$ (this). offset (). left;
Y = e. pagey-$ (this). offset (). top;
// This line causes the tooltip will follow the mouse pointer
$ (This). children ("div. tooltip" ).css ({'top': y + 10, 'left': x + 20 });
}). Mouseleave (function (){
// Reset the z-index and hide the image tooltip
Certificate (this).css ('z-Index', '1 ')
. Children ("div. tooltip ")
. Animate ({"opacity": "hide"}, "fast ");
});});
</Script>
<Style>. Thumbnail-item {
/* Position relative so that we can use position absolute for the tooltip */
Position: relative;
Float: left;
Margin: 0px 5px;
}. Thumbnail-item {
Display: block;
}. Thumbnail-item img. thumbnail {
Border: 3px solid # ccc;
}
. Tooltip {
/* By default, hide it */
Display: none;
/* Allow us to move the tooltip */
Position: absolute;
/* Align the image properly */
Padding: 8px 0 0 8px;
}. Tooltip span. overlay {
/* The png image, need ie6 hack though */
Background: url (images/overlay.png) no-repeat;
/* Put this overlay on the top of the tooltip image */
Position: absolute;
Top: 0px;
Left: 0px;
Display: block;
Width: 350px;
Height: 200px;
}
</Style>
</Head>
<Body>
<Div class = "thumbnail-item">
<A href = "#"> </a>
<Div class = "tooltip">
<Span class = "overlay"> </span>
</Div>
</Div>
<Div class = "thumbnail-item">
<A href = "#"> </a>
<Div class = "tooltip">
<Span class = "overlay"> </span>
</Div>
</Div>
<Div class = "thumbnail-item">
<A href = "#"> </a>
<Div class = "tooltip">
<Span class = "overlay"> </span>
</Div>
</Div>
<Div class = "clear"> </div>
</Body>
</Html>
Source code
Http://down.bKjia. c0m/down/code/jquery/2010/0907/20676.html
Effect preview address
Pstutorial/">Http://g.111cn.cn/javascript/js/20100907/tips/
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
