Javascript 移动的海绵宝宝

效果描述：

做一个简单的动画效果，刚刷新页面时，SpongeBob在页面的左上角位置，随着时间推移，他匀速向右移动，直到右侧抵达页面右侧停下来。

分析：

SpongeBob作为一张图片被存放在<img>里面，<img>又被存放在<div>里面。

图片运动的本质：盒子的位移变化

只变化一次还不够，因此需要setInterval这个定时器

位移，读取时使用offsetLeft属性，赋值时使用style.left属性

注意：

1. 前者无单位，后者有

2. 只有对于具有定位属性的元素，left属性才有意义

即，存放图片的div元素必须要加

position: absolute;

当然relative也能动起来，但是一般是父元素相对定位，子元素绝对定位

停下来的本质：清除定时器

JS代码

    var div = document.querySelector('div');var inter = setInterval(callback,100);function callback(){if(div.offsetLeft>1500-div.clientWidth)clearInterval(inter);div.style.left = div.offsetLeft+10+'px';}

那么，如果海绵宝宝的朋友派大星，章鱼哥也来了，是不是每个海洋生物都要重写一次上面的代码？

这时候可以选择把动画效果封装成一个函数moveRight(obj,speed)，那个对象要移动，直接调用就可以了，参数1存放对象，参数2存放setInterval的间隔，值越大，移动速度越慢。

    function moveRight(obj,speed){var inter = setInterval(callback,speed);function callback(){if(obj.offsetLeft>1500-obj.clientWidth)clearInterval(inter);obj.style.left = obj.offsetLeft+10+'px';}    }moveRight(div,10);

但是如果每一次有一个新成员要移动，都要申请一个变量inter来存放定时器，会开辟大量的内存空间。这时候可以利用每个对象自带属性这个特征，来命名各自的定时器，即将var inter 改成obj.inter

    function moveRight(obj,speed){obj.inter = setInterval(callback,speed);function callback(){if(obj.offsetLeft>1500-obj.clientWidth)clearInterval(obj.inter);obj.style.left = obj.offsetLeft+10+'px';}    }

现在再回头来开，一刷新页面元素就开始移动是很奇怪的。也就是说动画一般都会有一个触发事件。问题来了，如果某个元素的触发时间多次发生，岂不是开启了多个定时器？

答案是肯定的，对于这里封装的动画函数来说，开启多个定时器直接造成的结果就是海洋生物会移动得非常之快。如何解决？

其实只要保证定时器的唯一性即可，可以在函数的开头加上这么一句

clearInterval(obj.timer);

Javascript 移动的海绵宝宝相关推荐

JavaScript 慢慢移动的海绵宝宝
前情提要:Javascript 移动的海绵宝宝这个海绵宝宝是匀速运动.突然停下来的,有点不合理.现实中我们跑步都是速度慢慢减小到0. 要实现这个效果,就必须速度逐渐减小,本质上是盒子的步长逐渐减小. ...
web期末作业设计网页：动漫网站设计——海绵宝宝(6页) HTML+CSS+JavaScript 学生DW网页设计作业成品动漫网页设计作业 web网页设计与开发 html实训大作业
常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 游戏. ...
HTML学生个人网站作业设计：动漫网站设计——海绵宝宝(5页) HTML+CSS+JavaScript 简单DIV布局个人介绍网页模板代码 DW学生个人网站制作成品下载
一.作品介绍 1.作品简介 :html期末大作业,dw学生网页设计作业, A+水平 ,喜欢的可以下载,文章页支持手机PC响应式布局. 2.作品编辑:作品下载后可使用任意HTML编辑软件(如:Dream ...
JavaScript 面向对象编程（三） —— 函数进阶 / 严格模式 / 高阶函数 / 闭包 / 浅拷贝和深拷贝
本篇为 JavaScript 进阶 ES6 系列笔记第三篇,将陆续更新后续内容.参考:JavaScript 进阶面向对象 ES6 :ECMAScript 6 入门系列笔记: JavaScript 面 ...
基于JavaScript的问卷调查系统
文章目录 1.题目要求 2.项目流程介绍 3.项目源码 3.1.html源码 3.2.css代码 3.3.部分js代码 1.题目要求要求: 1.设计一份调查问卷,问卷分为单选题和多选题: 2.问卷答 ...
【AJAX】JavaScript的面向对象
Ajax中后端数据返回后需要前端通过JavaScript来实现动态数据更新的问题.所以,在Ajax中加深了一遍JavaScript面向对象的印象. 基础部分: JavaScript中创建对象并简单对象 ...
【JavaScript总结】JavaScript语法基础：JS高级语法
作用域链: 1.JS中只有函数能够限定作用域的范围: 2.变量处理在制定的函数范围内,还有一个特殊的作用域,就是没有用var 声明的全局作用域 3.js中的作用域链是为了清晰的表示出所有变量的作用范围 ...
【JavaScript总结】JavaScript语法基础：DOM
->DOM的理解:文档对应dom树 ->有了DOM能做什么:DOM的操作 html文档做为DOM树模型,DOM树的节点就是对象.对象会触发事件来执行一些事件代码. C#中的事件是一个委托变 ...
【JavaScript总结】JavaScript语法基础：JS编码
运算符数学:+. -. *. / 逻辑:>. < .>= .<=. == . !=.&&.|| . === .!==(完全等于) 对象相关 new delet ...

Javascript 移动的海绵宝宝

Javascript 移动的海绵宝宝相关推荐

最新文章

热门文章