2017-11-30 用js和jq来写网页上的窗帘效果

最新推荐文章于 2022-05-17 00:41:14 发布

iris w

最新推荐文章于 2022-05-17 00:41:14 发布

阅读量1.2k

点赞数

分类专栏：第一个月html css js jq

本文链接：https://blog.csdn.net/qq_39509597/article/details/78832061

版权

第一个月html css js jq 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

先贴效果：js和jq不是同时写的，所以图片不一样，但只需要看思路就可以了

JS写法

用到了定时器功能，先设置一个var值，以及一个定时器。

add方法为图片的height值为0px时，触发text(1);

sup则是height值为76px时，触发text(0);

下面是text方法。为1时到76px则清除定时器，自动跳转到sup方法。

为0时到0px则清除定时器，自动跳转到add方法。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
	
	<script type="text/javascript">
		var tm;//设置一个计算机编号
		setTimeout(add,10);

		function add(){
			var v = document.getElementById("abc");
			abc.style.height = "0px";
			tm = setInterval("text(1)",10);
		}
		
		function sup(){
			var v = document.getElementById("abc");
			abc.style.height = "76px";
			tm = setInterval("text(0)",10);
		}
		
		function text(type){
			var v = document.getElementById("abc");
			
			if(type == 1){
				v.style.height = parseInt(v.style.height)+1+"px";
				if(parseInt(v.style.height)>=76){
					clearInterval(tm);
					//这里插个时间延时功能；
					setTimeout(sup,2000);
				}  
			}else if(type == 0){
				v.style.height = parseInt(v.style.height)-1+"px";
				if(parseInt(v.style.height)<=0){
					clearInterval(tm);
					//这里插个时间延时功能；
					setTimeout(add,2000);
				}
			}
		}
	</script>
	
	<style type="text/css">
		#abc{
			margin-left: 200px;
			width: 981px;
			height: 0px;
			overflow: hidden;
		}
	</style>
	
</head>

<body>
	<div id="abc">
		<img src="../images2/banner.gif">
	</div>

</body>
</html>

JQ写法

用到了slidedown和slideup

这里只贴一个方法

$(function(){
	$("#chuanglian").slideDown(800,function(){
		$("#guanbi").click(function(){
			$("#chuanglian").slideUp(600);
		});
	});
});

这里是图片首先在0.8秒内下拉完成，触发右边的关闭事件，窗帘会在0.6秒内向上圈起至没有。

这里要记住要先导入一个jQuery文件

代码样式：<script src="jquery2.1.js"></script>

上面的关闭是为最上图的关闭按钮方法。

就这样，晚上继续补。

iris w

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
2017-11-30 用js和jq来写网页上的窗帘效果

先贴效果：js和jq不是同时写的，所以图片不一样，但只需要看思路就可以了JS写法无标题文档 var tm;//设置一个计算机编号 setTimeout(add,10); function add(){ var v = document.getElementById("abc"); abc.style.height =
复制链接

扫一扫