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语言家族 ...
随机推荐
- Java 微服务实践 - Spring Boot 系列
https://segmentfault.com/l/1500000009515571
- IIS发布以后,handle文件找不到,404错误
昨天碰到一个奇怪问题,开发环境没有问题,发布到IIS7.5以后,保存操作不能成功,跟踪发现,是handle方法找不到,抛错. 想了很多方法,最后把怀疑是GET方式和客户数据引起的问题,改成POST方式 ...
- python测试开发django-21.admin后台表名称和字段显示中文
前言 admin后台页面表名称(默认会多加一个s)和字段名称是直接显示在后台的,如果我们想设置成中文显示需加verbose_name和verbose_name_plural属性 verbose_nam ...
- jquery 带农历天干地支的日期选择控件
效果图:
- 《App,这样设计才好卖》
<App,这样设计才好卖> 基本信息 作者: (日)池田拓司 译者: 陈筱烟 丛书名: 图灵交互设计丛书 出版社:人民邮电出版社 ISBN:9787115359438 上架时间:2014- ...
- 分享到微信、微博、QQ空间、QQ微博
一:分享到微信 //分享到微信$("#weixin").bind("click", function () { var p = { url: ...
- cross validation笔记
preface:做实验少不了交叉验证,平时常用from sklearn.cross_validation import train_test_split,用train_test_split()函数将数 ...
- [转]MongoDB基本使用
转自 : http://www.cnblogs.com/TankMa/archive/2011/06/08/2074947.html 成功启动MongoDB后,再打开一个命令行窗口输入mongo,就可 ...
- [转]php的public、protected、private三种访问控制模式的区别
FROM : http://blog.163.com/weiwenjuan_bj/blog/static/14035033620129304183850/?suggestedreading publi ...
- NOI2015滚粗记
我的第一次也是最后一次NOI 好像写的晚了许多……可能一谈到退役总会有些伤感,并不愿去面对…… 一路走来已有5年,虽然我总在说“其实我好好学的时间只有半年”,但那也不过是给自己是蒟蒻找的借口吧...一 ...