步骤1.新建项目JqueryTrain
步骤2.在WebRoot下新建jslib文件夹，并将jquery类库导入进来
步骤3.新建html文件---JqueryWindow.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>窗口的淡入淡出</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- 引入css文件 -->
<link rel="stylesheet" type="text/css" href="css/win.css">
<!-- 引入js文件 -->
<script type="text/javascript" src="jslib/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jslib/jquerywin.js"></script>
</head>
<body>
<a onclick="showwin()" href="#">显示一个窗口</a>
<div id="win">
<div id="title">我是标题栏啊！<span onclick="hide()" id="close">X</span></div>
<div id="content">我是一个窗口哦！！！</div>
</div>
</body>
</html>
步骤4.在jslib下新建js文件---jquerywin.js
//显示浮动窗口的方法
function showwin(){
//alert("准备完成！！！");
//1.找到窗口对应的div节点
var winNode = $("#win");
//2.让div对应的窗口显示出来
//方法1，修改过节点的css值，让窗口显示出来
//winNode.css("display","block");
//方法2，利用jquery的show方法
//winNode.show("slow");
//方法3，利用jquery的fadeIn方法
winNode.fadeIn("slow");
}
//隐藏窗口的方法
function hide(){
//1,找到窗口对应的div节点
var winNode = $("#win");
//2,让div对应的窗口隐藏，对应上面的显示方法有3种隐藏方法
//方法1,修改css
//winNode.css("display","none");
//方法2,利用jquery的hide方法
//winNode.hide("slow");
//方法3,利用jquery的fadeOut方法
winNode.fadeOut("slow");
}
步骤5.在WebRoot下新建css文件夹，并新建css文件---win.css
/*id选择器*/
#win{
/*希望窗口有边框*/
border: 1px solid red;
/*希望窗口宽度和高度固定，不要太大*/
width: 300px;
height: 200px;
/*希望控制窗口的位置*/
position: absolute; /*绝对定位*/
top: 100px;
left: 350px;
/*希望窗口开始时不可见*/
display: none;
}
/*控制标题栏的样式*/
#title{
/*控制标题栏的背景色*/
background-color: blue;
/*控制标题栏中文字的颜色*/
color: yellow;
/*控制标题栏的左内边距*/
padding-left: 3px;
padding-top: 2px;
height: 25px;
}
/*控制内容栏的样式*/
#content{
padding-top: 10px;
padding-left: 10px;
}
/*控制隐藏按钮的样式*/
#close{
/*使关闭按钮向右侧移动*/
margin-left: 158px;
/*让鼠标进入时可以显示小手，告知用户可以点击操作*/
cursor: pointer;
}
然后测试运行http://localhost:8080/JqueryTrain/JqueryWindow.html看到效果即可！！！
分享到：
相关推荐
link href=”base.css” rel=”stylesheet” type=”text/css” /> <link href=”jquery.tooltip.less” rel=”stylesheet/less” type=”text/css”> [removed][removed] <script src=”//ajax....
内容索引:脚本资源,jQuery,弹出框 核心基于jQuery的渐变弹出框，弹出在网页的正中间，具有超炫淡入淡出效果，可以看到jQuery实在是非常强大，我们仅需少量的CSS和JavaScript代码即可完成这一效果。我们可以在这个...
13.6 实例四：图片淡入淡出 13.7 实例五：CSS实现PPT幻灯片 13.8 实例六：灯光效果 13.9 实例七：舞台灯光 13.10 实例八：探照灯 13.11 实例九：鼠标文字跟随 第14章 CSS与XML的...
13.6 实例四：图片淡入淡出 13.7 实例五：CSS实现PPT幻灯片 13.8 实例六：灯光效果 13.9 实例七：舞台灯光 13.10 实例八：探照灯 13.11 实例九：鼠标文字跟随 第14章 CSS与...
13.6 实例四：图片淡入淡出 13.7 实例五：CSS实现PPT幻灯片 13.8 实例六：灯光效果 13.9 实例七：舞台灯光 13.10 实例八：探照灯 13.11 实例九：鼠标文字跟随 第14章 CSS与XML的...
13.6 实例四：图片淡入淡出 13.7 实例五：CSS实现PPT幻灯片 13.8 实例六：灯光效果 13.9 实例七：舞台灯光 13.10 实例八：探照灯 13.11 实例九：鼠标文字跟随 第14章 CSS与XML的综合运用 14.1...
jquery+css五屏焦点图淡入淡出+圆形按钮切换广告图片代码 jQuery+CSS实用图片收缩与放大效果插件 jquery+div实现同时滑动切换的图文展示特效插件下载 jquery+div带动画按钮图片手动与自动切换的特效代码 jquery一页...
2. jquery+css五屏焦点图淡入淡出+圆形按钮切换广告图片代码 3. jQuery+CSS实用图片收缩与放大效果插件 4. jquery+div实现同时滑动切换的图文展示特效插件下载 5. jquery+div带动画按钮图片手动与自动切换的...
13.6 实例四：图片淡入淡出 13.7 实例五：CSS实现PPT幻灯片 13.8 实例六：灯光效果 13.9 实例七：舞台灯光 13.10 实例八：探照灯 13.11 实例九：鼠标文字跟随 第14章 CSS与XML的...
13.6 实例四：图片淡入淡出 13.7 实例五：CSS实现PPT幻灯片 13.8 实例六：灯光效果 13.9 实例七：舞台灯光 13.10 实例八：探照灯 13.11 实例九：鼠标文字跟随 第14章 CSS与XML的...
2.jquery+css五屏焦点图淡入淡出+圆形按钮切换广告图片代码 3.jQuery+CSS实用图片收缩与放大效果插件 4.jquery+div实现同时滑动切换的图文展示特效插件下载 5.jquery+div带动画按钮图片手动与自动切换的特效...
13.4.2 实现淡入/淡出渐变 13.4.3 集成JavaScript定时器 13.5 附加功能 13.5.1 插入额外提要 13.5.2 集成跳过和暂停功能 13.6 避免项目的限制 13.6.1 克服Mozilla的安全限制 13.6.2 修改应用的范围 13.7 重构 13.7.1...
2. jquery+css五屏焦点图淡入淡出+圆形按钮切换广告图片代码 3. jQuery+CSS实用图片收缩与放大效果插件 4. jquery+div实现同时滑动切换的图文展示特效插件下载 5. jquery+div带动画按钮图片手动与自动切换的特效...
13.6 实例四：图片淡入淡出 13.7 实例五：CSS实现PPT幻灯片 13.8 实例六：灯光效果 13.9 实例七：舞台灯光 13.10 实例八：探照灯 13.11 实例九：鼠标文字跟随 第14章 CSS与XML的...
2. jquery+css五屏焦点图淡入淡出+圆形按钮切换广告图片代码 3. jQuery+CSS实用图片收缩与放大效果插件 4. jquery+div实现同时滑动切换的图文展示特效插件下载 5. jquery+div带动画按钮图片手动与自动切换的特效...
网站具有图片轮播效果、鼠标对图片的进入和移出特效、点击小图放大图片特效、文字超链接、图片超链接、锚链接、菜单栏、景点预定须知、景点简介、交通指南、用户点评功能、div分块、CSS样式、下拉菜单、景点门票预订...
网站具有图片轮播效果、鼠标对图片的进入和移出特效、点击小图放大图片特效、文字超链接、图片超链接、锚链接、菜单栏、景点预定须知、景点简介、交通指南、用户点评功能、div分块、CSS样式、下拉菜单、景点门票预订...
一个不花哨的Js Ajax在线网页相册浏览特效，当鼠标点击左侧缩略图的时候，右侧的大图片淡出，下一张会淡入，这种动画切换方式也是比较经典的，相册的调用引用了一个image-slideshow-5.js封装文件，相册代码结构为DIV...
5.3 淡入淡出/135 5.3.1 fadeIn()与fadeOut()方法/135 5.3.2 fadeTo()方法/137 5.4 自定义动画/139 5.4.1 简单的动画/140 5.4.2 移动位置的动画/141 5.4.3 队列中的动画/144 5.4.4 动画停止和延时/146 5.5 ...