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 ...
随机推荐
- 11、 机器学习系统的设计(Machine Learning System Design)
11.1 首先要做什么 在接下来的视频中,我将谈到机器学习系统的设计.这些视频将谈及在设计复杂的机器学习系统时,你将遇到的主要问题.同时我们会试着给出一些关于如何巧妙构建一个复杂的机器学习系统的建议. ...
- ofbiz idea 启动
1.下载gradle并安装到本地 2.idea引入gradle 3.gradle右键选择refresh,项目会重新编译并加载gradle的task 4.可以再编译一下 5.没问题的话打开,jar ap ...
- webpack之给目录起别名
1. 配置文件目录: build>webpack.base.config.js: resolve: { alias: { '@': resolve('src'), //照猫画虎 'styles' ...
- InvalidMappingException提示Could not parse mapping document错误的解决方法
转自:http://www.itzhai.com/invalidmappingexception-could-not-parse-mapping-document-prompt-the-wrong-s ...
- netcore项目使用swagger开发
首先我创建一个netcore项目,我使用的工具是vs2019 这里需要注意的是,看情况选择是否开启身份验证,一般是没有需求的,这里因为我是测试使用所以需要取消勾兑为https配置,并且我没有启用doc ...
- UVAlive 3485 Bridge(抛物线弧长积分)
Bridge A suspension bridge suspends the roadway from huge main cables, which extend from one end of ...
- [python 学习] IO操作之读写文件
一.读取全部文件: # -*- coding: utf-8 -*- f = open('qq_url.txt','r'); print f.read(); f.close(); 二.读取规定长度文件 ...
- CSS--使用CSS Grid(网格)布局
.一 CSS Grid(网格布局)简介 CSS Grid 布局由两个核心组成部分是父元素和子元素,父元素 是实际的 grid(网格),子元素是 grid(网格) 内的内容.下面是一个父元素和六个子元素 ...
- 【leetcode】394. Decode String
题目如下: 解题思路:这种题目和四则运算,去括号的题目很类似.解法也差不多. 代码如下: class Solution(object): def decodeString(self, s): &quo ...
- Python3解leetcode Path Sum III
问题描述: You are given a binary tree in which each node contains an integer value. Find the number of p ...