day38—JavaScript的运动基础-匀速运动
转行学开发,代码100天——2018-04-23
一、运动基础框架
JavaScript的运动可以广义理解为渐变效果,直接移动效果等,图网页上常见的“分享到”,banner,透明度变化等。其实现的基本方法就是利用前面学到的定时器。
通过学习,总结一下基本的运动实现——运动框架。
运动框架可以理解为实现元素运动的流程。比如让一个div盒子运动起来,即给其left样式加一个定时器即可。
<input type="button" value="开始运动" id="btn">
<div id="div1"></div>
<script type="text/javascript">
var timer =null;
window.onload = function () {
var speed =6;//设置移动速度
var oDiv = document.getElementById('div1');
var oBtn = document.getElementById('btn');
oBtn.onclick =function(){
clearInterval(timer); //运动前需要关闭其他所以定时器
timer = setInterval(function(){
if(oDiv.offsetLeft>300) { //在指定范围内移动
clearInterval(timer);
}else
oDiv.style.left = oDiv.offsetLeft+speed+"px";
},200);
}
}
</script>
注意:
1、实现运动时,往往要设置一个速度变量speed,用来控制物体的运动速度。
2、这里能实现在指定范围内的移动,但这里存在一个移动的问题,按照 距离= 速度x时间 ,往往不会恰好在指定位置停止。所以需要设置好停止条件。
3、如果在按钮事件—开始运动之时,连续点击"开始运动“,若没有关闭其他定时器,DIV盒子会越来越快,这就不符合设计要求了。所以在运动前需要添加
clearInterval(timer); 4、这种固定速度的运动方式可以成为匀速运动。
5、运动的实现,需要物体绝对定位。position:absolute;top:0;left0; 二、应用案例 2.1 网页“分享到”“反馈”等侧边栏效果。
当鼠标移动到“分享到”区域时,div盒子向左伸出,移开鼠标时,回到原位。
按照前面对运动框架的分析,我们同样需要写一个运动的框架,将其放置到鼠标onmouseover和onmouseout事件中。
CSS样式设置:
*{margin:;padding:;} #div1{width: 160px;height: 260px;background: #666;position: absolute;top: 200px;left: -160px;}
#div1 span{width: 20px;height: 60px;font-size:12px;color:#fff;background: blue;line-height:20px;position: absolute;left:160px; top: 120px;}
//右移
function startMove1(){
var odiv = document.getElementById("div1");
clearInterval(timer);
timer= setInterval(function(){
if (odiv.offsetLeft==0) {
clearInterval(timer);
}else
{
odiv.style.left = odiv.offsetLeft+10+"px";
}
},200);
}
//左移
function startMove2(){
var odiv = document.getElementById("div1");
clearInterval(timer);
timer= setInterval(function(){
if (odiv.offsetLeft==160) {
clearInterval(timer);
}else
{
odiv.style.left = odiv.offsetLeft-10+"px";
}
},200);
}
然后在鼠标事件中添加事件
var oDiv = document.getElementById("div1"); //鼠标移入
oDiv.onmouseover = function(){
startMove1();
};
//鼠标移出
oDiv.onmouseout = function(){
startMove2();
};
这样就实现了这个侧边栏的移出移进的动作。
但这并不意为着代码的结果,观察“左移”和“右移”的代码,高度相似,不同之处仅仅在于“偏移量”和“移动速度”。因此,可以考虑将这两种实现方式通过传参来进行优化。
增加参数1:iTarget 目标位置 ;参数2:speed 移动速度
var timer = null; //设置定时器变量
var speed = 10; //设置速度变量
function startMove(iTarget,speed){
var odiv = document.getElementById("div1");
clearInterval(timer);
timer= setInterval(function(){
if (odiv.offsetLeft==iTarget) {
clearInterval(timer);
}else
{
odiv.style.left = odiv.offsetLeft+speed+"px";
}
},200);
}
//鼠标移入
oDiv.onmouseover = function(){
// startMove1();
startMove(0,10);
};
//鼠标移出
oDiv.onmouseout = function(){
// startMove2();
startMove(-160,-10);
};
如此,既能满足基本的功能效果,又能大量优化代码。
哈哈~大功告成啦!
大功告成?NO,还可以继续优化。
上文中优化的代码,有两个参数,能否进一步精简呢?结合现实,能否通过基本的生活常识,推断出移动的速度呢?
答案是可以的,当目 前点位置-当前位置>0,则速度为正,前点位置-当前位置<0,则速度为父,如此我们可以根据这个基本判断,将速度参数省去。不妨一试。
window.onload =function(){
var oDiv = document.getElementById("div1"); //鼠标移入
oDiv.onmouseover = function(){
// startMove1();
// startMove(0,10);
startMove(0);
};
//鼠标移出
oDiv.onmouseout = function(){
// startMove2();
// startMove(-160,-10);
startMove(-160);
};
};
var timer = null; //设置定时器变量
var speed = 10; //设置速度变量
function startMove(iTarget,speed){
var odiv = document.getElementById("div1");
clearInterval(timer);
timer= setInterval(function(){
if (odiv.offsetLeft<iTarget) { //右移
speed=10;
}else
{
speed =-10;
} if (odiv.offsetLeft==iTarget) {
clearInterval(timer);
}else
{
odiv.style.left = odiv.offsetLeft+speed+"px";
}
},200);
}
这样一来,对代码已足够优化了,可以放心学习其他功能了。
2.2 图片的淡入淡出效果——透明度设置
图片的淡入淡出,即通过定时器设置物体的透明度值来体现,其实现过程与上述的侧边栏功能非常相似。
如:
上述div盒子,鼠标移入时,其透明度值越来越大(增大到最大值100),鼠标移出时,透明度值越来越小(回到初始值)
css实现过程:
<style type="text/css">
#div1{width: 300px;height: 300px; background: red;filter: alpha(opacity:30); opacity:0.3;}
</style>
JavaScript实现:
<script type="text/javascript">
window.onload = function(){
var odiv = document.getElementById("div1");
odiv.onmouseover = function(){
startMove(100);
}
odiv.onmouseout = function(){
startMove(30);
}
};
var timer =null;//定时器变量
var speed =0;
var alpha =30;//透明度变量
function startMove(iTargert){ var oDiv = document.getElementById("div1");
clearInterval(timer); timer = setInterval(function(){
if (alpha<iTargert) {
speed = 10;
}else
{
speed=-10;
}
if (alpha==iTargert) {
clearInterval(timer);
}else
{
alpha+=speed;//物体的透明度值的变化
//设置透明度样式
oDiv.style.filter = 'alpha(opacity:'+alpha+')';
oDiv.style.opacity = alpha/100;
}
},1000);
}
</script>
可以看出,上述的实现过程,增加了一个透明度值变量(因为无法直接获取透明度样式的值),通过设置该值的变化速度,来实现物体淡入淡出的效果,其实现原理与侧边栏效果基本一致,也就是所谓的运动框架不变。
总结:通过本次课程的学习,进一步了解定时器的应用,以及常见网页上的运动效果的实现过程。对于基本功能实现的代码,要注意代码的优化,尽量减少重复的代码编写,减少参数设置。此外,要学会通过变量的设置来对问题进行转化,也应认识到高级程序的编写终究落脚到对变量值的处理(老师说的,日后深刻体会吧....)。
day38—JavaScript的运动基础-匀速运动的更多相关文章
- Javascript运动基础
javascript的运动非常实用,通过控制需要运动块的实际距离与要到达的距离的关系,结合定时器来控制小方块的各种运动. 运动框架 <!DOCTYPE html><html>& ...
- Javascript 运动基础 01
JS运动基础 运动基础 让Div运动起来 速度——物体运动的快慢 运动中的Bug 不会停止 速度取某些值会无法停止 到达位置后再点击还会运动 重复点击速度加快 匀速运动 速度不变 <s ...
- JS运动---运动基础(匀速运动)
[一]运动基础 (2)基础运动案例 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
- 【repost】JavaScript完美运动框架的进阶之旅
运动框架的实现思路 运动,其实就是在一段时间内改变left.right.width.height.opactiy的值,到达目的地之后停止. 现在按照以下步骤来进行我们的运动框架的封装: 匀速运动. 缓 ...
- javascript动画效果之匀速运动(修订版)
在编写多块同时触发运动的时候,发现一个BUG, timer = setInterval(show, 30);本来show是一个自定义函数,当设为timer = setInterval(show(one ...
- 第八节 JS运动基础
运动基础 让Div运动起来 速度——物体运动的快慢 运动中的Bug 不会停止 速度取某些值会无法停止 到达位置后再点击还会运动 重复点击速度加快 匀速运动(速度不变) 运动框架及应用: 运动框架: 在 ...
- 学习blus老师js(6)--js运动基础
运动基础 一.匀速运动 运动框架 在开始运动时,关闭已有定时器 把运动和停止隔开(if/else) <!DOCTYPE HTML> <html> <head> &l ...
- JavaScript学习02 基础语法
JavaScript学习02 基础语法 JavaScript中很多基础内容和Java中大体上基本一样,所以不需要再单独重复讲了,包括: 各种算术运算符.比较运算符.逻辑运算符: if else语句.s ...
- 从头开始学JavaScript 笔记(一)——基础中的基础
原文:从头开始学JavaScript 笔记(一)--基础中的基础 概要:javascript的组成. 各个组成部分的作用 . 一.javascript的组成 javascript ECMASc ...
随机推荐
- [Luogu P3825] [NOI2017] 游戏 (2-SAT)
[Luogu P3825] [NOI2017] 游戏 (2-SAT) 题面 题面较长,略 分析 看到这些约束,应该想到这是类似2-SAT的问题.但是x地图很麻烦,因为k-SAT问题在k>2的时候 ...
- Python2和Python3中的rang()不同之点
知道在python中rang()是一个有序的列表,在使用过程发现,Python2和Python3中的rang()不同之点,下面讲述不同之点 1,Python2 rang()用法 ->> r ...
- Xilinx源语-------FDRE
1.源语---FDRE FDRE代表一个单D型触发器,含的有五个信号分别为: 数据(data,D).时钟使能(Clock enable,CE).时钟(Clock).同步复位(synchronous ...
- CIFAR-10 dataset 的下载与使用、转图片
基本信息 CIFAR-10 是一个包含60000张图片的数据集.其中每张照片为32*32的彩色照片,每个像素点包括RGB三个数值,数值范围 0 ~ 255. 所有照片分属10个不同的类别,分别是 'a ...
- 如何在Set集合中避免重复元素
文章翻译自 Avoiding near-duplicates in sets, 作者Paul Hudson @twostraws是一名优秀的Swifter. 这是我第一次翻译,可能有翻译不到位的地方, ...
- Tomcat 保存镜像实战操作( 目录挂载方法 )
查看数据保存的位置 docker inspect --format='{{.Mounts}}' mxg_tomcat 宿主机数据保存在 /usr/local/project , 将此路径数据备份在 b ...
- 2018-11-19-visualStudio-无法登陆
title author date CreateTime categories visualStudio 无法登陆 lindexi 2018-11-19 15:24:15 +0800 2018-2-1 ...
- hr员工数据分析(实战)
hr员工数据分析项目实战 (数据已脱敏) 背景说明 某公司最近公司发生多起重要员工意外离职.部分员工工作缺乏积极性等问题,受hr部门委托,开展数据分析工作. 经与hr部门沟通,确定以下需求: 制定数据 ...
- 记一次在mac上源码编译curl,使其支持NSS的过程
一.背景 在一次学习https原理的过程中,希望客户端指定特定的cipher suites来抓包分析SSL/TLS的握手过程,就想到了使用curl工具,而不是使用浏览器. 接下来使用man curl找 ...
- HTTP post get request 时遇到特殊字符 ! @ # $ % ^ & * ( )
HTTP post get request 时遇到特殊字符 ! @ # $ % ^ & * ( ) 使用对应的编码替代 例如: curl ftp://username:pass@word@ex ...