jquery效果窗口弹出案例

效果

①基本效果:show()、hide()、toggle()

②滑动 slideDown()、slideUp()、slideToggle()

划上:$("p").slideUp("slow");
划下:$("p").slideDown("slow");

$("p").slideToggle("slow");
用600毫秒缓慢的将段落滑上或滑下

③淡入淡出 fadeIn()、fadeOut()

$("p").fadeIn("slow");//先隐藏掉
$("p").fadeOut("slow");//在显示出来

④透明度 fadeTo()、

$("p").fadeTo("slow",0.66); //先隐藏掉
$("p").fadeTo("slow",0.22);//在显示出来

<!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/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>弹出窗口效果</title>

<style type="text/css">

 .window{

     width:250px;

     background-color:#d0def0;

     padding:2px;

     margin:5px;

     position:absolute;

     display:none;

     }

 .content{

     height:150px;

     background-color:#FFF;

     padding:2px;

     font-size:14px;

     overflow:auto;

     }

.title{

    padding:2px;

    color:#666;

    font-size:14px;}     

.title img{

    float:right;

    cursor:pointer;}

</style>

<script type="text/javascript" src="jquery.min.js"></script>

<script type="text/javascript">

//使用jquery加载事件

 $(document).ready(function (){

   //定一些变量

   //获得窗口的高度

     var windowHeight=$(window).height();

   //获得窗口的高度

      var windowWidth=$(window).width();

   //获得弹窗的高度

      var popHeight=$(".window").height();

   //获得弹窗的宽度

      var popWidth=$(".window").width();

    // function closeWindow(){

       //找到X号图片，加单击事件，并且关闭窗口

       $(".title img").click(function (){

           $(this).parent().parent().hide("slow");

           });

          //}

     //关闭窗口

    //closeWindow();

    //获取延迟时间

       var timeoutCenter;

   //定义弹出居中窗口的方法

    function popCenterWindow(){

          //获取滚动条滚动的高度

          var scrollTop=$(window).scrollTop();

           //获取滚动条滚动的宽度

          var scrollLeft=$(window).scrollLeft(); 

      clearTimeout(timeoutCenter);

       timeoutCenter=setTimeout(function(){

        var popY=(windowHeight-popHeight)/2+scrollTop;

        var popX=(windowWidth-popWidth)/2+scrollLeft;

        //设定窗口的位置

        //$("#center").css("top",popY).css("left",popX).show("slow");

        $("#center").animate({left:popX,top:popY},300).show("slow");

              },300);

        }    

    $("#btn_center").click(function (){

        popCenterWindow();

        //滚动是调用

         $(window).scroll(function (){

            popCenterWindow();

            });

        });    

    //获取延迟时间

       var timeoutLeft;

    //定义左下角的窗口效果

     function popLeftButtomWindow(){

         //获取延迟时间

            //获取滚动条滚动的高度

          var scrollTop=$(window).scrollTop();

           //获取滚动条滚动的宽度

          var scrollLeft=$(window).scrollLeft(); 

           clearTimeout(timeoutLeft);

           timeoutLeft=setTimeout(function(){

        //计算弹出窗口的左上角Y的偏移量

        var popY=windowHeight-popHeight+scrollTop-10;

        var popX=scrollLeft-10;

        //设定窗口的位置

        //$("#left").css("top",popY).css("left",popX).show("slow");

        $("#left").animate({left:popX,top:popY},300).show("slow");

              },300);

        }    

    //单击左下按钮出现

    $("#btn_left").click(function (){       

        //滚动是调用

         $(window).scroll(function (){

            popLeftButtomWindow();

            });

            popLeftButtomWindow();

        });    

     //获取延迟时间

       var timeoutRight;

     //定义右下角的窗口效果

     function popRightButtomWindow(){

            //获取滚动条滚动的高度

          var scrollTop=$(window).scrollTop();

           //获取滚动条滚动的宽度

          var scrollLeft=$(window).scrollLeft(); 

           clearTimeout(timeoutRight);

           timeoutRight=setTimeout(function(){

        //计算弹出窗口的左上角Y的偏移量

        var popY=windowHeight-popHeight+scrollTop-10;

        var popX=windowWidth-popWidth+scrollLeft-10;

        //设定窗口的位置

        //$("#right").css("top",popY).css("left",popX).show("slow");

        $("#right").animate({left:popX,top:popY},300).show("slow");

              },300);

        }    

    //单击时出现

    $("#btn_right").click(function (){

            $(window).scroll(function (){

             popRightButtomWindow();

            });

             popRightButtomWindow();

        });            

 });

</script>

</head>

<body>

  <br><br><br><br><br><br><br><br>

  <br><br><br><br><br><br><br><br>

  <br><br><br><br><br><br><br><br>

  <br><br><br><br><br><br><br><br>

  <br><br><br><br><br><br><br><br>

  <br><br><br><br><br><br><br><br>

  <br><br><br><br><br><br><br><br>

  <br><br><br><br><br><br><br><br>

   <input type="button" id="btn_center" value="弹出居中窗口">

  <input type="button" id="btn_left" value="弹出左下角窗口">

  <input type="button" id="btn_right" value="弹出右下角窗口">

 <div id="center" class="window">

    <div class="title"><img src="close.jpg">CSDN欢迎您!-居中窗口</div>

    <div class="content">3gput.com,都来吧</div>

 </div>

 <div id="left" class="window">

    <div class="title"><img src="close.jpg">CSDN欢迎您!-居左窗口</div>

    <div class="content">3gput.com,都来吧</div>

 </div>

 <div id="right" class="window">

    <div class="title"><img src="close.jpg">CSDN欢迎您!-居右窗口</div>

    <div class="content">3gput.com,都来吧</div>

 </div>

