jquery simulates the click dialog box effect of Yahoo homepage

jquery simulates the click dialog box effect of Yahoo homepage_jquery

WBOY

Release： 2016-05-16 18:29:57

Original

1196 people have browsed it

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:

jquery simulates the click dialog box effect of Yahoo homepage_jquery

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:

jquery simulates the click dialog box effect of Yahoo homepage_jquery

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:

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