Jquery simulates the click dialog box on the Yahoo homepage.

This shows that the results have been similar. For details, go to the script download center.

:

Statement: All I do is achieve this effect. It is not as nice as the Yahoo homepage, so don't mind!

Raw materials:

Ideas:

1: Add a floating event for each Li tag

2: Construct an IFRAME and obtain the href attribute value of Element A under the current Li tag.

3: Build a div that contains the IFRAME element and display it
HTML structure:

CopyCode The Code is as follows: <ul>
<Li> <a href = "http://www.google.cn"> News </a> </LI>
<Li> <a href = "http://www.163.com"> sports </a> </LI>
<Li> <a href = "http://www.sina.com"> entertainment </a> </LI>
</Ul>

CSS style:Copy codeThe Code is as follows: ul {
Float: left;
}
Ul Li {
Display: block;
Margin-top: 15px;
Width: 100px;
Position: relative;
}
A {
Text-Decoration: none;
Color: # 8000ff;
}
. Show {
Width: 640px;
Height: 506px;
Position: absolute;
Top:-45px;
Left: 30px;
Background: url(1.gif) No-Repeat;
Padding: 45px 20px 35px 40px;
}
. Close {
Width: 22px;
Height: 22px;
Float: right;
Display: block;
Margin-top:-30px;
Background: url(2.gif) No-Repeat;
}
. Quick {
Position: absolute;
Top: 0px;
Left: 30px;
Background: url(3.jpg) No-Repeat;
Width: 37px;
Height: 26px;
Font-size: 12px;
Color: white;
Line-Height: 26px;
Text-align: center;
}

JS Code:Copy code The Code is as follows: $ (document). Ready (function (){
$ ('Ul Li A'). Hover (function (e ){
VaR quickw = $ (this). Parent (). Parent (). Find ('# clickdiv ');
If (quickw ){
$ ('# Clickdiv'). Remove ();
}
$ (This). Parent (). append ('<Div id = "clickdiv"> preview </div> ');
$ ('# Clickdiv'). addclass ('quick ');
$ ("# Clickdiv"). Click (function (){
Watermarks (this).css ('display', 'None ');
VaR url = $ (this). Parent (). Find ('A'). ATTR ('href ');
VaR $ basediv = $ (this). Parent (). Parent (). Find ('# Windows ');
If ($ basediv ){
$ ('# Windows'). Remove ();
$ (This). Parent ()
. Append ("<Div id = 'window'> <Div id = 'closebutton '> <a href =' # '> </a> </div> <IFRAME frameborder =' 0 'hspace = '0' src = '"+ URL +" 'style = 'width: 640px; Height: 506px; '> </iframe> </div> ")
. Fadein ('slow ');
$ ("Ul li # window"). addclass ('show ');
$ ('# Closebutton A'). addclass ('close ');
$ ('# Closebutton A'). Click (function (){
$ ("Ul li # window"). Remove ();
});
}
});