在很多网页中都可以看到网页弹出的一个窗口,然后很多情况下面还会有淡入淡出的效果,下面我们就这个窗口的
淡入淡出效果来做一个例子,这个是使用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超炫淡入淡出效果DIV渐变居中弹出框插件
NULL 博文链接:https://sxpujs.iteye.com/blog/409943
一款目前挺多网站用到的jQuery页面滚动文字图片元素淡入动画特效,网页往下滚动时div、img等元素才淡入动画显示出来。
内容索引:脚本资源,jQuery,弹出框 核心基于jQuery的渐变弹出框,弹出在网页的正中间,具有超炫淡入淡出效果,可以看到jQuery实在是非常强大,我们仅需少量的CSS和JavaScript代码即可完成这一效果。我们可以在这个...
4.jQuery超炫淡入淡出效果DIV渐变居中弹出框插件下载 5.jquery黑色+蓝色风格DIV提示框示例 6.一款jQuery+DIV居中淡入淡出信息提示框示例 7.一款jQuery可拖动提示窗插件(对话框Dialog插件) 8.一款基于jQuery...
1.3 实现幻灯片式的淡入淡出效果 1.4 切换页面的淡入淡出 1.5 页面的滑动隐藏 1.6 切换页面的滑动 1.7 图片的动画效果 1.8 停止动画效果 1.9 不可不知的Callback回调 1.10 提高效率的链式(Chaining)操作 1.11 在新...
背景图的切换效果有淡入淡出,滚动,幻灯,其中选用滚动和幻灯时,可以选择方向,上下左右,或者左上右下,右上左下。图片切换顺序也可以设置正向,反向或者随机。支持所有新版浏览器;支持单张或者多张图片。
一个基于 jQuery新闻显示插件,可循环切换显示网站里预设的内容,并支持淡入淡出的显示效果 ,滑开隐藏Slide Up-Down, 支持手支控制加载内容,向左向右打开Left To Right 的效果,运行效果如下图所示。
功能描述 功能性 1.是否显示标题栏 ...3.是否显示关闭按钮 4.是否固定定位 5.自定义设置窗体弹出位置 6.是否显示遮罩层 7.遮罩层颜色设置 ...1.窗体显示/隐藏淡入淡出效果 2.ie6中窗体模拟固定定位的缓动效果
功能描述 功能性 1.是否显示标题栏 ...3.是否显示关闭按钮 4.是否固定定位 5.自定义设置窗体弹出位置 6.是否显示遮罩层 7.遮罩层颜色设置 ...1.窗体显示/隐藏淡入淡出效果 2.ie6中窗体模拟固定定位的缓动效果
背景图的切换效果有淡入淡出,滚动,幻灯,其中选用滚动和幻灯时,可以选择方向,上下左右,或者左上右下,右上左下。图片切换顺序也可以设置正向,反向或者随机。更多选项就看你自己慢慢研究了。 bgStretcher是一个...
内容索引:脚本资源,jQuery,jQuery提示,淡入淡出 仿WordPress风格的jQuery 提示窗口,注意,本窗口不能拖动,可以在窗口内调用其它网页,内含三个示例,碰上风格适合的网站还是不错的,它带有渐入渐出的动画特效,...
基于Html5的开发模板,包含资源版本jquery3.2.1,bootstrap4.1。现在自己也在用的后台管理模板,如果觉得好用可以给个好评,里面支持窗口淡入淡出,菜单栏放缩
淡入淡出/滑动开关 简单的折叠效果 将两个 Div 设为相同高度 在新窗口打开外部链接 找到文本元素 切换可视与隐藏的触发器 回到顶部按钮 通过使用 jQuery 中的 animate 和 scrollTop 方法,你无需插件便可创建一个...
扁平化风格的jquery右下角提示特效,一款提示框,这种风格更像是手机Android上的风格,本代码演示了两种提示效果:一种是警告提示框,另一种是操作成功的提示,两者可同时弹出,以淡入淡出的方式渐变显示出来,3秒后...
过渡(淡入淡出) - 显示或隐藏内容时使用的过渡/动画类型(有关其他选项,请参见下文) transitionIn (fade) - 显示内容时使用的过渡/动画类型(如果不包括,则使用过渡值)(有关其他选项,请参见下文) ...
内容索引:脚本资源,jQuery,jsWindows,层拖动 基于jQuery的jsWindows弹出层窗口,可拖动、放大、缩小,jsWindows是一款仿Windows的窗口,jQuery版在此基础上进行了功能增强,比如加入了淡入淡出等,操作上感觉比纯...
8淡入淡出/滑动开关 9简单的折叠效果 10将两个 Div 设为相同高度 11在新窗口打开外部链接 12找到文本元素 13切换可视与隐藏的触发器 下面给大家介绍每个小技巧的具体含义。 1.回到顶部按钮 通过使用 jQuery 中的 ...