jquery simulates the click dialog box effect of Yahoo homepage_jquery

Let me explain here, this kind of effect Script House has released similar effects. For details, you can find it in the Script Download center.

Rendering:

Disclaimer: What I did was just to achieve this effect. In terms of aesthetics, it did not make Yahoo’s homepage as beautiful as it is, so don’t mind!

Raw materials:

Things:

1: Add a suspension event for each li tag

2: Build an iframe and obtain the href attribute value of the a element under the current li tag

3: Build a DIV containing iframe elements and display the
HTML structure:

Copy code The code is as follows:

• News Li>
  
• 体育


• Entertainment

CSS style:

Copy code The 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('

preview< ;/div>');
$('#clickdiv').addClass('quick');
$("#clickdiv").click(function(){
$(this). css('display','none');
var url=$(this).parent().find('a').attr('href');
var $basediv=$(this ).parent().parent().find('#window');
if($basediv){
$('#window').remove();
$(this). parent()
.append("

")
. fadeIn('slow');
$("ul li #window").addClass('show');
$('#closebutton a').addClass('close');
$ ('#closebutton a').click(function(){
$("ul li #window").remove();
});
}
});