`
BradyZhu
  • 浏览: 245427 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

jQuery实现窗口的淡入淡出效果

 
阅读更多

在很多网页中都可以看到网页弹出的一个窗口,然后很多情况下面还会有淡入淡出的效果,下面我们就这个窗口的

淡入淡出效果来做一个例子,这个是使用jQuery来做的,其实非常简单。

首先看HTML代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>浮动窗口</title>
    <script type="text/javascript" src="/Ajax/js/jquery-1.7.2.js"></script>
	<script type="text/javascript" src="/Ajax/js/win.js"></script>
  	<link rel="stylesheet" href="/Ajax/css/win.css" type="text/css"></link>
  	
  </head>
  
  <body>
  <a href="#" onclick="showwin();">显示浮动窗口</a>
  <div id="myWin">
  	<div id="title">我是标题栏<span id="span"><a href="#" onclick="hello()">关闭</a></span></div>
  	<div id="content">我是一个窗口哦!!!</div>
  </div>
  </body>
</html>

然后再看JavaScript代码

//显示浮动窗口的方法
function showwin(){
	//alert("hah");
	//显示窗口
	//$("#myWin").show("slow");
	$("#myWin").fadeIn(3500);
}

function hello(){
	$("#myWin").fadeOut(2000);
}

剩下的就是CSS代码了

#myWin{
	/*希望窗口有边框*/
	border: 1px red solid;
	width: 300px;
	height: 200px;
	/*控制窗口的位置*/
	position: absolute;
	top: 100px;
	left: 350px;
	
	display: none;
}

/*控制标题栏的背景色*/
#title{
	background-color: yellow;
	/*控制标题栏左内边距*/
	padding-left: 3px;
	
}

#content{
	padding-top: 5px;
	padding-left: 5px;
}

#span{
	padding-left: 180px;
}

a:LINK{
	text-decoration: none;
}

a:HOVER {
	color: red;
}

效果还是很好的,而且很简单,
分享到:
评论

相关推荐

    jquery窗口淡入淡出实例

    jquery窗口淡入淡出实例,jquery窗口淡入淡出实例

    JQuery淡入淡出窗口

    用JQuery实现窗口的淡入淡出效果,用JQuery实现窗口的淡入淡出效果

    jQuery超炫淡入淡出效果DIV渐变居中弹出框插件

    jQuery超炫淡入淡出效果DIV渐变居中弹出框插件

    jquery实例1:淡入淡出窗口

    NULL 博文链接:https://sxpujs.iteye.com/blog/409943

    jQuery页面滚动文字图片元素淡入动画特效

    一款目前挺多网站用到的jQuery页面滚动文字图片元素淡入动画特效,网页往下滚动时div、img等元素才淡入动画显示出来。

    jQuery 渐变居中弹出框,超炫淡入淡出

    内容索引:脚本资源,jQuery,弹出框 核心基于jQuery的渐变弹出框,弹出在网页的正中间,具有超炫淡入淡出效果,可以看到jQuery实在是非常强大,我们仅需少量的CSS和JavaScript代码即可完成这一效果。我们可以在这个...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    4.jQuery超炫淡入淡出效果DIV渐变居中弹出框插件下载 5.jquery黑色+蓝色风格DIV提示框示例 6.一款jQuery+DIV居中淡入淡出信息提示框示例 7.一款jQuery可拖动提示窗插件(对话框Dialog插件) 8.一款基于jQuery...

    超实用的jQuery代码段

    1.3 实现幻灯片式的淡入淡出效果 1.4 切换页面的淡入淡出 1.5 页面的滑动隐藏 1.6 切换页面的滑动 1.7 图片的动画效果 1.8 停止动画效果 1.9 不可不知的Callback回调 1.10 提高效率的链式(Chaining)操作 1.11 在新...

    jQuery 背景图片切换效果插件

    背景图的切换效果有淡入淡出,滚动,幻灯,其中选用滚动和幻灯时,可以选择方向,上下左右,或者左上右下,右上左下。图片切换顺序也可以设置正向,反向或者随机。支持所有新版浏览器;支持单张或者多张图片。

    一个新闻Ajax调用显示的jquery特效.rar

    一个基于 jQuery新闻显示插件,可循环切换显示网站里预设的内容,并支持淡入淡出的显示效果 ,滑开隐藏Slide Up-Down, 支持手支控制加载内容,向左向右打开Left To Right 的效果,运行效果如下图所示。

    JQ弹窗教程,附DEMO

    功能描述 功能性 1.是否显示标题栏 ...3.是否显示关闭按钮 4.是否固定定位 5.自定义设置窗体弹出位置 6.是否显示遮罩层 7.遮罩层颜色设置 ...1.窗体显示/隐藏淡入淡出效果 2.ie6中窗体模拟固定定位的缓动效果

    兼容FF,IE等浏览器的弹出层教程

    功能描述 功能性 1.是否显示标题栏 ...3.是否显示关闭按钮 4.是否固定定位 5.自定义设置窗体弹出位置 6.是否显示遮罩层 7.遮罩层颜色设置 ...1.窗体显示/隐藏淡入淡出效果 2.ie6中窗体模拟固定定位的缓动效果

    jQuery插件bgStretcher.js实现全屏背景特效

    背景图的切换效果有淡入淡出,滚动,幻灯,其中选用滚动和幻灯时,可以选择方向,上下左右,或者左上右下,右上左下。图片切换顺序也可以设置正向,反向或者随机。更多选项就看你自己慢慢研究了。 bgStretcher是一个...

    jQuery 提示(仿WordPress)

    内容索引:脚本资源,jQuery,jQuery提示,淡入淡出 仿WordPress风格的jQuery 提示窗口,注意,本窗口不能拖动,可以在窗口内调用其它网页,内含三个示例,碰上风格适合的网站还是不错的,它带有渐入渐出的动画特效,...

    基于Html5,bootstrap4的后台管理模板

    基于Html5的开发模板,包含资源版本jquery3.2.1,bootstrap4.1。现在自己也在用的后台管理模板,如果觉得好用可以给个好评,里面支持窗口淡入淡出,菜单栏放缩

    关注jquery技巧提高jquery技能(前端开发必学)

    淡入淡出/滑动开关 简单的折叠效果 将两个 Div 设为相同高度 在新窗口打开外部链接 找到文本元素 切换可视与隐藏的触发器 回到顶部按钮 通过使用 jQuery 中的 animate 和 scrollTop 方法,你无需插件便可创建一个...

    扁平化风格自动关闭的jquery右下角提示特效.rar

    扁平化风格的jquery右下角提示特效,一款提示框,这种风格更像是手机Android上的风格,本代码演示了两种提示效果:一种是警告提示框,另一种是操作成功的提示,两者可同时弹出,以淡入淡出的方式渐变显示出来,3秒后...

    jquery-stepmodal:模态显示

    过渡(淡入淡出) - 显示或隐藏内容时使用的过渡/动画类型(有关其他选项,请参见下文) transitionIn (fade) - 显示内容时使用的过渡/动画类型(如果不包括,则使用过渡值)(有关其他选项,请参见下文) ...

    jQuery版jsWindows(可拖动、放大、缩小)弹出层窗口

    内容索引:脚本资源,jQuery,jsWindows,层拖动 基于jQuery的jsWindows弹出层窗口,可拖动、放大、缩小,jsWindows是一款仿Windows的窗口,jQuery版在此基础上进行了功能增强,比如加入了淡入淡出等,操作上感觉比纯...

    WEB前端开发都应知道的jquery小技巧及jquery三个简写

    8淡入淡出/滑动开关 9简单的折叠效果 10将两个 Div 设为相同高度 11在新窗口打开外部链接 12找到文本元素 13切换可视与隐藏的触发器 下面给大家介绍每个小技巧的具体含义。 1.回到顶部按钮 通过使用 jQuery 中的 ...

Global site tag (gtag.js) - Google Analytics