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 设计模式学习 Factory
Jul 29 Javascript
IE和Firefox下event事件杂谈
Dec 18 Javascript
jquery关于图形报表的运用实现代码
Jan 06 Javascript
JS无限树状列表实现代码
Jan 11 Javascript
ExtJS下书写动态生成的xml(兼容火狐)
Apr 02 Javascript
js实现按Ctrl+Enter发送效果
Sep 18 Javascript
javascript实现带节日和农历的日历特效
Feb 01 Javascript
JavaScript实现常用二级省市级联下拉列表的方法
Mar 25 Javascript
HTML5实现留言和回复页面样式
Jul 22 Javascript
angularjs过滤器--filter与ng-repeat配合有奇效
Apr 20 Javascript
JS实现拼图游戏
Jan 29 Javascript
Vue的自定义组件不能使用click方法的解决
Jul 28 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
PHP新手上路(十一)
2006/10/09 PHP
php提示undefined index的几种解决方法
2012/05/21 PHP
PHP中3种生成XML文件方法的速度效率比较
2012/10/06 PHP
记录mysql性能查询过程的使用方法
2013/05/02 PHP
laravel admin实现分类树/模型树的示例代码
2020/06/10 PHP
可以支持多中格式的JS键盘
2007/05/02 Javascript
基于Jquery与WebMethod投票功能实现代码
2011/01/19 Javascript
原生js实现复制对象、扩展对象 类似jquery中的extend()方法
2014/08/30 Javascript
javascript实现禁止复制网页内容
2014/12/16 Javascript
node.js操作mongodb学习小结
2015/04/25 Javascript
详解Javascript中的Object对象
2016/02/28 Javascript
基于Jquery插件Uploadify实现实时显示进度条上传图片
2020/03/26 Javascript
javascript中对Date类型的常用操作小结
2016/05/19 Javascript
JS小数运算出现多为小数问题的解决方法
2016/06/02 Javascript
js简单实现图片延迟加载的方法
2016/07/19 Javascript
微信小程序之数据双向绑定与数据操作
2017/05/12 Javascript
JavaScript表单验证实现代码
2017/05/22 Javascript
vue移动端实现下拉刷新
2018/04/22 Javascript
详解nodejs解压版安装和配置(带有搭建前端项目脚手架)
2018/12/06 NodeJs
js时间戳转yyyy-MM-dd HH-mm-ss工具类详解
2019/04/30 Javascript
js Math数学简单使用操作示例
2020/03/13 Javascript
Python中的错误和异常处理简单操作示例【try-except用法】
2017/07/25 Python
Python如何向SQLServer存储二进制图片
2020/06/08 Python
纯css3使用vw和vh实现自适应的方法
2018/02/09 HTML / CSS
美国演唱会和体育门票购买网站:Ticketnetwork
2018/10/19 全球购物
马来西亚奢侈品牌购物商城:Valiram 247
2020/09/29 全球购物
资产经营总监岗位职责范文
2013/12/01 职场文书
尽职尽责村干部自我鉴定
2014/01/23 职场文书
献爱心大型公益活动策划方案
2014/09/15 职场文书
走群众路线学习心得体会
2014/10/31 职场文书
班主任工作实习计划
2015/01/16 职场文书
党员个人总结自评
2015/02/14 职场文书
法定代表人资格证明书
2015/06/18 职场文书
宣传稿格式范文
2015/07/23 职场文书
JUnit5常用注解的使用
2021/07/02 Java/Android
CSS实现单选折叠菜单功能
2021/11/01 HTML / CSS