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 字符串与数组转换函数[不用split与join]
Dec 13 Javascript
JQuery操作表格(隔行着色,高亮显示,筛选数据)
Feb 23 Javascript
jQuery实现Div拖动+键盘控制综合效果的方法
Mar 10 Javascript
vue模板语法-插值详解
Mar 06 Javascript
javascript如何用递归写一个简单的树形结构示例
Sep 06 Javascript
vue将时间戳转换成自定义时间格式的方法
Mar 02 Javascript
在 Linux/Unix 中不重启 Vim 而重新加载 .vimrc 文件的流程
Mar 21 Javascript
JS加密插件CryptoJS实现的Base64加密示例
Aug 16 Javascript
微信小程序内拖动图片实现移动、放大、旋转的方法
Sep 04 Javascript
vue中通过使用$attrs实现组件之间的数据传递功能
Sep 01 Javascript
如何阻止小程序遮罩层下方图层滚动
Sep 05 Javascript
layui 富文本赋值,取值,取纯文本值的实例
Sep 18 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 strtotime 函数UNIX时间戳
2009/01/14 PHP
ThinkPHP自定义函数解决模板标签加减运算的方法
2015/07/03 PHP
解决FireFox下[使用event很麻烦]的问题
2006/11/26 Javascript
js或css文件后面跟参数的原因说明
2010/01/09 Javascript
Jquery乱码的一次解决过程 图解教程
2010/02/20 Javascript
HTML5附件拖拽上传drop &amp; google.gears实现代码
2011/04/28 Javascript
Webkit的跨域安全问题说明
2011/09/13 Javascript
求数组最大最小值方法适用于任何数组
2013/08/16 Javascript
javascript查找字符串中出现最多的字符和次数的小例子
2013/10/29 Javascript
JQuery获取或设置ckeditor的数据(示例代码)
2013/11/15 Javascript
5款JavaScript代码压缩工具推荐
2014/07/07 Javascript
使用正则表达式的格式化与高亮显示json字符串
2014/12/03 Javascript
2014 年最热门的21款JavaScript框架推荐
2014/12/25 Javascript
javascript和jquery实现设置和移除文本框默认值效果代码
2015/01/13 Javascript
jQuery实现简单的日期输入格式化控件
2015/03/12 Javascript
基于jQuery实现复选框是否选中进行答题提示
2015/12/10 Javascript
基于AngularJS+HTML+Groovy实现登录功能
2016/02/17 Javascript
微信小程序  modal详解及实例代码
2016/11/09 Javascript
几种tab切换详解
2017/02/03 Javascript
深入理解ES6 Promise 扩展always方法
2017/09/26 Javascript
zTree树形菜单交互选项卡效果的实现方法
2017/12/25 Javascript
Vue中对拿到的数据进行A-Z排序的实例
2018/09/25 Javascript
jQuery实现购物车的总价计算和总价传值功能
2018/11/28 jQuery
Node.js学习之内置模块fs用法示例
2020/01/22 Javascript
Python读取sqlite数据库文件的方法分析
2017/08/07 Python
django实现登录时候输入密码错误5次锁定用户十分钟
2017/11/05 Python
python去除拼音声调字母,替换为字母的方法
2018/11/28 Python
Python脚本修改阿里云的访问控制列表的方法
2019/03/08 Python
python sitk.show()与imageJ结合使用常见的问题
2020/04/20 Python
解决python中import文件夹下面py文件报错问题
2020/06/01 Python
PyCharm Ctrl+Shift+F 失灵的简单有效解决操作
2021/01/15 Python
Python try except finally资源回收的实现
2021/01/25 Python
UNIX文件类型
2013/08/29 面试题
绩效专员岗位职责
2013/12/02 职场文书
2014年物业公司工作总结
2014/11/22 职场文书
全民创业工作总结
2015/08/13 职场文书