javascript运动框架(二)
紧接着上面写的...
给div加一个边框,border:1px solid black
window.onload = function(){
var div = document.getElementById('div1');
div.onclick = function(){
setInterval(function(){
div.style.width = div.offsetWidth-1+'px'
},30)
}
}
敲玩代码我们可以发现,宽度应该是一直在减,但是呢。反而增加了,这是为什么呢?
原来关于offset这一些系列的属性都会存在这些问题,下面就来纠正一下
1、currentStyle是当前的样式,但是不兼容谷歌和火狐
2、getComputedStyle是计算过后的样式,不兼容ie8--
具体代码如下:
传的参数obj指的是获取的对象,name是样式属性
function getStyle(obj,name){
//currentStyle:当前的样式
if(obj.currentStyle){
return obj.currentStyle[name];//不兼容谷歌和火狐
}else{
//getComputedStyle:计算过后的样式
return getComputedStyle(obj,false)[name];//不兼容IE8--
}
}
下一步我们就需要把move函数进化一下,
需要把start开始的距离从var start = obj.offsetLeft;改为var start = parseFloat(getStyle(obj,name));
因为getStyle(obj,name)获取到的是字符串,所以需要使用parseFloat转换类型
具体代码如下
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('div1');
var timer;
function getStyle(obj,name){
//currentStyle:当前的样式
if(obj.currentStyle){
return obj.currentStyle[name];//不兼容谷歌和火狐
}else{
//getComputedStyle:计算过后的样式
return getComputedStyle(obj,false)[name];//不兼容IE8--
}
}
function move(obj,name,target,dur){
var count = parseInt(dur/30);//总次数
var start = parseFloat(getStyle(obj,name));//开始的距离
var dis = target - start;//距离
// 步长
var step = dis/count;
var n = 0;//当前步数
timer = setInterval(function(){
n++;
obj.style[name] = start+ n*step +'px';
if(n == count){
clearInterval(timer)
}
},30)
}
oDiv.onclick = function(){
move(oDiv,'width',800,1000)
}
}
</script>
之前也学过淡入淡出,这个我们可以用透明度来做,那么要怎么做呢?
首先需要判断一下是不是有opacity这个属性,如果有的话需要使用透明度*100,因为透明度是小数。否则的话就继续使用默认的。
if(name == 'opacity'){
obj.style[name] = cur;
obj.style.filter = 'alpha('+cur*100+')';
}else{
obj.style[name] = cur +'px';
}
上述的代码只能从一个方向运动,但是呢我想先向下走500,然后向左走100,这样要怎么做呢?
以前都学过回调函数,如果给他传一个回调函数,是不是就可以了呢?
在运动到目的地的时候,判断是不是有回调函数的存在。如果有则执行,反之不执行。
具体代码如下
window.onload = function(){
var oDiv = document.getElementById('div1');
var timer;
function getStyle(obj,name){
//currentStyle:当前的样式
if(obj.currentStyle){
return obj.currentStyle[name];//不兼容谷歌和火狐
}else{
//getComputedStyle:计算过后的样式
return getComputedStyle(obj,false)[name];//不兼容IE8--
}
}
function move(obj,name,target,dur,fn){
var count = parseInt(dur/30);//总次数
var start = parseFloat(getStyle(obj,name));//开始的距离
var dis = target - start;//距离
// 步长
// var step =dis/count ;
var n = 0;//当前步数
timer = setInterval(function(){
n++;
var cur = start + n*dis/count;
if(name == 'opacity'){
obj.style[name] = cur;
obj.style.filter = 'alpha('+cur*100+')';
}
obj.style[name] = cur +'px';
if(n == count){
clearInterval(timer)
fn && fn();
}
},30)
}
oDiv.onclick = function(){
move(oDiv,'top',500,3000,function(){
move(oDiv,'left',100,500);
})
}
}
</script>
待续....
javascript运动框架(二)的更多相关文章
- 【repost】JavaScript运动框架之速度时间版本
一.JavaScript运动框架之速度版 1.1 运动框架的实现思路 运动,其实就是在一段时间内改变 left . right . width . height . opactiy 的值,到达目的地之 ...
- javascript运动框架(三)
迟到了好几天,不好意思哈!继续来优化一下javascript运动框架的代码.之前的代码存在bug,当重复点击时速度会加快,那么怎么解决这个bug呢? 现在我们就来解决一下,其实很简单,在开始运动时,关 ...
- 好程序员技术教程分享JavaScript运动框架
好程序员技术教程分享JavaScript运动框架,有需要的朋友可以参考下. JavaScript的运动,即让某元素的某些属性由一个值变到另一个值的过程.如让div的width属性由200px变到400 ...
- 【原生JS组件】javascript 运动框架
大家都知道JQuerry有animate方法来给DOM元素进行运动,CSS3中也有transition.transform来进行运动.而使用原生的Javascript来控制元素运动,须要写非常多运动的 ...
- javascript运动框架
下面这个一个运动框架可以控制元素在一个属性上的运动,同时,可以调用回调函数. /* 获取元素某个属性的值 @obj: 对象 @attr: 属性值 */ function getStyle(obj, a ...
- JavaScript 运动框架 Step by step(转)
1,运动原理 Js运动,本质来说,就是让 web 上 DOM 元素动起来.而想要 DOM 动起来,改变其自身的位置属性,比如高宽,左边距,上边距,透明度等.动画的原理就是把不同状态的物体,串成连续的样 ...
- javaScript运动框架之匀速运动
运动框架 1.在开始运动时,关闭已有定时器 2.把运动和停止隔开(if/else) 匀速运动的停止条件 运动终止条件:距离足够近 Demo代码 <!DOCTYPE html> <ht ...
- JavaScript 运动框架
<script> window.onload=function (){ var oDiv=document.getElementById("div1"); oDiv.o ...
- 适用于CSS2的各种运动的javascript运动框架
<script> window.onload = function() { //var oDiv1 = document.getElementById('box1'); //var oDi ...
随机推荐
- Java 后台创建word 文档
---恢复内容开始--- Java 后台创建 word 文档 自己总结 网上查阅的文档 分享POI 教程地址:http://www.tuicool.com/articles/emqaEf6 方式一. ...
- 防火墙上开放Oracle服务端口1521的方法
近来由于工作需要,在Windows XP平台上安装了Oracle9i数据库作为测试之用,一切正常.但当客户机连接服务器时却总是超时,我首先想到了防火墙,当我打开1521端口时,连接操作仍然失败.我又怀 ...
- 安装lnmp集成环境
具体配置看原文,不重新复述: 原文:https://lnmp.org/install.html 因为配置数据库主从,需要保持两台mysql数据库服务器的mysql版本号一致,所以又重新装了一次..重新 ...
- weex入门
近期要做一个安卓端的原生应用程序.情况是这样的:需求方原先已经实现了网页,是一个工具类应用,大致作用是连接到他们公司生产的硬件,然后通手机与智能硬件通信来对硬件进行一系列控制.不过呢,这个网页先前是由 ...
- 实现UDP高效接收/响应
环境Linux g++6.3.0 问题一:一个ip地址如何接收高并发请求 问题二:如何高并发响应消息 发送请求端只能通过ip地址+端口号向服务器发送请求码,所以服务器只能用一个UDP去绑定此ip以及端 ...
- vue动画的用法
vue动画 在vue.js中有两种写动画的方法,第一种就是像js里一样,用原生代码来实现,第二种则是使用animate.css的动画类文件,这个动画类和bootstrap.css文件类似,直接调用类就 ...
- vue init webpack-simple project 报错处理(connect ETIMEDOUT 192.30.253.112)
Failed to download repo vuejs-templates/webpack-simple: connect ETIMEDOUT 192.30.253.113:443 Failed ...
- BinarySearchTree-二叉搜索树
一.二叉搜索树的定义及性质 二叉查找树(Binary Search Tree),也称有序二叉树(ordered binary tree),排序二叉树(sorted binary tree),是指一棵空 ...
- SICIP-1.3-Defining a new function
定义函数 def <name> (former parament): 函数体(缩进) 环境 全局环境 局部环境 只在函数内部有效 TIP 函数体只在调用的最后执行 抽象化函数 函数域(函数 ...
- 常见浏览器User-Agent大全
http://blog.csdn.net/tianjinjianzhan/article/details/51702232