对于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写 匀速运动.缓冲运动.多物体运 ...
随机推荐
- hdu 1695 GCD（容斥）
题目链接 #include <bits/stdc++.h> using namespace std; typedef long long ll; inline int read() { , ...
- jave 计算音视频时长
File source = new File("视频.mp4"); Encoder encoder = new Encoder(); try { MultimediaInfo in ...
- Promise.then(a, b)与Promise.then(a).catch(b)问题详解
原文: When is .then(success, fail) considered an antipattern for promises? 问题 我在bluebrid promise FAQ上面 ...
- python+selenium+requests爬取qq空间相册时遇到的问题及解决思路
最近研究了下用python爬取qq空间相册的问题,遇到的问题及解决思路如下: 1.qq空间相册的访问需要qq登录并且需是好友,requests模块模拟qq登录略显麻烦,所以采用selenium的dri ...
- 20 个案例教你在 Java 8 中如何处理日期和时间?
前言 前面一篇文章写了<SimpleDateFormat 如何安全的使用?>, 里面介绍了 SimpleDateFormat 如何处理日期/时间,以及如何保证线程安全,及其介绍了在 Jav ...
- jQuery中jQuery.extend() 和 jQuery.fn.extend()的功能和区别
昨天下午和今天上午断断续续的一直在看jQuery中jQuery.extend() 和 jQuery.fn.extend()两个函数的功能及区别,现在自认为是掌握的差不多了.好记性不如烂笔头,这里一方面 ...
- StarUML安装与Win7不兼容解决
最近在学习建模工具(StarUML)发现 其他功能一切正常 但是无法显示代码导出功能, 正常界面如下: 我的安装确没有导出功能缺少C++,C# ,Java等导出功能 解决办法: 到StarUM ...
- Oracle Data Integrator 12c 安装（ODI安装）
Oracle Data Integrator 12c 安装(ODI安装) 企业版安装步骤(包含独立安装步骤) 官网下载Oracle Data Integrator 12cR2 (12.2.1.0.0) ...
- static心得
TextClass text; 吉晨 static注意 只要显式调用一个类的某一个static变量,那么就会连带static块,所有static变量一起调用,哪怕不去new一个对象,这时候已经对这 ...
- Kubenetes里pod和service绑定的实现方式
我之前的文章 如何在Kubernetes里创建一个Nginx service介绍了如何创建一个Kubernetes pod和service,使用的方法是命令kubectl run. 本文介绍另一种方式 ...