对于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写 匀速运动.缓冲运动.多物体运 ...
随机推荐
- go系列（1）- linux下安装go环境
安装GO 打开安装包下载地址,查看linux下go的最新版本 https://golang.google.cn/dl/ 经查看go的最新版本为go1.11.4.linux-amd64.tar.gz 右 ...
- 小程序video置顶
page { overflow-y: none; height: 100vh; } .page__hd_media { position: fixed; width:100vw; top:; heig ...
- HDU6301(2018多校第一场）
Bryce1010模板 http://acm.hdu.edu.cn/showproblem.php?pid=6301 队友AC的,没怎么看 #include<iostream> #incl ...
- 微信支付——基于laravel框架的php实现
现在经手的几乎每个项目都支持微信支付,简单记录下接入的大致流程. 1.首先商户等申请各种账号,微信支付商户号,APPID,API密钥,Appsecret 2.app端上传支付需要的各个字段 3.后台收 ...
- 转 查看磁盘IO负载 - 看哪些进程在读写磁盘 以及oracle 异步I/O 和同步I/O
https://www.cnblogs.com/cloudstorage/archive/2012/11/11/2764623.html #####sample 1: Oracle等待事件db fil ...
- CPU占用分析
用TOP命令很容易定位到时谁占用CPU最高 多线程的进程,我们要知道实际上占用cpu的最小单位是线程,所以肯定是众线程中的某一个或几个占用CPU过高导致的.top -H -p pid命令查看进程内各个 ...
- HDU Atlantis 线段树 表达区间 矩形面积相交
http://acm.hdu.edu.cn/showproblem.php?pid=1542 我的做法是把x轴的表示为线段,然后更新y 不考虑什么优化的话,开始的时候,把他们表达成线段,并按y排序,然 ...
- Java编程基础-面向对象(上)
一.面向对象的概念 1.概念:面向对象是把解决的问题按照一定规则划分为多个独立的对象,然后通过调用对象的方法来解决问题.当然,一个应用程序会包含多个对象,通过多个对象的相互配合来实现应用程序的功能.这 ...
- CF1072C Cram Time
思路: 首先二分找到使x * (x + 1) / 2 <= a + b最大的x,然后令p = min(a, b), q = max(a, b),按照x,x - 1, ..., 1的顺序选取数字把 ...
- vue从入门到开发--4--处理http请求
一: 在main.js里面处理http请求模块,因为没有这个模块,所以需要先安装这个模块:npm install vue-resource --save 安装完毕之后,导入这个模块,并使用中间件将其使 ...