您的位置：首页 > Web前端 > JQuery

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

2015-08-05 10:38 615 查看

引出

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

实现

在线演示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="myCanvas"></div>
<input type="button" onclick="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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航