js小孩翻书动态实现效果

最新推荐文章于 2022-04-06 22:11:28 发布

Beiyux

最新推荐文章于 2022-04-06 22:11:28 发布

阅读量847

点赞数 1

分类专栏： Javascript 文章标签： javascript html html5

本文链接：https://blog.csdn.net/weixin_45745641/article/details/119936946

版权

Javascript 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

效果如图：

通过点击strat和stop两个按钮，实现动画的开始停止
在这里插入图片描述

代码如下

三张图片实现动画翻书效果

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
</head>
<body>
	
	<img src="girl_1.gif" alt="" id="img" />
	
	<input type="button" id="strat" value="strat" />
	<input type="button" id="stop" value="stop" />
	<script>
		//实例：小孩翻书
		
		var img=document.getElementById("img");
		var strat=document.getElementById("strat");
		var stop=document.getElementById("stop");
		var i=0;
		var timer;
		var flag=0;
		
		strat.onclick=function(){
			if(flag==0){
			timer=setInterval(function(){
				i++;
				if (i>4) {
					i=1;
					
				}
				img.src="girl_"+i+".gif";
			},200)
			flag=1;
			}
		}
		
		
		stop.onclick=function(){
			clearInterval(timer)
			flag=0;
		}
	</script>
	
</body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Beiyux

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
js小孩翻书动态实现效果

效果如图：通过点击strat和stop两个按钮，实现动画的开始停止代码如下三张图片实现动画翻书效果<!doctype html><html lang="en"><head> <meta charset="UTF-8" /> <title>Document</title></head><body> <img src="girl_1.gif" alt="" id="img" /&gt
复制链接

扫一扫