jquery实现居中、左下角、右下角窗口效果

原创 2012年03月27日 21:07:25

jquery_windows.html文件

<!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>
<link type="text/css" rel="stylesheet" href="css.css">
<script src="../../jquery/jquery-1.7.1.js"></script>
<script src="window.js"></script>
<script>
$(document).ready(function (){
//利用toggle方法实现显示和隐藏
$('#btn_center').click(function (){

	$(window).scroll(function (){
		popCenterWindow();
			});
	});
	
$('#btn_left').click(function (){
	$(window).scroll(function (){
		popLeftButtomWindow();
			});
	});
$('#btn_right').click(function (){
	$(window).scroll(function (){
		popRightButtomWindow();
		});
		
	});

});
</script>

</head>

<body>
<input type="button" value="弹出中间窗口" id="btn_center"/>
<input type="button" value="弹出居左下角窗口" id="btn_left"/>
<input type="button" value="弹出居右下角窗口" id="btn_right"/>
<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>
<div id="center" class="window">
        <div class="title">csdn欢迎你<img width="15px" height="15px" src="../../images/clone.png"></div>
        <div class="content">费水电费水电费你</div>
</div>
<div  id="left" class="window">
        <div class="title">csdn欢迎你<img width="15px" height="15px" src="../../images/clone.png"></div>
        <div class="content">费水电费水电费你</div>
</div>
<div  id="right" class="window">
        <div class="title">csdn欢迎你<img width="15px" height="15px" src="../../images/clone.png"></div>
        <div class="content">费水电费水电费你</div>
</div>
</body>
</html>

window.js文件

// JavaScript Document

//定义一些变量
//获取窗口的高度
var windowHeight;
//获得窗口的宽度
var windowWidth;
//获得弹窗的高度
var popHeight;
//获得弹窗的宽度
var popWidth;
//获取滚动条的高度
var scrollTop;
var scrollLeft;
//延迟时间
var timeout;
function init(){

 windowHeight=$(window).height();

 windowWidth=$(window).width();

 popHeight=$(".window").height();

 popWidth=$(".window").width();

 scrollTop=$(window).scrollTop();
 scrollLeft=$(window).scrollLeft();
}

//关闭窗口的方法
function closeWindow(){
	//根据div找到x号的图片,加单击事件,并且关闭窗口
	$('.title img').click(function (){
		$(this).parent().parent().hide('slow');
		});
	
	}


//定义弹出居中窗口的方法
function popCenterWindow(){
    clearTimeout(timeout);
	timeout=setTimeout(function (){
	init();
	//计算弹出窗口的左上角y的偏移量
	var popY=(windowHeight-popHeight)/2+scrollTop;
	var popX=(windowWidth-popWidth)/2+scrollLeft;
	//设定窗口的位置
	$('#center').animate({top:popY,left:popX},300).show('slow');
	},300);
	//调用关闭窗口
	closeWindow();
	
	}
//定义弹出左下角的效果
function popLeftButtomWindow(){
	clearTimeout(timeout);
	timeout=setTimeout(function (){
	//首先要初始化参数
	init();
	var popY=(windowHeight+scrollTop-popHeight);
	var popX=scrollLeft;
	//设定窗口的位置
	$('#left').animate({top:popY,left:popX},300).show('slow');
	},300);
	//调用关闭窗口
	closeWindow();

	}


//定义弹出右下角窗口的效果
function popRightButtomWindow(){
	//先清空上一次延迟
	clearTimeout(timeout);
	timeout=setTimeout(function (){
	//首先要初始化参数
	init();
	var popY=windowHeight+scrollTop-popHeight-10;
	var popX=windowWidth+scrollLeft-popWidth-10;
	//设定窗口的位置
	//$('#center').css('top',popY).css('left',popX).show('slow');
	
	$('#right').animate({top:popY,left:popX},300).show('slow');
		},300);
	//调用关闭窗口
	closeWindow();

	}


css.css文件

@charset "utf-8";
/* CSS Document */

.window{
	width:250px;
	background-color:#6FF;
	padding:2px;
	margin:5px;
	position:absolute;
	display:none;}
.content{
		height:150px;
		background-color:#FFF;
		padding:2px;
		overflow:auto;
		}
.title{
	padding:2px;
	color:#699;
	font-size:14px;
	}
.title img{
	cursor:pointer;
	float:right;
	}


 


 

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

jQuery实现弹出居、右下角、左下角窗口效果(一)

今天给大家带来的是,实用jQuery技术实现各种弹窗效果,比如弹出指定位置的窗口(左下角、右下角、居中...)等,尤其是弹出右下角窗口特别实用,如果能够跟随滚动条一起滚动,那就非常good了!一些企业...

[原创+源码]jQuery实现弹出居、右下角、左下角窗口效果(二)

[原创+源码]jQuery实现弹出居、右下角、左下角窗口效果(二)     接上文,[原创+源码]jQuery实现弹出居、右下角、左下角窗口效果(一)我们先来看看怎么实现弹出居中窗口,弹出居中窗口主要...

[原创+源码]jQuery实现弹出居、右下角、左下角窗口效果(一)

感谢这些天一直支持我的朋友们,也有很多朋友在QQ上给我留言,表达了他们看后我的文章后自己的一点想法,也希望更多的朋友和我一起交流,一起学习。也对支持我的原创论坛的朋友们表示衷心的感谢,我也会一如既往的...

jQuery实现弹出居、右下角、左下角窗口效果(二)

[原创+源码]jQuery实现弹出居、右下角、左下角窗口效果(二)     接上文,[原创+源码]jQuery实现弹出居、右下角、左下角窗口效果(一)我们先来看看怎么实现弹出居中窗口,弹出居中窗口主要...

基于jQuery实现的右下角消息提示框MsgBox

最近对右下角的消息提示框进行了封装,有需要的可以拿来看看效果如何。下面开始贴上代码,并且进行必要的说明。 首先是css样式,如下所示 ._f_r { z-index: 1050; positi...

jQuery实现在右下角弹出提示框

用jQuery实现这个功能其实非常简单,网上的例子太多太多了。不过,那些例子一般没有涉及到后台往前台传值的问题。在本文中这个问题会得到解决。 在实际应用中,提示框都是自动弹出的,因此,jQuery函数...

html+css+jquery实现右下角返回顶部功能

html+css+jquery实现返回顶部功能

Jquery实现网页右下角弹窗

用Jquery的$.fn.extend()做了小弹窗插件,可惜还不能很好在IE6上工作。。。下面是demo的几个文件,IE6上的工作就交给ie6_tipWindow.js了,有些兼容性问题没弄好,哎,...

实现右下角弹出渐隐渐现提示小窗口 附带 源码及效果图

package advancedJavaLearning; import java.awt.Toolkit; import java.awt.event.WindowAdapter; import j...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)