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

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

效果图:

 

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

原材料:

 

   

   

思路:

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();
});
}
});

时间: 2024-09-17 15:53:25

jquery 模拟雅虎首页的点击对话框效果_jquery的相关文章

jQuery模拟实现的select点击选择效果【附demo源码下载】_jquery

本文实例讲述了jQuery模拟实现的select点击选择效果.分享给大家供大家参考,具体如下: 有时候有些HTML元素无法让我们用样式控制进行控制,但是射鸡师或是客户的需求就是需要这种效果,还要让每个浏览器都显示同样的效果,这时候就会让我们这些所谓的前端攻城师很蛋疼,客户会认为交了点钱不让你折腾些东西,以为你是没做事的.面对这些对技术一窍不通的客户,技术对于他们来说就是一坨屎,以为我们都是用意念来写代码做程序的,所以都把我们的劳动成果看作是廉价得像是简单的拉出一泡屎而已. 虽然很喜欢什么都没有修

jQuery模拟新浪微博首页滚动效果的方法

 这篇文章主要介绍了jQuery模拟新浪微博首页滚动效果的方法,实例分析了jQuery使用animate.css等方法实现滚动特效的技巧,具有一定参考借鉴价值,需要的朋友可以参考下     本文实例讲述了jQuery模拟新浪微博首页滚动效果的方法.分享给大家供大家参考.具体实现方法如下:   代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

jQuery模拟新浪微博首页滚动效果的方法_jquery

本文实例讲述了jQuery模拟新浪微博首页滚动效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xh

jQuery模拟完美实现经典FLASH导航动画效果【附demo源码下载】_jquery

本文实例讲述了jQuery模拟实现经典FLASH导航动画效果的方法.分享给大家供大家参考,具体如下: 一.前言: FLASH在中国互联网发展初期的时候非常的热,各种各样的矢量造型和动作,加上专门配制的音效,让很多人眼前一亮,并且让很多人迷上了这种新兴的媒体,那时候兴起了很多大大小小的专门发布FLASH的网站,印象中记得的像"FLASH闪吧"."FLASH帝国"."闪客天地"等这些都是很火很热的网站,在当时盛极一时,由此也产生了一大批的专门从事FL

基于jquery fly插件实现加入购物车抛物线动画效果_jquery

先给大家展示下效果图: 在购物网站中,加入购物车的功能是必须的功能,有的网站在用户点击加入购物车按钮时,就会出现该商品从点击出以抛物线的动画相似加入购物车,这个功能看起来非常炫,对用户体验也有一定的提高.下面介绍基于jquery fly插件实现加入购物车抛物线动画效果. 使用jquery.fly插件很方便时实现抛物线动画加入购物车的功能 一.插件下载 插件官方:https://github.com/amibug/fly 二.载入jQuery库文件和jquery.fly.min.js插件 <scr

jQuery实现左侧导航模块的显示与隐藏效果_jquery

本文实例讲述了jQuery实现左侧导航模块的显示与隐藏效果.分享给大家供大家参考,具体如下: 1.效果如图所示: 2.html代码: <div class="content_left"> <div class="global_module news"> <h3>最新动态</h3> <div class="scrollNews" > <ul> <li><a h

jQuery实现鼠标经过提示信息的地图热点效果_jquery

jQuery实现鼠标经过提示信息的地图热点效果 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>地图热点效果-鼠标经过弹出提示信息</title> <meta http-equiv="Conte

jQuery采用连缀写法实现的折叠菜单效果_jquery

本文实例讲述了jQuery采用连缀写法实现的折叠菜单效果.分享给大家供大家参考.具体如下: 这是一款jQuery采用连缀写法实现的折叠菜单效果,作者是位高手啊,自己用jQuery的连缀写法编写的,差不多是手风琴菜单,功能是实现了,不过有点担心效率,作者希望与高人一起交流进步. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-lz-fade-in-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUB

jQuery实现的背景动态变化导航菜单效果_jquery

本文实例讲述了jQuery实现的背景动态变化导航菜单效果.分享给大家供大家参考.具体如下: 这里介绍一款使用jQuery插件制作完成的导航菜单,一大特点是,菜单的背景有动态效果,与使用的背景图片完全变换,动态效果是在鼠标悬停时出现,也就是把鼠标放在菜单上的时候,背景即开始滚动起来,看上去漂亮极了,而且兼容性也是相当不错的,推荐给网页设计者使用. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-bg-cha-menu-nav-code