对于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写 匀速运动.缓冲运动.多物体运 ...
随机推荐
- 分布式通信-tcp/ip socket
Socket通讯的过程 Server端Listen(监听)某个端口是否有连接请求,Client端向Server 端发出Connect(连接)请求,Server端向Client端发回Accept(接受) ...
- iOS UITableView 解决估算行高和指定行高的矛盾
喜欢交朋友的加:微信号 dwjluck2013 1.一般来说 在iOS 中若UITableViewCell 固定行高, 会通过 - (CGFloat)tableView:(UITableView *) ...
- libev 使用
观察器 IO ev_io_init (ev_io *, callback, int fd, int events) ev_io_set (ev_io *, int fd, int events) I/ ...
- 将GitLab上面的代码克隆到本地
1.安装GitLab客户端 2.去GitLab服务端找项目路径 3.去GitLab客户端去克隆代码 右键-->git Clone 4.最后结果
- 第十二章 设计用户界面 之 设计自适应的UI布局
1. 概述 随着手机和平板设备的日益普及,使得开发者不得不考虑MVC网站在移动设备上的展示. 本章内容包括:运行在多种设备上的程序(屏幕分辨率,CSS,HTML).设计手机端Web程序. 2. 主要内 ...
- MySql数据库的相关操作
SQL(Structred Query Language)结构化查询语言:和数据库交互的语言,进行数据库管理的语言. 一.数据库的操作: 1.查询所有数据库: show databases; 2.创建 ...
- pay-spring-boot 开箱即用的Java支付模块，整合支付宝支付、微信支付
关于 使用本模块,可轻松实现支付宝支付.微信支付对接,从而专注于业务,无需关心第三方逻辑. 模块完全独立,无支付宝.微信SDK依赖. 基于Spring Boot. 依赖Redis. 我能做什么 支付宝 ...
- Java 实现Excel表数据的读取和写入 以及过程中可能遇到的问题
问题1:Unable to recognize OLE stream 格式的问题要可能是因为给的数据是2010年的数据表后缀为.xlsx,要先转化成2003版的后缀为.xls 问题2: Warning ...
- WORD操作的问题
最近有个小项目主要是对文档,特别是WORD的操作,读取表格数据存到数据库: 再把数据库的数据读出来写入WORD,下载下来,诸如此类的东西,说来很是简单. 想了想是用什么开发呢? C#常用的,没话说,也 ...
- codevs 1267 老鼠的旅行 2012年CCC加拿大高中生信息学奥赛
时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题目描述 Description You are a mouse that lives in a cage in ...