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效果窗口弹出案例相关推荐

html弧形列表效果,jQuery效果弧形弹出菜单
/p> < 前端开发职描述及岗位: body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, ...
html5鼠标点击弹出层,jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
本文实例讲述了jQuery实现单击弹出Div层窗口效果.分享给大家供大家参考.具体如下: 这是一款jquery实现的可拖动可关闭的弹出框效果,网上已经有很多类似效果了,网页上实现这种效果其实并不难,现 ...
php jquery ajax登录,jQuery+Ajax+PHP弹出层异步登录效果(附源码下载)
弹出层主要用于展示丰富的页面信息,还有一个更好的应用是弹出表单层丰富交互应用.常见的应用有弹出登录表单层,用户提交登录信息,后台验证登录成功后,弹出层消失,主页面局部刷新用户信息.本文我们将给大家介绍 ...
android 气球菜单,jQuery实现气球弹出框式的侧边导航菜单效果
本文实例讲述了jQuery实现气球弹出框式的侧边导航菜单效果.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的气球弹出框式的侧边导航菜单,预览效果时左下角会提示错误,而且看不到效果,刷 ...
jquery点击弹出播放视频并显示遮罩层
最近在做视频播放的时候,发现用jquery的播放视频可以很好的实现我所需要的效果.在之前请把插件引用进来,废话不多说,代码如下: <!DOCTYPE html> <html>& ...
php 弹窗代码大全,PHP_asp.net弹出窗口代码大全，//关闭,父窗口弹出对话框,子窗 - phpStudy...
asp.net弹出窗口代码大全 //关闭,父窗口弹出对话框,子窗口直接关闭 this.Response.Write(""); //关闭,父窗口和子窗口都不弹出对话框,直接关闭 th ...
html正方形对话框素材,10种展示效果的弹出层对话框插件method.js
一款10种展示效果的弹出层对话框插件method.js,可以点击演示页面的10个按钮分别查看不同的弹窗效果,基本上该有的弹窗特效都有了,喜欢的童鞋请收下吧. 查看演示下载资源: 68 次下载资源 ...
基于jQuery向下弹出遮罩图片相册
今天给大家分享一款基于jQuery向下弹出遮罩图片相册.单击相册图片时,一个遮罩层从上到下动画出现.然后弹出显示图片.这款插件适用浏览器:IE8.360.FireFox.Chrome.Safari.O ...
js控制浏览器窗口弹出、警告框、确认框
描述 js控制浏览器窗口弹出.警告框.确认框代码 function fun1(){alert("喜欢我"); }function fun2(){var bo = confirm( ...

jquery效果窗口弹出案例

jquery效果窗口弹出案例相关推荐

最新文章

热门文章

jquery效果 窗口弹出案例

jquery效果 窗口弹出案例相关推荐

最新文章

热门文章

jquery效果窗口弹出案例

jquery效果窗口弹出案例相关推荐