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

随机推荐

ajax jquery 异步表单验证
文件目录: html代码: <html> <head> <title>异步表单验证</title> <script type='text/java ...
Java Calendar,Date,DateFormat,TimeZone,Locale等时间相关内容的认知和使用(1) Calendar
Java 操作日期/时间,往往会涉及到Calendar,Date,DateFormat这些类. 最近决定把这些内容系统的整理一下,这样以后使用的时候,会更得心应手.本章的内容是主要讲解“Java时间框 ...
动态规划经典问题Java实现
动态规划问题Java实现如果我们有面值为1元.3元和5元的硬币若干枚,如何用最少的硬币凑够11元? public class DPProblem { public static void main( ...
Java比较两个Date日期的大小
import java.util.*; import java.text.ParseException; import java.text.SimpleDateFormat; class Test{ ...
[Android P] Android P版本新功能介绍和兼容性处理（一）
cp from :https://blog.csdn.net/yi_master/article/details/80046696 Android P版本已经到来,首篇我们当然要先看下Android ...
[Android Security] 反编译常用工具
copy : https://down.52pojie.cn/Tools/Disassemblers/
Java反编译工具Jad详解
做项目过程中需要反编译一个jar包,于是作了一些学习,记录下来. Jad(JAva Decompiler)是一个Java的反编译器,可以通过命令行把Java的class文件反编译成源代码. 如果你在使 ...
[转]MySQL导入.sql文件及常用命令
From : http://blog.csdn.net/muziduoxi/article/details/6091202 在MySQL Qurey Brower中直接导入*.sql脚本,是不能一 ...
POJ训练计划2528_Mayor's posters(线段树/成段更新+离散化)
解题报告 id=2528">地址传送门题意: 一些海报,覆盖上去后还能看到几张. 思路: 第一道离散化的题. 离散化的意思就是区间压缩然后映射. 给你这么几个区间[1,300000] ...
C#多线程写日志
由于程序是3层架构的,所有多线程记录日志成了比较棘手的问题,以前还真就没有在意过写日志的问题,认为不过是写文件罢了~~!如今发现原来要实现文件共享,并且能够使多线程同时操作日志还不能相互冲突,真的很麻 ...

jquery效果 窗口弹出案例

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

随机推荐

热门专题

jquery效果窗口弹出案例

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