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

随机推荐

Virtualenv教程
虚拟环境简介 VirtualEnv用于在一台机器上创建多个独立的Python虚拟运行环境,多个Python环境相互独立,互不影响,它能够: 在没有权限的情况下安装新套件不同应用可以使用不同的套件版本 ...
阅读Linux内核源码时建立tags索引
比如在阅读arm架构的Linux内核代码时想建立arm架构相关的索引,可以使用下面的命令: make ARCH=arm tags
有关Delphi RTTI的一些文章
Delphi RTTI 资料 Delphi 的RTTI机制浅探 Delphi XE的RTTI增强,动态Hook某些内部事件
utf-8与utf-8(无BOM)的区别
BOM——Byte Order Mark,就是字节序标记在UCS 编码中有一个叫做"ZERO WIDTH NO-BREAK SPACE"的字符,它的编码是FEFF.而FFFE ...
future封装了callable，thread封装future。
三.使用Callable,Future返回结果总结:future封装了callable,thread封装future.将callable的返回结果封装在future中,thread封装future, ...
ArcGIS Engine Maplex Label（标注）使用一例（转)
/// <summary> /// MaplexEngine标注 /// </summary> /// <param name="pGeoFeatLyr&quo ...
将Excel中的数据批量导入数据库表
private boolean import_to_database(String excel_path) throws BiffException, IOException, HsException ...
数位dp（求1-n中数字1出现的个数）
题意:求1-n的n个数字中1出现的个数. 解法:数位dp,dp[pre][now][equa] 记录着第pre位为now,equa表示前边是否有降数字(即后边可不能够任意取,true为没降,true为 ...
星际之门SG1第一至十季/全集Stargate SG-1迅雷下载
英文译名 Stargate SG-1 (第一至十季) (1997-2008)Syfy.本季看点:<星际之门 SG-1>1997年起在美播出第一季,并于全球30多个国家播映,反应热烈,今年( ...
geth 命令
{ admin: { datadir: "/home/.ethereum/.ethereum", nodeInfo: { enode: "enode://a974839a ...

jquery效果 窗口弹出案例

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

随机推荐

热门专题

jquery效果窗口弹出案例

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