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 ...
随机推荐
- 《深入浅出WPF》学习总结之XAML标签语言二
x名称空间 “x名称空间”的这个X是映射XML名称空间时给他取的名字(如果用的是字母y,那他就叫“y名称空间了”),x名称空间里的成员(x.name.x.class)是专门给XAML编译器看的.用来引 ...
- spring-第十五篇之AOP面向切面编程之AspectJ框架简单应用
1.去官方网站下载aspectj-1.8.0.jar 2.在jar包目录启动cmd,执行java -jar aspectj-1.8.0.jar,Next 3.检查JAVA_HOME路径是否正确,如果不 ...
- 初探LINUX之--基础知识篇
一 Linux哲学思想 1 一切都是一个文件(包含硬件) 2 小型,单一用途的程序 3 链接程序,共同完成复杂的任务 4 避免令人困惑的用户界面 5 配置数据存储在文本中 二 Linux重要概念 Sh ...
- 第二次java面试(用友山东济南分公司)
坐标:山东潍坊公共实训基地 面试单位:用友济南分公司(来了一位HR和技术经理) 本人状态:距离离校15天 宣讲: 1.女HR和男技术经理来到我们专业提前准备好的教室,先宣传海报和发传单,然后看了4个3 ...
- [2019杭电多校第五场][hdu6624]fraction
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6624 题意为求最小的b满足$a*b^{-1}\equiv x(modp)$. 把式子化简一下: $a\ ...
- [LOJ 3101] [Luogu 5332] [JSOI2019]精准预测(2-SAT+拓扑排序+bitset)
[LOJ 3101] [Luogu 5332] [JSOI2019]精准预测(2-SAT+拓扑排序+bitset) 题面 题面较长,略 分析 首先,发现火星人只有死和活两种状态,考虑2-SAT 建图 ...
- make: *** 没有指明目标并且找不到 makefile
make: *** 没有指明目标并且找不到 makefile. 停止. make: *** 没有规则可以创建目标“install”. 停止. 不是没有makefile文件,而是你没有安装gcc编译 ...
- 重磅 | Elasticsearch7.X学习路线图
原文:重磅 | Elasticsearch7.X学习路线图 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.c ...
- IOC详解
Ioc--控制反转详解(转载 http://www.cnblogs.com/qinqinmeiren/archive/2011/04/02/2151697.html) 本文转载与百度知道,简单例子让 ...
- 深入理解js闭包【写的通俗易懂,很值的阅读】
详细内容在下面这个链接里面: https://www.cnblogs.com/uedt/archive/2010/10/28/1863389.html 能写出这样的文章,定是大佬!