请选择 进入手机版 | 继续访问电脑版

好程序员-千锋教育旗下高端IT职业教育品牌

400-811-9990
我的账户
好程序员

专注高端IT职业培训

亲爱的猿猿,欢迎!

已有账号,请

如尚未注册?

[HTML5] 好程序员技术教程分享JavaScript运动框架

[复制链接]
叶子老师 发表于 2019-4-23 16:36:45 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
好程序员技术教程分享JavaScript运动框架,有需要的朋友可以参考下。
JavaScript的运动,即让某元素的某些属性由一个值变到另一个值的过程。如让div的width属性由200px变到400px,opacity属性由0.3变到1.0,就是一个运动过程。
实现运动要注意以下方面:
1. 匀速运动(改变left、right、width、height、opacity等属性)
2. 缓冲运动(速度是变化的)
3. 多物体运动(注意所有东西都不能共用,否则容易产生冲突,如定时器timer)
4. 获取任意属性值(封装一个getStyle函数)
5. 链式运动(串行)
6. 同时运动(并行,同时改变多个属性,需要使用 json)
封装好的getStyle函数,在下面的运动框架中会用到:
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr]; //针对IE
}
else{
return getComputedStyle(obj,false)[attr]; //针对Firefox
}
}
万能的运动框架:
function Move(obj,json,callback){
var flag=true; //标志变量,为true表示所有运动都到达目标值
clearInterval(obj.timer);
obj.timer=setInterval(function(){
flag=true;
for(var attr in json){
//获取当前值
var curr=0;
if(attr=='opacity'){
curr=Math.round(parseFloat(getStyle(obj,attr))*100); //parseFloat可解析字符串返回浮点数//round四舍五入
}
else{
curr=parseInt(getStyle(obj,attr)); //parseInt可解析字符串返回整数
}
//计算速度
var speed=(json[attr]-curr)/10;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
//检测是否停止
if(curr!=json[attr]){
flag=false; //有一个属性未达目标值,就把flag变成false
}
if(attr=='opacity'){
obj.style.filter='alpha(opacity:'+(curr+speed)+')'; //针对IE
obj.style.opacity=(curr+speed)/100; //针对Firefox和Chrome
}
else{
obj.style[attr]=curr+speed+'px';
}
}
if(flag){
clearInterval(obj.timer);
if(callback){
callback();
}
}
},30);
}
调用上述运动框架的实例:
var div_icon=document.getElementById('icon');
var aList=div_icon.getElementsByTagName('a');
for(var i=0;i<aList.length;i++){
<span style="white-space:pre">        </span>aList.onmouseover=function(){
<span style="white-space:pre">         </span>var _this=this.getElementsByTagName('i')[0];
<span style="white-space:pre">         </span>Move(_this,{top:-70,opacity:0},function(){
<span style="white-space:pre">         </span>_this.style.top=30+'px';
<span style="white-space:pre">         </span>Move(_this,{top:10,opacity:100});
<span style="white-space:pre">         </span>});
<span style="white-space:pre">        </span>}
}
好了,以上就是用JavaScript编写的运动框架。此外,jQuery中的animate函数也可以方便实现上述功能:
$(function(){
$('#icon a').mouseenter(function(){
$(this).find('i').animate({top:"-70px",opacity:"0"}, 300,function(){ //动画速度为300ms
$(this).css({top:"30px"});
$(this).animate({top:"10px",opacity:"1"}, 200);
});
})
})
好程序员教育官网:http://www.goodprogrammer.org/
精彩内容,一键分享给更多人!
回复

使用道具 举报

您需要登录后才可以回帖

本版积分规则

关注我们
好程序员
千锋好程序员

北京校区(总部):北京市海淀区宝盛北里西区28号中关村智诚科创大厦

深圳西部硅谷校区:深圳市宝安区宝安大道5010号深圳西部硅谷B座A区605-619

杭州龙驰智慧谷校区:浙江省杭州市下沙经济技术开发区元成路199号龙驰智慧谷B座7层

郑州校区:郑州市二七区航海中路60号海为科技园C区10层、12层

Copyright 2007-2019 北京千锋互联科技有限公司 .All Right

京ICP备12003911号-5 京公安网11010802011455号

请您保持通讯畅通1对1咨询马上开启