javascript运动框架的实例代码分享
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了javascript运动框架的实例代码分享，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3255字，纯文字阅读大概需要5分钟。
内容图文
给div加一个边框，border：1px solid blackwindow.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运动框架的实例代码分享的详细内容，更多请关注Gxl网其它相关文章！
内容总结
以上是互联网集市为您收集整理的javascript运动框架的实例代码分享全部内容，希望文章能够帮你解决javascript运动框架的实例代码分享所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。