JQuery-滚动条下拉生成div和抽奖效果演示

最新推荐文章于 2025-02-01 14:35:30 发布

Tommy5553

最新推荐文章于 2025-02-01 14:35:30 发布

阅读量372

点赞数

分类专栏： JQuery

本文链接：https://blog.youkuaiyun.com/Tommy5553/article/details/89437847

版权

JQuery 专栏收录该内容

2 篇文章

订阅专栏

滚动条下拉生成div

<!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>05-可见性过滤选择器.html</title>
<!--   引入jQuery -->
<script src="../js/jquery-1.8.3.js" type="text/javascript"></script>
<script src="./script/assist.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="./css/style.css" />
<script type="text/javascript">
	$(document).ready(function() {
		for (var i = 0; i < 10; i++) {
			createDiv();
		}
	
		
		
		//浏览器添加滚动事件
		$(window).scroll(function() {
			//滚过的高度
			var wt = $(this).scrollTop();
			//整个文档的高度
			var dh = $(document).height();
			//窗口的高度
			var wh = $(this).height();
			
			//当接近底部时，添加新的div
			if(wt + wh + 100 > dh){
				createDiv();
				//发送ajax请求
			}
			
			//窗口提示
			$("#showDiv").html("wt:"+wt+","+"dh:"+dh+","+"wh"+wh);
		});
	});

	var num = 1;
	//创建一个div
	function createDiv() {
		var $div = $("<div class='newDiv' />");
		$div.html(num++);
		$("body").append($div);
	}
</script>

<style type="">
.newDiv {
	border: 1px solid #999;
	width: 400px;
	height: 100px;
	margin: 5px;
	font-size: 50px;
}

#showDiv {
	border: 1px solid #999;
	width: 500px;
	height: 50px;
	margin: 5px;
	font-size: 50px;
	position: fixed;
	bottom: 0;
	right:100px;
}
</style>

</head>
<body>
	<div id="showDiv"></div>
</body>
</html>

抽奖效果演示

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!-- 导入js库 ，注意：使用src属性之后，标签体中不能写入内容-->
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		for (var i = 0; i < 5; i++) {
			createDiv();
		}

		//定时器
		setInterval(showDiv, 1000);

	});
	var showDiv = function showDiv() {
		//第一个隐藏		
		$("div:first").slideUp(1000, function() {
			//回调函数，把这个div再添加到最后面
			$(this).appendTo("body").slideDown(1000);
		});
	}

	var num = 1;
	//创建一个div
	function createDiv() {
		var $div = $("<div class='newDiv' />");
		$div.html(num++);
		$("body").append($div);
	}
</script>

<style type="">
.newDiv {
	border: 1px solid #999;
	width: 400px;
	height: 100px;
	margin: 5px;
	font-size: 50px;
}

#showDiv {
	border: 1px solid #999;
	width: 500px;
	height: 50px;
	margin: 5px;
	font-size: 50px;
	position: fixed;
	bottom: 0;
	right: 100px;
}
</style>

</head>
<body>
</body>
</html>