转行学开发,代码100天——2018-04-25

今天继续学习JavaScript的运动实现——多物体运动框架的介绍及其应用。

首先来看一个简单的例子。如下图,要使图中3个红色盒子实现鼠标移入变宽,移出缩回的动作。

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
    <style type="text/css">
div{
width: 100px;
height: 20px;
background-color: red;
margin-top: 10px;
}
</style>
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementsByTagName("div");
for (var i = 0; i < oDiv.length; i++) {
oDiv[i].onmouseover = function(){
startMove(this,400);
}
oDiv[i].onmouseout = function(){
startMove(this,30);
}
}
}; //多物体运动框架
var timer = null;
function startMove(obj,iTarget)
{
clearInterval(timer);
timer = setInterval(function(){
var speed = (iTarget-obj.offsetWidth)/6;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
if(obj.offsetWidth ==iTarget){ clearInterval(timer);
}else{
obj.style.width = obj.offsetWidth+speed+"px";
}
},300);
}
</script>

可以看到,我们期望通过一个函数startMove函数实现鼠标的移入移出事件,同时给三个盒子添加这种效果。

但稍微留意,发现这里明显存在一个问题,即当鼠标快速在三个盒子上移动时,鼠标离开的盒子宽度并不会缩小到指定值,而是停留在某一位置。

这种效果显然不是我们期待的效果。那....哪里出错了呢?

查看startMove函数,发现这种基本逻辑并没有什么问题,但是将这个函数同时应用与多个物体,就出了问题。

原来是因为多物体共用一个定时器的原因。

于是将公有定时器取消,将每个物体分配一个定时器,简单地说就是给每个物体添加一个定时器属性,修改如下:

//多物体运动框架
// var timer = null;
function startMove(obj,iTarget)
{
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var speed = (iTarget-obj.offsetWidth)/6;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
if(obj.offsetWidth ==iTarget){ clearInterval(obj.timer);
}else{
obj.style.width = obj.offsetWidth+speed+"px";
}
},300);
}

如此,便不会出现上述问题了。

     

很好,“各回各家,各找各妈”,互不干扰。

至此,一个多物体运动的框架也基本形成了。

上述的示例是通过对公有定时器变量私有化,即对多物体对象添加定时器属性的方式,实现多物体调用同一函数时互不相扰。(生活中类似的例子也很常见,比如两个小孩同时喜欢一个玩具,一个想这样玩,另一个想那样玩,两人互不相让最终。。。。所以,给他们一人一个玩具,各玩各的,就会和谐很多~~)。

见到了定时器变量不能公有化使用的例子,如果是修改其他变量呢?

不妨对样式透明度属性值修改来看看究竟。

如下4个红盒子,当鼠标移入移出时要求其透明度变化,实现淡入淡出的效果。

<script type="text/javascript">
window.onload = function(){ var oDiv = document.getElementsByTagName("div");
for (var i = 0; i < oDiv.length; i++) {
oDiv[i].onmouseover = function(){
console.log("mouseover");
startMove(this,100);
}
oDiv[i].onmouseout = function(){
console.log("mouseout");
startMove(this,30);
}
} // 渐变函数
var alpha =30;
function startMove(obj,iTarget){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var speed =(iTarget-alpha)/6;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
if (alpha ==iTarget) {
clearInterval(obj.timer);
}else{
alpha+=speed;
obj.style.filter ="alpha(opacity:"+alpha+")";
obj.style.opacity = alpha/100;
}
},100);
}
}; </script>

这段代码中,先将定时器私有化,但是在移动鼠标时,方盒的颜色变化并不理想。

这...难道alpha变量也不能共用?

是的,在多物体运动中避免使用公共变量。

多物体中避免使用公共变量。!!!

多物体中避免使用公共变量。!!!

多物体中避免使用公共变量。!!!

(重要的事情说三遍...)

简单的处理就是将变量私有化,即作为多物体对象的一个属性处理。

这样就不会出现之前的问题了。

总结一下:多物体运动中所有变量均不能共用。变量要作为物体的属性处理。

