利用Jquery实现弹出窗口，并达到“淡入淡出”的效果

最新推荐文章于 2024-07-12 14:10:05 发布

wdh226

最新推荐文章于 2024-07-12 14:10:05 发布

阅读量2.2k

点赞数

分类专栏： Ajax 文章标签： jquery div myeclipse stylesheet javascript firefox

本文链接：https://blog.csdn.net/wdh226/article/details/5420921

版权

Ajax 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

了解Ajax的人都知道，Ajax中有许多专门开发Javascript的框架，比如近年来非常流行的prototype、Dojo、Ext、script.aculo.us、Moo Tools 、Jquery等等。
    　Jquery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。

　　JQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。      因此我推荐大家使用Jquery，使用简单，而且写的代码不用很多就可以实现非常强大的功能。下面提供的源代码是我用Jquery实现的一个——点击窗口实现窗口“淡入淡出”的效果。

首先提供myeclipse中的项目框架图：

说明：我使用的Jquery是Jquery 1.2.6，相关的Jquery.js文件大家可以从网上下载。

win.css代码如下：
@CHARSET "UTF-8";
/*id选择器*/
#win{

  /*希望窗口有框*/
  border: 1px red solid;
  /*希望窗口宽度和高度固定，不要太大*/

  width: 200;
  height: 150;

  /*希望控制窗口的位置*/
  position: absolute;
  top: 100px;
  left:200px;

  /*希望开始时窗口不可见*/
  display: none;
}

/*控制标题栏的样式*/
#title{
   /*控制标题栏的背景颜色*/
   background-color: silver;
   /*控制字体的颜色*/
   color: red;
   /*控制标题栏高度*/
   height: 25px;
}

/*控制文本内容的样式*/
#content{
   padding-left: 10px;
   padding-top: 10px;
}

/*控制关闭按钮的位置*/
#close{
/*控制关闭按钮的显示位置*/
margin-left: 104px;
   /*当用户进入后可以现在小手图标，提示用户可以操作*/
   cursor: pointer;
}

jquery-window.js代码如下：
//show the changing window
function showwin(){

//alert("good!!!");
//1.找到窗口对应的div节点
var winNode = $("#win");

//2.让div对应的窗口显示出来

//方法1：通过修改CSS中的display属性值为block
//winNode.css("display","block");

//方法2：利用Jquery的show()方法,慢慢出现
//winNode.show("slow");

//方法3：利用Jquery的fadeIn()方法，实现淡入
winNode.fadeIn("slow");
}

//将显示的窗口隐藏
function hide(){
   //1.获取窗口对应的节点
var winNode = $("#win");

   //2.隐藏窗口

   //方法1：修改CSS
// winNode.css("display","none");

   //方法2：利用Jquery的hide()方法
// winNode.hide("slow");

   //方法3：利用Jquery的fadeOut()方法，实现淡出
winNode.fadeOut("slow");
}

jquery-window.html的代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>jquery实例1：浮动窗口的实现</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">

    <script type="text/javascript" src="js/jquery-window.js"></script>
    <script type="text/javascript" src="js/Jquery.js"></script>

    <link rel="stylesheet" type="text/css" href="css/win.css">
  </head>

  <body>
    <h1>jquery实例1：浮动窗口的实现</h1><hr>
    <a οnclick="showwin()" href="#">显示浮动窗口</a>

    
    

    
    <div id="win">
       <div id="title">我是标题栏<span id="close" οnclick="hide()">X</span></div>
       <div id="content">欢迎查看弹出窗口效果的演示，呵呵呵呵呵呵呵！！！</div>
    </div>

  </body>
</html>

分别用firefox浏览器和IE7.0浏览器的测试结果如下：

firefox下面的截图效果是：

ie浏览器显示的效果如下：

说明：上面的2张截图只是弹出窗口的效果，关闭的时候也是慢慢的关闭，达到了“淡入淡出”的效果，非常的漂亮！

wdh226

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
利用Jquery实现弹出窗口，并达到“淡入淡出”的效果

了解Ajax的人都知道，Ajax中有许多专门开发Javascript的框架，比如近年来非常流行的prototype、Dojo、Ext、script.aculo.us、Moo Tools 、Jquery等等。　Jquery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。　　JQue
复制链接

扫一扫