JavaScript(2)：JS实现小女孩行走
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了JavaScript(2)：JS实现小女孩行走，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2117字，纯文字阅读大概需要4分钟。
内容图文
JS实现小女孩行走
用JS实现小女孩行走，行走的过程实际上就是图片不断移动的过程，把多张图片组合在一起，利用人眼反应速度没有图片更换速度快的原理，实现了小女孩行走。
基本思路是小女孩从浏览器最左边开始出现，每个小女孩出现的高度位置是随机的，速度也是随机的。
实现起来并不难，但用到了js面向对象的思维，下面通过代码方式来分析小女孩行走。
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><style type="text/css">.girl {
position: absolute;/* 大小设置为小女孩的大小，不是整张图片的大小 */
width: 79px;
height: 108px;/* 设置整张背景图片 */
background-image: url(img/girl.png);/* 定位到小女孩从左往右走的图片 */
background-position: 0px -216px;
left: 0px;
top: 0px;}</style><body><div class="girl"></div></body></html><script type="text/javascript">function Girl() {//步子为0this.buzi = 0;//步长的随机1-10this.step = parseInt(Math.random() * 8 + 1);this.timer = null;//小女孩都是从最终版出现this.left = 0;this.dom = null;// 浏览器高度this.maxTop = (document.documentElement.clientHeight || document.body.clientHeight) - 108;//小女孩出现的高度this.top = parseInt(Math.random() * this.maxTop);this.dom = null;// 构造函数的调用方法this.init();//再调用行走的方法this.walk();}// 方法绑定到原型上面
Girl.prototype.init = function() {// 添加一个元素，并添加到页面this.dom = document.createElement('div');// 添加类名this.dom.className = 'girl';// 设置不同的top定位this.dom.style.top = this.top + 'px';// 添加到页面
document.body.appendChild(this.dom);}// 行走的方法
Girl.prototype.walk = function() {//桥接，这里的this赋值给一个变量var that = this;// 在定时器中用this是window，所以下把this保留下来，指向问题，每隔100毫秒走一步this.timer = setInterval(function() {//步子累加
that.buzi++;//验证
that.buzi = that.buzi > 7 ? 0 : that.buzi;
that.left += that.step;if (that.left > 1200) {
that.die();}// 设置当前元素的变化
that.dom.style.backgroundPositionX = -79 * that.buzi + "px";
that.dom.style.left = that.left + 'px';}, 100)}// 死亡的方法
Girl.prototype.die = function() {//停止定时器clearInterval(this.timer);//移除这个div
document.body.removeChild(this.dom)}//没隔500毫秒创建一个小女孩对象setInterval(function() {new Girl();}, 500)</script>效果：
内容总结
以上是互联网集市为您收集整理的JavaScript(2)：JS实现小女孩行走全部内容，希望文章能够帮你解决JavaScript(2)：JS实现小女孩行走所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】