JS中的基本运动逻辑思想总结

总结一下自己今天学习运动的基本思想:‘

【1】对于移动的div,使其在某一个位置停止将其封装成一个函数,仅仅改变speed的正负即可

涉及到问题包括:

var time=null;

function  startMove(target)

{

var oDiv=document.getElementById(‘div‘);

clearInteral(time);//清除定时器

time=setInteral(function()

{

var speed=0;

if(oDiv.offsetLeft<target){speed=正数;}

else{speed=负数;}  //考虑刚开始的div在目标值的左边还是右边

if(oDiv.offsetLeft==target){clearInteral(time);}

else{oDiv.style.Left=oDiv.offsetLeft+speed+‘px‘;}

},30);

}

【2】淡入淡出图片的制作,借助变量存储值。

var alpha=30;//存储变量值
var time=null;
function startMove(target)
{
var img=document.getElementById(‘img1‘);
clearInterval(time);
time=setInterval(function()
{
var speed=0;
if(alpha<target){speed=1;}
else{speed=-1;}
if(alpha==target){clearInterval(time);}
else{
alpha+=speed;
img.style.opacity=alpha/100;//火狐下为opacity:0-1之间的值   而IE为:filter:alpha(opacity=30);0-100之间的数值
document.title=alpha;
}

},30);
}

【3】侧边栏分享的制作过程,同上面【1】一样,主要是改变Left的值  设为0或-100,添加鼠标移入移出事件。

【4】缓慢运动的基本思想和上面差不多,但speed是个变值,speed=目标值-原值

var time=null;

function  startMove(target)

{

var oDiv=document.getElementById(‘div‘);

clearInteral(time);//清除定时器

time=setInteral(function()

{

var speed=(target-oDiv.setoffLeft)/固定系数;//这里固定系数可以为任意数如:7,8.....................等

speed=speed>0?Math.ceil(speed):Math.floor(speed);//ceil 是向上取整  floor是向下取整   之所以取整是避免与目标值出现小偏差。

if(oDiv.offsetLeft==target){clearInteral(time);}

else{oDiv.style.Left=oDiv.offsetLeft+speed+‘px‘;}

},30);

}

【5】右边栏的分享div保持与滚动条替丁的距离,缓慢停止的过程。

1:首先得到滚动条的距离:scrollTop=document.documentElement.scrollTop||document.body.scrollTop

2:得到div与可视区之间的距离:var t=(document.documentElement.clientHeight-oDiv.offsetHeight)/2

3:div的高为:oDiv.style.top=t+scrollTop+‘px‘;这里需要使用paresint()函数将高转换为整数

window.onscroll=function ()------注意这里涉及到滚动条是windon.onscroll事件
{
var oDiv=document.getElementById(‘div1‘);
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
var t=scrollTop+(document.documentElement.clientHeight-oDiv.offsetHeight)/2+‘px‘;
startMove(parseInt(t));  //将其转换为整数,避免滚动条上下抖动
}
var time=null;
function startMove(target)
{
var oDiv=document.getElementById(‘div1‘);
clearInterval(time);
time=setInterval(function()
{
var speed=(target-oDiv.offsetTop)/8;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(oDiv.style.top==target){clearInterval(time);}
else{oDiv.style.top=oDiv.offsetTop+speed+‘px‘;}
txt1.value=oDiv.offsetTop+‘,目标:‘+target;
},30);
}

时间: 2024-11-05 12:08:57

JS中的基本运动逻辑思想总结的相关文章

js中数据操作的某些思想

1,默认数据的复用 写成function的return形式缓存在变量中,用的时候直接执行fun就行了 例如 有文件text.js里面的对象是export default ()=>({aa:55,bb:function(){console.log()}}) 异步加载之后 缓存在window.componentCfg[type]里面 import('./text').then(e=>e.default).then(e=>{ window.componentCfg['text']=e; })

讲讲js中的逻辑与(&amp;&amp;)以及逻辑或(||)

