【实例】使用jquery自带的slideToggle由上到下缓缓加载图片

最新推荐文章于 2023-03-05 09:00:00 发布

_Slience_

最新推荐文章于 2023-03-05 09:00:00 发布

阅读量1.7w

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/u010513756/article/details/47291669

版权

Web前端专栏收录该内容

94 篇文章 1 订阅

订阅专栏

引出

上一篇博文是使用canvas逐条输出像素来实现从上到下缓缓输出图片，今天睡了一晚，想起以前学jquery的时候原版的库中就有显示和隐藏的方法。而且相当于canvas显示图片，jquery是相对简单的。只需要提前下好jquery就行

实现

在线演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="myCanvas"></div>
		<input type="button" οnclick="show()" value="显示/影藏" />
	</body>
	<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
	<script type="text/javascript">
	window.onload = function() {
		var myCanvas = $("#myCanvas");
		myCanvas.css("width", "400px");
		myCanvas.css("height", "400px");
		myCanvas.css("background", "red");
		myCanvas.css("display", "none");
		myCanvas.slideDown("slow");
	}
	function show() {
		var myCanvas = $("#myCanvas");
		myCanvas.slideToggle("slow");
	}
	</script>
</html>