jquery 模拟雅虎首页的点击对话框效果

qq李员外

qq李员外

2016-02-19 13:09

下面图老师小编跟大家分享jquery 模拟雅虎首页的点击对话框效果,一起来学习下过程究竟如何进行吧!喜欢就赶紧收藏起来哦~
这里说明下,这样的效果发过类似的效果。具体的可以到脚本下载中心查找。

效果图:

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

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

原材料:

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

思路:

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

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

3:构建DIV包含iframe元素并显示
HTML结构:

代码如下:


ul
Lia href="http://www.google.cn"新闻/a/Li
lia href="http://www.163.com"体育/a/li
lia 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预览/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/diviframe 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();
});
}
});

展开更多 50%)
分享

猜你喜欢

jquery 模拟雅虎首页的点击对话框效果

Web开发
jquery 模拟雅虎首页的点击对话框效果

jQuery Dialog弹出层对话框插件

Web开发
jQuery Dialog弹出层对话框插件

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

关于对话框

编程语言 网络编程
关于对话框

折叠对话框

办公软件
折叠对话框

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

用JQuery 实现的自定义对话框

Web开发
用JQuery 实现的自定义对话框

JQuery实现自定义对话框的代码

Web开发
JQuery实现自定义对话框的代码

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

JavaScript和JQuery实用代码片段(一)

JavaScript和JQuery实用代码片段(一)

JAAS 实现in Struts Web App使用XMLPolicy文件不改变VM安全

JAAS 实现in Struts Web App使用XMLPolicy文件不改变VM安全
下拉加载更多内容 ↓