原生javascript实现的一个简单动画效果资源-CSDN文库

153 浏览量 2020-10-22 14:51:59 上传评论收藏 37KB PDF 举报

资源推荐

资源详情

资源评论

原生原生javascript实现的一个简单动画效果实现的一个简单动画效果

下面小编就为大家带来一篇原生javascript实现的一个简单动画效果。小编觉得挺不错的，现在分享给大家，也

给大家做个参考。一起跟随小编过来看看吧

本文章向大家介绍一个javascript实现的动画。点击开始按钮div会往右移动，点击停止后，div停止移动，再点击则继续移动。

请看下面代码。

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<head>

<title>javascript实现的简单动画</title>

<style type="text/css">

#mydiv

{

width:50px;

height:50px;

background-color:green;

position:absolute;

}

</style>

<script type="text/javascript">

window.onload=function()

{

var mydiv=document.getElementById("mydiv");

var start=document.getElementById("start");

var stopmove=document.getElementById("stopmove");

var x=0;

var flag;

function move()

{

x=x+1;

mydiv.style.left=x+"px";

}

start.onclick=function()

{

clearInterval(flag);

flag=setInterval(move,20);

}

stopmove.onclick=function()

{

clearInterval(flag);

}

}

</script>

<body>

<input type="button" id="start" value="开始运动" />

<input type="button" id="stopmove" value="停止运动" />

<div id="mydiv"></div>

</body>

</html>

代码解释：代码解释：

1.window.onload=function(){}，当文档内容完全加载完毕再去执行函数中的代码。

2.var mydiv=document.getElementById("mydiv")，获取id属性值为mydiv的元素。

3.var start=document.getElementById("start")，获取id属性hi为start的元素。

4.var stopmove=document.getElementById("stopmove")，获取id属性值为stopmove的元素。

5.mydiv.style.left=x+"px"，设置div的left属性值。

6.start.onclick=function(){}，为start元素注册onclick事件处理函数。

7.clearInterval(flag)，停止定时器函数，一方多次单击开始按钮造成叠加效果。

8.flag=setInterval(move,20)，开始运动。

以上这篇原生javascript实现的一个简单动画效果就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多

多支持我们。

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余0页未读，立即下载

内容反馈

weixin_38696176

粉丝: 6
资源: 919

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip