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
  
• 体育


• 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();
});
}
});

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn