对于js运动中产生的问题
1、不同的对象调用同一个定时器情况，则需要将定时器的名称定为该对象的一个属性来进行运用。
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div1{
width: 100px;
height: 200px;
background-color: red;
position: absolute;
left: -100px;
top: 100px;
}
#div2{
width: 30px;
height: 60px;
background-color: black;
color: white;
position: absolute;
right: -30px;
top: 70px;
text-align: center;
}
#img1{
width: 400px;
opacity: 0.3;
filter: alpha(opacity=30);
margin-left: 200px;
} </style>
</head>
<script>
window.onload=function () {
var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
var oImg=document.getElementById('img1');
// var iTimer = null; oDiv1.onmouseover=function () {
startMove(this,'left',0,10);
}
oDiv1.onmouseout=function () {
startMove(this,'left',-100,-10);
}
oImg.onmouseover=function () {
startMove(this,'opacity',100,10);
}
oImg.onmouseout=function () {
startMove(this,'opacity',30,-10);
}
// function startMove(obj,iTarget,iSpeed) {
//
// clearInterval(iTimer );
//
// obj.iTimer= setInterval(function () {
// if (obj.offsetLeft ==iTarget) {
// clearInterval(iTimer);
// } else {
// obj.style.left = obj.offsetLeft +iSpeed + 'px';
// }
// }, 30);
// } function startMove(obj,attr,iTarget,iSpeed) {
clearInterval(obj.iTimer);
var iCur=0; obj.iTimer = setInterval(function () { if(attr=='opacity'){
iCur=Math.round(css(obj,'opacity')*100);
}else {
iCur=parseInt(css(obj,attr));
} if (iCur ==iTarget) {
clearInterval(obj.iTimer );
} else {
if(attr=='opacity'){
obj.style.opacity = (iCur+iSpeed)/100;
obj.style.filter='alpha(opacity'+(iCur+iSpeed)+')';
}else {
obj.style[attr]=iCur+iSpeed+'px';
}
}
}, 30);
}
function css(obj,attr) {
if(obj.currentStyle){
return obj.currentStyle[attr];
}else {
return getComputedStyle(obj,false)[attr];
}
} }
</script>
<body>
<div id="div1">
<div id="div2">
分享到
</div>
</div>
<img src="5.jpg" id="img1">
</body>
</html>
2、同一个对象，不同属性同时调用一个定时器的情况
例： 同时变宽和高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div1 {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 100px;
top: 30px;
}
</style>
</head>
<script>
window.onload=function () {
var oDiv1 = document.getElementById('div1'); oDiv1.onmouseover = function () { startMove(this,{
width:200,
height:300
},10);
} oDiv1.onmouseout = function () { startMove(this,{
width:100,
height:100
},-10);
} function startMove(obj,json,iSpeed) {
clearInterval(obj.iTimer);
var iCur=0; obj.iTimer = setInterval(function () {
//定时器每走一下，就要把要运动的属性都推进一次
//当所有属性都运动到了目标点的时候停止定时器
var iBtn=true;
for(var attr in json){
var iTarget=json[attr]; if(attr=='opacity'){
iCur=Math.round(css(obj,'opacity')*100);
}else {
iCur=parseInt(css(obj,attr));
} if (iCur !=iTarget) {
iBtn=false;
if(attr=='opacity'){
obj.style.opacity = (iCur+iSpeed)/100;
obj.style.filter='alpha(opacity'+(iCur+iSpeed)+')';
}else {
obj.style[attr]=iCur+iSpeed+'px';
}
}
}
//判断是否所有属性都到了目标点
if(iBtn){
clearInterval(obj.iTimer );
}
}, 30);
}
function css(obj,attr) {
if(obj.currentStyle){
return obj.currentStyle[attr];
}else {
return getComputedStyle(obj,false)[attr];
}
}
}
</script>
<body>
<div id="div1"></div>
</body>
</html>
3、同一个对象，不同属性的链式运动---运动回溯
例：连续先变宽，后变高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div1 {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 100px;
top: 30px;
}
</style>
</head>
<script>
window.onload=function () {
var oDiv1 = document.getElementById('div1'); oDiv1.onmouseover = function () { startMove(this,{
width:200
},10,function () {
startMove(this,{
height:200
},10);
});
} oDiv1.onmouseout = function () { startMove(this,{
height:100
},-10,function () {
startMove(this,{
width:100
},-10);
});
} function startMove(obj,json,iSpeed,fn) {
clearInterval(obj.iTimer);
var iCur=0; obj.iTimer = setInterval(function () {
//定时器每走一下，就要把要运动的属性都推进一次
//当所有属性都运动到了目标点的时候停止定时器
var iBtn=true;
for(var attr in json){
var iTarget=json[attr]; if(attr=='opacity'){
iCur=Math.round(css(obj,'opacity')*100);
}else {
iCur=parseInt(css(obj,attr));
} if (iCur !=iTarget) {
iBtn=false;
if(attr=='opacity'){
obj.style.opacity = (iCur+iSpeed)/100;
obj.style.filter='alpha(opacity'+(iCur+iSpeed)+')';
}else {
obj.style[attr]=iCur+iSpeed+'px';
}
}
}
//判断是否所有属性都到了目标点
if(iBtn){
clearInterval(obj.iTimer );
fn&&fn.call(obj);
}
}, 30);
}
function css(obj,attr) {
if(obj.currentStyle){
return obj.currentStyle[attr];
}else {
return getComputedStyle(obj,false)[attr];
}
}
}
</script>
<body>
<div id="div1"></div>
</body>
</html>
4、缓冲运动与摩擦运动
区别：摩擦运动：逐渐变慢，最后停止，不一定停到目标点
缓冲运动：1.可以精确的停到指定目标点
2.距离越远，速度越大
速度=（目标值-当前值）/缩放系数
Bug：速度为小数，会进行四舍五入取整
解决办法：值取整
iTimer = setInterval(function () {
oSpeed=(500-oDiv.offsetLeft)/8;
oSpeed=oSpeed>0?Math.ceil(oSpeed):Math.floor(oSpeed);
if (oDiv.offsetLeft == 500) {
clearInterval(iTimer);
} else {
oDiv.style.left = oDiv.offsetLeft +oSpeed + 'px';
}
}, 30);
对于js运动中产生的问题的更多相关文章
- JS运动从入门到兴奋1
hello,我是沐晴,一个充满了才华,却靠了照骗走江湖的前端妹子.在这个充满PS的年代,这你们都信,哈哈,废话不多说,今天要分享的是关注JS运动的知识.楼主一直认为,不管学习什么,核心思想才是王道,掌 ...
- JS运动从入门到精髓！哈哈
首先来看最基础的运动:单个物体向右匀速运动到某一点停止 例子:一个按钮,一个div,点击按钮,让div向右运动到某一个位置暂停 // 原理: 1 获取物体当前的位置 oDiv.offsetl ...
- 关于js运动的一些总结
js运动实现,有两种.一种是速度版,另一种是时间版. 速度版是通过对速度的加减乘除,得出元素的运动数据.时间版是通过对时间进行Tween公式运算,得出元素的运动数据. 速度版运动优点:容易在运动过程中 ...
- js运动动画
原文:js运动动画 今天简单的学了一下js运动动画,再此感谢慕课网的这位老师http://www.imooc.com/view/167,讲的很不错. 下面是我整理出来的结果. 知识点一:速度动画. 1 ...
- 第八节 JS运动基础
运动基础 让Div运动起来 速度——物体运动的快慢 运动中的Bug 不会停止 速度取某些值会无法停止 到达位置后再点击还会运动 重复点击速度加快 匀速运动(速度不变) 运动框架及应用: 运动框架: 在 ...
- js运动框架逐渐递进版
运动,其实就是在一段时间内改变left.right.width.height.opactiy的值,到达目的地之后停止. 现在按照以下步骤来进行我们的运动框架的封装: 匀速运动. 缓冲运动. 多物体运动 ...
- 解析JS运动
解析JS运动 物体运动原理:通过改变物体的位置,而发生移动变化. 任何运动都是相对的,就像物理中的运动公式:s(要达到的)=s0(当前的样式值)+vt. 方法: 1.运动的物体使用绝对定位 ...
- move.js运动插件
move.js 运动插件是一款针对元素动画效果的插件.可以运用此插件制作出各类元素效果. 插件GitHub地址:https://github.com/visionmedia/move.js 下面整理学 ...
- js 运动函数篇 (一) （匀速运动、缓冲运动、多物体运动、多物体不同值运动、多物体多值运动）层层深入
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS写 匀速运动.缓冲运动.多物体运 ...
随机推荐
- Python入门小练习
Python入门小练习 001 备份文件 Python入门小练习 002 批量下载网页链接中的图片 Python入门小练习 003 利用cookielib模拟登录获取账户信息
- kojs select绑值(工作)
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <tit ...
- Rabbitmq~linux环境的部署
之前写过在windows环境上部署rabbitmq,这回介绍在centos上对这个消息中间件进行部署的过程 一 下载和解压 wget http://www.rabbitmq.com/releases ...
- box-shadow四周阴影
box-shadow 前面两个值为 纵向阴影 和 横向阴影 把这两个值都设置为 0 就是四边都有阴影 border:#074A99 0px solid; box-shadow: 0 0 10px #0 ...
- PHP使用Socket发送字节流
例如,需要发送以下数据 struct header { int type; // 消息类型 int length; // 消息长度 } struct MSG_Q2R2DB_PAYRESULT { ...
- Ice-cream Tycoon9(线段树）
线段树的一些基本应用,就是函数写了很多,有点繁琐. 以每个物品的单价建树,刚开始写了个裸的想水过去直接MLE了,然后又离散化了下. 离散化单价后建树,lz数组用来清零,s数组保存结点所含物品个数,co ...
- Fabric 简单使用
Fabric 简单使用 最近公司组织压测系统,要在多台机子上部署代码,可是机子上的代码与生产环境不一样,需要修改代码,还有有问题的地方要修改,然后再发代码.这边一共有7台服务务器,重新发代码,要一台一 ...
- IT之家学院：使用CMD命令行满速下载百度云
转自:https://www.toutiao.com/a6545305189685920259/?tt_from=android_share&utm_campaign=client_share ...
- webview.loadUrl()可能会URLDecoder
与服务器交互时,客户端对userId进行了URLEncoder,然后在webview.loadUrl时将userId传给服务端,服务端再 URLDecoder userId 可是神奇的事情出现了,客户 ...
- IOS拉伸之底盖设置
1.选定拉伸 UIImageView *fieldImage=[[UIImageViewalloc]initWithFrame:CGRectMake(37,48+35,240, 32)]; field ...