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语言家族 ...

随机推荐

WCF中修改接口或方法名称而不影响客户端程序
本篇接着"从Web Service和Remoting Service引出WCF服务"中有关WCF的部分. 运行宿主应用程序. 运行Web客户端中的网页. 输入内容,点击按钮,能获取 ...
JavaScript进阶系列06,事件委托
在"JavaScript进阶系列05,事件的执行时机, 使用addEventListener为元素同时注册多个事件,事件参数"中已经有了一个跨浏览器的事件处理机制.现在需要使用这个 ...
DELPHI NEXTGEN编译开关
DELPHI NEXTGEN编译开关 {$IFDEF NEXTGEN} UTF8String = type _AnsiString(65001); RawByteString = type _Ansi ...
如何修改Mac截屏保存路径
MAC OS X系统默认的截图路径是桌面文件夹,默认的截图格式是 PNG 图片格式,如何自定义设置呢? 截图保存路径打开终端(Terminal)并输入如下命令: defaults write com ...
JavaScript：动态代理之远程代理
背景 2008 第一次使用 AJAX 的时候好像使用的是 AJAX.NET,该组件支持为服务器 C# 类型提供 JS 代理,当时不是十分的明白.设计模式中有代理模式,不过真正需要我们手工写代理的次数却 ...
Swift - UITableView展开缩放动画
Swift - UITableView展开缩放动画效果源码 https://github.com/YouXianMing/Swift-Animations // // HeaderViewTapA ...
护士当家第一至七季/全集Nurse Jackie迅雷下载
英文译名Nurse Jackie,第1-7季(2009-2015)Showtime. 本季看点:<护士当家>是一部黑色医务剧,该剧特别邀请到荣获艾美奖和金球奖的Edie Falco出演女主 ...
理解Java ThreadLocal
ThreadLocal是什么早在JDK 1.2的版本中就提供Java.lang.ThreadLocal,ThreadLocal为解决多线程程序的并发问题提供了一种新的思路.使用这个工具类可以很简洁地 ...
logistic回归算法及其matlib实现
一般来说,回归不用在分类问题上,因为回归是连续型模型,而且受噪声影响比较大.如果非要使用回归算法,可以使用logistic回归. logistic回归本质上是线性回归,只是在特征到结果的映射中多加入了 ...
AndroidManifest.xml文件解析(转帖)
原帖地址:http://www.cnblogs.com/pilang/archive/2011/04/20/2022932.html 一.关于AndroidManifest.xml And ...

jquery效果 窗口弹出案例

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

随机推荐

热门专题

jquery效果窗口弹出案例

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