Now the problem is, this section is not large, update the frequency is very high, every day has a dozen of the latest information up, browsing the site's members for the latest books and the need for more and more, so the plate needs to be improved to meet the needs of members, The main requirements of the members are as follows: Display the cover thumbnail of the latest book, the name of the book, the name of the author, and the introduction of part of the book and the author's introduction ...
This is a bad place to worry about Ben, there is no extra space on the home page, how to render the cover thumbnail or even the content of the introduction, if you remove other plate space to achieve this plate expansion, is tantamount to a company at the expense of a department to expand another department, this is absolutely not to take ...
So Ben came up with a pop-up layer to show the details of each piece of information ...
Design objectives:
Increase the amount of page information by using the pop-up layer (the DOM refactoring to implement the element's append append and remove Remove) without changing the page structure ...
Solution:
First, we design a div with the following style:
Copy Code code as follows:
. Tipdiv
{
width:500px;
height:120px;
padding:8px;
Border-top:solid 5px #a6c9e2;
Border-bottom:solid 5px #a6c9e2;
Border-left:solid 1px #a6c9e2;
Border-right:solid 1px #a6c9e2;
Background: #ffffff;
Z-index:10;/*z-index is important and it determines the stacking order of the Div box on the page.
position:absolute;/* absolute positioning, which determines that the element can be based on top and left stacks on other elements.
}
. Tipdiv img
{
width:110px;
height:110px;
margin-right:36px;
margin-left:10px;
Float:left;
}
. Tipdiv span
{
/*x*/
width:340px;
height:110px;
Float:left;
Word-break:break-all;
border-top:dashed 1px #3a7ac8;
margin-top:8px;
}
Here is the script that responds to the pop-up event when the mouse passes:
Copy Code code as follows:
$ (document). Ready (function () {
Title Mouse Pass
$ ("ul Li a"). MouseMove (function (e) {
$(". Tipdiv "). Remove ();//If the element is on the page, remove the element ... 0
var x=e.clientx + 10;//Gets the x-axis coordinates of the mouse
var y=e.clienty + 10;//Gets the y-coordinate of the mouse
var num=$ (this). attr ("id");
var IMGs;
var word;
var name;
Switch (NUM)
{
Case "1": {imgs= "images/mimi.bmp"; name= "Secret Landas Bain (Rhonda Byrne) ..." word= "This is a sacred Secret Garden, where Alice lives ..."; break;
Case "2": {imgs= "images/mama.bmp"; Name= "a Mother's memory Love Regiment ..." word= "This is a story about the mother, infected with every Chinese, she is a violent mother, is also a son donated liver mother, She is also a great, typical Chinese mother ... "; Break }
Case "3": {imgs= "images/nikesong.bmp"; Name= "Grandpa Nick tells a story (Butterworth, Yi) ..." word= "★ Today's World's Most outstanding children painting writer, illustrator! <br>★ won the 1992 English Book Award (British Books Awards) <br>★ the world every 15 minutes there is a book by his creation was bought <br>★ his book makes reading become pleasing! " ; Break }
Case "4": {imgs= "images/lqz.bmp"; Name= "Li Qingzhao: Life is but a gorgeous flower (Wei) ..."; word= "Li Qingzhao: Life is but a gorgeous fragrant plantain lily" selected Yian word for 50, from the "Wuling Spring (wind live dust fragrant flowers)" began, to the " The good things near (the wind set the Falling flower deep) "End." Throughout the gossip homely, graceful and sincere strokes of the analysis, interpretation, explain, not jerky, no preaching. " ; Break }
}
Popdiv (Imgs,name,word,x,y);
})
Title Mouse left
$ ("ul Li a"). Mouseout (function () {
$(". Tipdiv "). Remove ();
})
})
Information box to move with the mouse
function Popdiv (FACE,NAME,INFO,XX,YY)
{
var str= "";
str+= "<div class= ' tipdiv ' >";
str+= " ';
str+= "<strong><em>" +name+ "</em></strong><br/>";
str+= "<span>" +info+ "</span>";
str+= "<div>";
$ (' body '). Append (str);//Append the element to the page, as if the style has been written
$(". Tipdiv "). CSS ({" Top ": yy+" px "," left ": xx+" px "})//Set the position where the element appears (this is the deviation 10px position on the right and below of the mouse)
}
The results are as follows (when the mouse points to the third piece of data, the box pops up and moves with the mouse):
To do this, members have a new requirement, that is, do not eject the box with the mouse movement, so that once the mouse left the focus, it will remove the pop-up box, the operation is not very convenient. They asked for the pop-up box to be fixed, assuming it was on the right side of the corresponding data line, and the opening and closing was controlled by the members themselves, so Ben made the improvement ...
Similarly, first design a DIV element with a ID for tips, which is the following style:
Copy Code code as follows:
#tips
{
Background-color:white;
border-left:1px solid #a6c9e2;
border-right:1px solid #a6c9e2;
border-top:5px solid #a6c9e2;
border-bottom:5px solid #a6c9e2;
width:268px; height:60px;
Z-index:9;
Position:absolute;
-moz-border-radius:5px; -webkit-border-radius:5px;
PADDING:8PX 18px;
}
/* Pop-up layer to the icon, left:-10 make it appear on the left side of the entire DIV * *
#tips #tipsArrow {position:absolute; Top:26px left: -10px}
#tips #light
{
width:36px;
height:36px;
margin:6px 16px 16px 16px;
Float:left;
}
#tips span
{
margin-top:18px;
}
#tips #close
{
width:20px;
height:16px;
Border:none;
Z-index:1;
left:280px;
top:6px;
Position:absolute;
Cursor:pointer;
}
The script is as follows:
Copy Code code as follows:
$ (document). Ready (function () {
Time Mouse over
$ ("ul Li span"). MouseOver (function () {
$ ("#tips"). Remove ();
var elem= $ (this). parent ();
var mtop=elem.offset (). top;//gets the top coordinates of the element
var mleft=elem.offset (). left;//gets the left coordinate of the element
var addleft=elem.width ();//Get the width of the element
var finaltop=mtop-30;//gets the top position where the final element appears, at which point-30 elements are increasing the height of the Div, so that the arrow points to the corresponding line
var finalleft=mleft+addleft+20; Gets the left of the final element, with the line width to the right of the corresponding row plus 20 empty elements
var num=$ ("Li"). Index (elem) +1;
PopDiv1 (Finaltop,finalleft, "cue box to remind you that this is the first" +num+ "line data!);
})
})
Fixed information box
function PopDiv1 (tops,lefts,messages)
{
var str= "";
str= "<div id= ' tips ' ><p> ' "+messages+" "</p></div>";
$ (' body '). Append (str);
$ ("#tips"). CSS ({"Top": tops+ "px", "left": lefts+ "px"});
}
function Closeup ()
{
$ ("#tips"). Remove ();
}
The final display effect is as follows:
mouse move to the corresponding data row, display the corresponding prompt box, the right Fork small icon to close the entire pop-up layer ...
Design Summary:
The key to this design process is position:absolute (absolute positioning, which allows layers to overlay on the page), Z-index (to show the stacking order of layers), top, Left (display pop-up page coordinates), (offset (). Left,offset (). top) on the page to find the coordinates of an element, location found, you can randomly in its periphery positioning pop-up layer, other styles can be adjusted according to their own art needs ...
Source Download Http://xiazai.jb51.net/201010/yuanma/popDiv.rar
