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

随机推荐

我所经历的SAP选型[转]
这是一个失败的选型项目,而且在可遇见的未来公司也不会再经历SAP选型,甚至不会再启动erp项目,个中原因很难一言道尽,在此简要的说说我们的选型过程以及在选型过程中对各种因素的考虑. 一.重启选型工作七 ...
excel 单元格内容太多，替换有问题
excel 单元格内容太多,替换有问题
DotNetty的通道处理细节
第一,客户端如何向服务器主动发送消息: 第二,服务器如何向指定客户端发送消息: 第三,在哪里做报文的拆包和组包. public partial class FrmMain : Form { publi ...
安全：CSRF
原文地址:http://baike.baidu.com/view/1609487.htm?fr=aladdin. 攻击通过在授权用户访问的页面中包含链接或者脚本的方式工作.例如:一个网站用户Bob可能 ...
禁止tomcat生成catalina.out、localhost_access_log、host-manager.log、localhost.log、manager.log这些文件
1.找到tomcat目录conf,logging.properties把这个文件重命名(推荐:也可以根据自己的需要更改里面的配置文件) 其实删掉也可以但是不建义这样就不会生成host-manager ...
docker查看容器的网络ip
docker inspect -f '{{range .NetworkSettings.Networks}}{{.IPAddress}}{{end}}' container_name_or_id 可直 ...
algid parse error, not a sequence错误
主要使用由于没有对使用openssl生成的公私密钥对进行pkcs8编码,导致程序无法识别参考支付宝.项目用用到RSA加密用openssl生成了一个公私密钥对,在对加密字符串进行数字签名的时候,程序一直 ...
用wifi来调试应用程序
我们一般调试程序都是用的adb,这个adb其实是可以连接到某个端口的,只要我们的手机和电脑处于同一wifi环境下(你可以用电脑分出来的wifi),手机也接入同一端口就可以实现程序的无线调试了,终于可以 ...
《“胡”说IC——菜鸟工程师完美进阶》
<“胡”说IC——菜鸟工程师完美进阶> 基本信息作者: 胡运旺出版社:电子工业出版社 ISBN:9787121229107 上架时间:2014-5-15 出版日期:2014 年5月开 ...
<A>标签电子邮件链接
电子邮件链接 – 要链接电子邮件,可在链接标签中插入” mailto:邮箱地址” <A href="mailto:webmaster@sohu.com"> 站长信箱 & ...

jquery效果 窗口弹出案例

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

随机推荐

热门专题

jquery效果窗口弹出案例

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