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


Posted in Javascript onApril 11, 2010

这里说明下,这样的效果三水点靠木发过类似的效果。具体的可以到脚本下载中心查找。

效果图:

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

 

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

原材料:

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

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

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

思路:

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(); 
}); 
} 
});
Javascript 相关文章推荐
利用javascript移动div层-javascript 拖动层
Mar 22 Javascript
用jquery设置按钮的disabled属性的实现代码
Nov 28 Javascript
CodeMirror2 IE7/IE8 下面未知运行时错误的解决方法
Mar 29 Javascript
jquery 操作DOM的基本用法分享
Apr 05 Javascript
原生js操作checkbox用document.getElementById实现
Oct 12 Javascript
JS小游戏之宇宙战机源码详解
Sep 25 Javascript
JavaScript中的变量定义与储存介绍
Dec 31 Javascript
javascript类型系统——undefined和null全面了解
Jul 13 Javascript
浅析javascript中的Event事件
Dec 09 Javascript
bootstrap 表单验证使用方法
Jan 11 Javascript
vue中阻止click事件冒泡,防止触发另一个事件的方法
Feb 08 Javascript
Vue路由的模块自动化与统一加载实现
Jun 05 Javascript
url 编码 js url传参中文乱码解决方案
Apr 11 #Javascript
jquery学习笔记二 实现可编辑的表格
Apr 09 #Javascript
jquery 图片截取工具jquery.imagecropper.js
Apr 09 #Javascript
跟着JQuery API学Jquery 之三 筛选
Apr 09 #Javascript
跟着JQuery API学Jquery 之二 属性
Apr 09 #Javascript
JSON 教程 json入门学习笔记
Sep 22 #Javascript
jquery.AutoComplete.js中文修正版(支持firefox)
Apr 09 #Javascript
You might like
IIS下配置Php+Mysql+zend的图文教程
2006/12/08 PHP
php采用curl模仿登录人人网发布动态的方法
2014/11/07 PHP
PHP入门教程之使用Mysqli操作数据库的方法(连接,查询,事务回滚等)
2016/09/11 PHP
Add a Formatted Table to a Word Document
2007/06/15 Javascript
设置iframe的document.designMode后仅Firefox中其body.innerHTML为br
2012/02/27 Javascript
深入理解JavaScript系列(35):设计模式之迭代器模式详解
2015/03/03 Javascript
javascript给span标签赋值的方法
2015/11/26 Javascript
jQuery文字横向滚动效果的实现代码
2016/05/31 Javascript
javascript运算符——位运算符全面介绍
2016/07/14 Javascript
阿里云ecs服务器中安装部署node.js的步骤
2016/10/08 Javascript
表单元素值获取方式js及java方式的简单实例
2016/10/15 Javascript
vue组件实例解析
2017/01/10 Javascript
jquery 仿锚点跳转到页面指定位置的实例
2017/02/14 Javascript
详解nodejs微信公众号开发——4.自动回复各种消息
2017/04/11 NodeJs
Vue.js鼠标悬浮更换图片功能
2017/05/17 Javascript
利用d3.js力导布局绘制资源拓扑图实例教程
2019/01/08 Javascript
javascript实现时间日期的格式化的方法汇总
2020/08/06 Javascript
原生js实现弹幕效果
2020/11/29 Javascript
在vue中使用inheritAttrs实现组件的扩展性介绍
2020/12/07 Vue.js
js canvas实现五子棋小游戏
2021/01/22 Javascript
[01:01:52]完美世界DOTA2联赛PWL S2 GXR vs Magma 第二场 11.25
2020/11/26 DOTA
pandas值替换方法
2018/07/10 Python
对Python的多进程锁的使用方法详解
2019/02/18 Python
Python脚本修改阿里云的访问控制列表的方法
2019/03/08 Python
python async with和async for的使用
2019/06/20 Python
python opencv实现证件照换底功能
2019/08/19 Python
详解Python3定时器任务代码
2019/09/23 Python
Pytorch1.5.1版本安装的方法步骤
2020/12/31 Python
德国玩具商店:Planet Happy DE
2021/01/16 全球购物
自动化毕业生专业自荐书范文
2014/02/04 职场文书
平安工地汇报材料
2014/08/19 职场文书
授权委托书(法人单位用)
2014/09/29 职场文书
离婚协议书范本2014
2014/10/27 职场文书
二年级语文下册复习计划
2015/01/19 职场文书
读《方与圆》有感:交友方圆有度
2020/01/14 职场文书
python可视化大屏库big_screen示例详解
2021/11/23 Python