</body>

</html>

jquery效果窗口弹出案例的更多相关文章

基于jQuery向下弹出遮罩图片相册
今天给大家分享一款基于jQuery向下弹出遮罩图片相册.单击相册图片时,一个遮罩层从上到下动画出现.然后弹出显示图片.这款插件适用浏览器:IE8.360.FireFox.Chrome.Safari.O ...
CSS3/jQuery自己定义弹出窗体
简单演示一下,精简了演示效果和css样式文件,更利于在项目中的实际应用引入style.css index.js <!DOCTYPE HTML PUBLIC "-//W3C//DT ...
JS框架_(JQuery.js)Tooltip弹出式按钮插件
百度云盘传送门密码:7eh5 弹出式按钮效果 <!DOCTYPE html> <html > <head> <meta charset="UTF ...
仿酒仙网的一款jQuery侧栏弹出导航栏特效
仿酒仙网的一款jQuery侧栏弹出导航栏特效一款常用于商城左侧商品导航的jquery菜单导航特效. 非常不错的一款商品分类特效.大家可以拿去研究研究 . 注意:该特效还支持挨千刀的IE6啊,之强大. ...
jquery鼠标经过弹出层写法
jquery鼠标经过弹出层写法<pre><div class="navitem"><a href="/index.php?c=news&am ...
JavaScript动态实现div窗口弹出&消失功能
先积累一个JavaScript动态实现div窗口弹出&消失功能首先是index.jsp代码 <html> <head> <link rel="styl ...
Js(Jquery)实现的弹出窗口
想实现一个弹出层,过一段时间自动消失的功能. 之前的项目中是:在页面中预先先一个<div>区域,默认隐藏或者因为没有内容不显示.当需要显示信息时,将该<div>填充上内容,并用 ...
jQuery结合lhgdialog弹出窗口，关闭时出现没有权限错误
背景: 最近的项目,使用JQuery+lhgdialog窗口组件方式模拟弹窗,在关闭lhgdialog窗口时,出现以下错误: >jQuery没有权限 >调试时 w.readyState没有 ...
2016/4/2 json：js和jquery中轻量级数据交换格式例：窗口弹出 popwindow
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于ECMAScript的一个子集. JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族 ...

随机推荐

android 控件: xml 设置 Button 按下背景
本篇文章讲述了不使用java代码来改变 Button 按下和未按下时的背景. 首先准备两张图片, 分别是按钮按下和按钮未按下的. 在res/drawable 文件夹中创建一个button_select ...
sqlite数据库实现字符串查找的方法(instr,substring,charindex替代方案)
sqlite数据库是一款轻型的数据库,是遵守ACID的关联式数据库管理系统,资源占用低,执行效率高,可以跨平台使用,已被广泛使用.作为一款轻量级的数据库,功能自然会有所欠缺,比如数据库加密,用户权限设 ...
开源项目PullToRefresh详解（三）——PullToRefreshScrollView
和前几篇文章一样,这里还是先设置布局文件,然后找到这个控件.只不过这里要简单很多. 1.布局文件 <?xml version="1.0" encoding="utf ...
优化算法动画演示Alec Radford's animations for optimization algorithms
Alec Radford has created some great animations comparing optimization algorithms SGD, Momentum, NAG, ...
LRU和LFU的区别
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/guoweimelon/article/details/50855351 一.概念介绍 LRU和LFU ...
BMap：JavaScript API
ylbtech-Map-Baidu:JavaScript API JavaScript API百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口,可帮助您在网站中构 ...
Win2008建立域时administrator账户密码不符合要求
在win2008中建立域时,有时会出现administrator账户密码不符合要求的现象,报错会说明目前本地administrator账户不需要密码.这是什么原因造成的呢?原来,目前的2008镜像在网 ...
Linux awk 命令
AWK是一种处理文本文件的语言,是一个强大的文本分析工具. 之所以叫AWK是因为其取了三位创始人 Alfred Aho,Peter Weinberger, 和 Brian Kernighan 的Fam ...
[leetcode]Partition List @ Python
原题地址:https://oj.leetcode.com/problems/partition-list/ 题意: Given a linked list and a value x, partiti ...
如何查看Isilon节点的硬件信息？
Isilon节点虽然是一个Linux,但是很多linux下常用的命令都没有,比如说看内存的.笔者经过试验,列出了一些可用的命令. 查看硬件状态 isi_hw_status 查看内存 sysctl hw ...

jquery效果 窗口弹出案例

jquery效果 窗口弹出案例的更多相关文章

随机推荐

热门专题

jquery效果窗口弹出案例

jquery效果窗口弹出案例的更多相关文章