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 相关文章推荐
Display SQL Server Login Mode
Jun 21 Javascript
图片翻转效果具体实现代码
Jan 09 Javascript
node.js中的url.resolve方法使用说明
Dec 10 Javascript
jQuery中$.ajax()和$.getJson()同步处理详解
Aug 12 Javascript
js中substring和substr两者区别和使用方法
Nov 09 Javascript
第九篇Bootstrap导航菜单创建步骤详解
Jun 21 Javascript
Javascript将字符串日期格式化为yyyy-mm-dd的方法
Oct 27 Javascript
谈谈VUE种methods watch和compute的区别和联系
Aug 01 Javascript
JavaScript数据结构与算法之队列原理与用法实例详解
Nov 22 Javascript
js动态引入的四种方法
May 05 Javascript
使用zrender.js绘制体温单效果
Oct 31 Javascript
JavaScript中如何对多维数组(矩阵)去重的实现
Dec 04 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下实现折线图效果的代码
2007/04/28 PHP
php生成txt文件标题及内容的方法
2014/01/16 PHP
CI(CodeIgniter)框架配置
2014/06/10 PHP
PHP实践教程之过滤、验证、转义与密码详解
2017/07/24 PHP
laravel实现于语言包的完美切换方法
2019/09/29 PHP
可以将word转成html的js代码
2010/04/11 Javascript
jquery获取ASP.NET服务器端控件dropdownlist和radiobuttonlist生成客户端HTML标签后的value和text值
2010/06/28 Javascript
JS中判断null、undefined与NaN的方法
2014/03/24 Javascript
js调试系列 初识控制台
2014/06/18 Javascript
理解javascript中的原型和原型链
2015/07/30 Javascript
javascript和jQuery实现网页实时聊天的ajax长轮询
2016/07/20 Javascript
JS实现十字坐标跟随鼠标效果
2017/12/25 Javascript
js实现input密码框显示/隐藏功能
2020/09/10 Javascript
JS隐藏号码中间4位代码实例
2019/04/09 Javascript
JS中准确判断变量类型的方法
2020/06/01 Javascript
JavaScript实现点击图片换背景
2020/11/20 Javascript
[01:02:04]EG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
python获取Linux下文件版本信息、公司名和产品名的方法
2014/10/05 Python
在Python中操作列表之List.pop()方法的使用
2015/05/21 Python
Python实现的维尼吉亚密码算法示例
2018/04/12 Python
Django 创建新App及其常用命令的实现方法
2019/08/04 Python
彻底搞懂 python 中文乱码问题(深入分析)
2020/02/28 Python
Python request使用方法及问题总结
2020/04/26 Python
html5指南-1.html5全局属性(html5 global attributes)深入理解
2013/01/07 HTML / CSS
美国网上花店:JustFlowers
2017/02/12 全球购物
丹麦优惠购物网站:PLUSSHOP
2019/03/24 全球购物
美国主要的特色咖啡和茶公司:Peet’s Coffee
2020/02/14 全球购物
sort命令的作用和用法
2012/11/04 面试题
一道Delphi面试题
2016/10/28 面试题
园林施工员岗位职责
2013/12/11 职场文书
元旦红领巾广播稿
2014/02/19 职场文书
开学典礼决心书
2014/03/11 职场文书
2014年校务公开工作总结
2014/12/18 职场文书
检讨书大全
2015/01/27 职场文书
Python包管理工具pip的15 个使用小技巧
2021/05/17 Python
Mysql超详细讲解死锁问题的理解
2022/04/01 MySQL