对于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写 匀速运动.缓冲运动.多物体运 ...
随机推荐
- D. Merge Equals（from Educational Codeforces Round 42 (Rated for Div. 2)）
模拟题,运用强大的stl. #include <iostream> #include <map> #include <algorithm> #include < ...
- linux定时任务报错mysql: command not found
本人在用docker做镜像的时候,把定时任务打到镜像里,但是执行的时候发现错误日志总是报 sh: mysql: command not found ,然后开始解决问题 1)首先确认镜像有没有装mysq ...
- 洛谷 P1053 篝火晚会
https://www.luogu.org/problemnew/show/P1053 错误记录:判-1的时候出了些问题(比如只判了图是否连通):数组没清空 #include<cstdio> ...
- Linux crontab 设置定时任务
crontab crontab 用于设置系统自动执行的周期性任务 # m h dom mon dow user command 17 * * * * root cd / && run- ...
- INSERT ... ON DUPLICATE KEY UPDATE产生death lock死锁原理
前言 编辑 我们在实际业务场景中,经常会有一个这样的需求,插入某条记录,如果已经存在了则更新它如果更新日期或者某些列上的累加操作等,我们肯定会想到使用INSERT ... ON DUPLICATE K ...
- Ajax 提交表单【包括文件上传】
利用js插件实现 <script src="@Url.Content("~/js/layer/jquery.form.min.js")"></ ...
- 慢慢积累遇到的linux指令
sudo 用来以其他身份来执行命令,预设身份为root sudo apt install git 下载git sudo root 进入root身份(只有这个身份ubuntu和window系统之间才能共 ...
- list control 【转】
1. CListCtrl 风格 LVS_ICON: 为每个item显示大图标 LVS_SMALLICON: 为每个item显示小图标 LVS_LIST: 显示一列带有小图标的ite ...
- 使用POI创建word表格-在表格单元格中创建子表格
要实现的功能如下:表格中的单元格中有子表格 实现代码如下: XWPFParagraph cellPara = row.getCell(j).getParagraphArray(0); //row.ge ...
- 高效vim插件
目录[-] 高效vim插件 插件管理利器 高效插件集 NerdTree snipMate tagbar jedi-vim eclim c.vim vim-colorschemes vim配置 一个实例 ...