首页 / 脚本样式 / JavaScript / jquery 模拟雅虎首页的点击对话框效果

效果图：

声明：我做的只是实现这个效果，在美观上并没有做到yahoo主页这么好看，所以不要介意！

原材料：

思路：

1：为每一个li标签添加悬浮事件

2：构建iframe并获取到当前li标签下的a元素的href属性值

3：构建DIV包含iframe元素并显示
HTML结构：
复制代码 代码如下:
<ul>
<Li><a href="http://www.google.cn">新闻</a></Li>
<li><a href="http://www.163.com">体育</a></li>
<li><a href="http://www.sina.com">娱乐</a></li>
</ul>

CSS样式：
复制代码 代码如下:
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代码：
复制代码 代码如下:
$（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">预览</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（"<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（）;
}）;
}
}）;