day40—JavaScript多物体运动框架的更多相关文章

  1. javascript链式运动框架案例

    javascript链式运动框架 任务描述: 当鼠标移入红色矩形时,该矩形宽度逐渐增加至400px,之后高度逐渐增加至400px; 当鼠标移出红色矩形时,该矩形高度逐渐减小至200px,之后宽度逐渐减 ...

  2. 多物体运动框架案例一:多个Div的宽度运动变化

    多物体运动框架,鼠标移入Div,此Div逐渐变宽,鼠标移出后,此Div逐渐缩短恢复原长度. <!doctype html> <html> <head> <ti ...

  3. javascript多物体运动案例:多物体淡入淡出

    javascript多物体运动案例:多物体淡入淡出 任务描述: 补充代码,当鼠标移入红色区域时,该区域透明度逐渐增加至不透明;当鼠标移出该红色区域时,该区域透明度逐渐恢复至初始程度. 效果图: < ...

  4. Javascript 链式运动框架——逐行分析代码,让你轻松了解运动的原理

    所谓链式运动,就是一环扣一环.我们的很多运动实际上来说指的就是分阶段的,第一个阶段动完,下个阶段开始动. 这个链式运动框架就是用来处理这些问题的. 我们先来看下之前的运动框架,以下是Javascrip ...

  5. Javascript 多物体运动——逐行分析代码,让你轻松了解运动的原理

    我们先来看下之前的运动的代码,是否支持多物体运动,会出现怎么样的问题. <style type="text/css"> div { width: 100px; heig ...

  6. Javascript 多物体运动1

    多物体运动 <!DOCTYPE html><html> <head>  <meta charset="UTF-8">  <ti ...

  7. js实现多物体运动框架并兼容各浏览器

    首先,我们须要知道在js中获取对象的宽度如offsetWidth等.可能会存在一些小小的bug.原因之中的一个在于offsetWidth只不过获取盒子模型中内容的部分宽度.并不包括内边距,边框和外边距 ...

  8. javascript学习之运动框架

    模仿新浪博客首页的,最新评论: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"&g ...

  9. Javascript之链式运动框架1

    第一部分:HTML内容: <script src="6-1.js"></script> <script> window.onload=funct ...

随机推荐

  1. linux中编写查看内存使用率的shell脚本,并以高亮颜色输出结果

    编辑脚本内容: #!/bin/bash MEMUSER=`free -m|grep -i mem|awk '{print $3/$2*100"%"}'` echo -e " ...

  2. python字典使用总结

    作者:python技术人 博客:https://www.cnblogs.com/lpdeboke 字典是另一种可变容器模型,且可存储任意类型对象. 字典的每个键值 key=>value 对用冒号 ...

  3. 广告URL

    讨厌的csdn 广告,百度搜索了一次,csdn cookie广告追了你好几年还有... 把下面的url 重定向127.0.0.1  ,只记录了百度广告,部分阿里的广告,其他还未记录 虽然也用Adblo ...

  4. 使用Kafka的一些简单介绍: 1集群 2原理 3 术语

    目录 第一节 Kafka 集群 Kafka 集群搭建 Kafka 集群快速搭建 第二节 集群管理工具 集群管理工具 集群 Issues 第三节 使用命令操纵集群 第四节 Kafka 术语说明 第五节 ...

  5. apache2.4 只允许合法域名访问网站 禁止使用ip、非法域名访问

    1.ip访问禁用ip访问 只能对应端口有效<VirtualHost *:80> ServerName xx.xx.xx.xx ServerAlias * <Location /> ...

  6. ubuntu下载地址

    http://mirrors.aliyun.com/ubuntu-releases/16.04/

  7. Sersync 上配置 Sersync 服务

    上面的工作做好之后呢,下面就开始正式配置我们的 Sersync 了! 我们在 Sersync 安装过程中所用到包均是从谷歌 Sersync 项目组取得的,地址: https://code.google ...

  8. 372-基于XC7VX690T的高速模拟信号、万兆光纤综合计算平台

    基于XC7VX690T的高速模拟信号.万兆光纤综合计算平台 一.板卡概述 基于V7的高性能PCIe信号处理板,板卡选用Xilinx 公司Virtex7系列FPGA XC7VX690T-2FFG1761 ...

  9. Codeforces Round #425 (Div. 2) - B

    题目链接:http://codeforces.com/contest/832/problem/B 题意:给定一个好字母集合(只有小写字母,除了这些外其余都是坏字母集合),给定一个匹配模式串, 模式串只 ...

  10. maven 常用插件 拷贝依赖 拷贝jar包 查看属性 环境变量

    1 maven编译后希望将生产的jar包拷贝到指定目录 在pom中配置maven插件 maven-antrun-plugin <build > <plugins> <pl ...