前几天看到一个函数,百思不得其解,今天早上醒来看了本js的书,正好讲到操作符的用法,给大家分享下js中的&&,||,和我们用的其他的编程语言还是有点区别的. 直接上那个函数的代码: function whatDoesItDo(mood){ return mood && "I like this" || "I don't like this"; } 当我们给mood赋值true其显示"I like this"(A来代

js中的逻辑或和逻辑与

a=''||'abc';                              //返回什么?  'abc' a=1||2;                                  //返回什么?   1 var a=0; var b=++a||++a ;        //a=1;b=1; b=''&&'abc'                             //返回什么?  ’‘ b=1&&2                          

js中的逻辑与(&amp;&amp;)和逻辑或(||)

之前有一个同事去面试,面试过程中碰到这样一个问题: 在js中写出如下的答案 : var a = 2; var b = 3; var andflag = a && b ; var orflag = a || b; 问andflag 和orflag 分别是什么? 起初我认为: andflag 和orflag 的值都为 true; 毕竟 && 和 || 都是求Boolean ,后来发现,我错了. 答案应该是  andflag  = 3,orflag = 2; 原因是这样的: 在运

简单谈谈js中的MVC

MVC是什么? MVC是一种架构模式,它将应用抽象为3个部分:模型(数据).视图.控制器(分发器). 本文将用一个经典的例子todoList来展开(代码在最后). 一个事件发生的过程(通信单向流动): 1.用户在视图 V 上与应用程序交互 2.控制器 C 触发相应的事件,要求模型 M 改变状态(读写数据) 3.模型 M 将数据发送到视图 V ,更新数据,展现给用户 在js的传统开发模式中,大多基于事件驱动的: 1.hash驱动 2.DOM事件,用来驱动视图 3.模型事件(业务模型事件和数据模型事

第一次写博客,关于前端开发deMVC在js中的应用

对前端MVC MVC分别是model.view.controller的缩写,模型.视图.控制器.这些更加偏向于后台,在以前MVC是只属于后台的.当然随着技术的进步,前端的大牛们将后台的一些东西应用于前端,MVC就是其中之一.  走进MVC MVC三者关系图: 图片有点简单,请谅解,是第一次写,而且时间有点紧!!!  View视图 首先简单介绍一下它的工作原理与承担的业务.首先在这里我们先介绍View,它就是前端的视图界面,负责与用户的交互和拉取数据,如果说的简单点,它就是HTML文件: <!DO

浅谈js中的MVC

MVC是什么? MVC是一种架构模式,它将应用抽象为3个部分:模型(数据).视图.控制器(分发器) 本文将用一个经典的例子todoList来展开 一个事件发生的过程(通信单向流动): 1.用户在视图V上与应用程序交互 2.控制器C触发相应的事件,要求模型M改变状态(读写数据) 3.模型M将数据发送到视图V,更新数据,展现给用户 在js的传统开发模式中,大多基于事件驱动的: 1.hash驱动 2.DOM事件,用来驱动视图 3.模型事件(业务模型事件和数据模型事件),用来驱动模型和模型结合 所以js

深入研究js中的位运算及用法

什么是位运算? 位运算是在数字底层(即表示数字的 32 个数位)进行运算的.由于位运算是低级的运算操作,所以速度往往也是最快的(相对其它运算如加减乘除来说),并且借助位运算有时我们还能实现更简单的程序逻辑,缺点是很不直观,许多场合不能够使用. 位运算只对整数起作用,如果一个运算子不是整数,会自动转为整数后再运行.虽然在 JavaScript 内部,数值都是以64位浮点数的形式储存,但是做位运算的时候,是以32位带符号的整数进行运算的,并且返回值也是一个32位带符号的整数. 关于二进制 ==以下来

js中的require、define、export、import【转】

原文链接:https://www.cnblogs.com/libin-1/p/7127481.html 为什么有模块概念 理想情况下,开发者只需要实现核心的业务逻辑,其他都可以加载别人已经写好的模块. 但是,Javascript不是一种模块化编程语言,在es6以前,它是不支持”类”(class),所以也就没有”模块”(module)了. require时代 Javascript社区做了很多努力,在现有的运行环境中,实现”模块”的效果. 原始写法 模块就是实现特定功能的一组方法.只要把不同的函数(