anime(obj,{
left : 0,
top : 0,
opacity : 1
},endTime[0]);
}.bind(this,obj));
}
//栅格结束运动的时间
this.activeTime = new Date(new Date().getTime() + activeTime);
setCss(this.progre[0],{width : 0})
anime(this.progre[0],{width : this.size.width},activeTime);
}
}
function getTypeTime(){
var timer = new Array();
switch(this.type){
case 1:
timer.push(this.boxTime / 4 + Math.random() * this.boxTime / 4);
timer.push(timer[0]);
break;
default:
timer.push([Math.random() * this.boxTime / 5,this.boxTime / 10 * 3]);
timer.push(timer[0][0] + timer[0][1]);
break;
}
return timer;
}
function anime(obj,attr,endTime,callback) {
(obj.timer) && cancelAnimationFrame(obj.timer);
var cssJosn = obj.currentStyle || getComputedStyle(obj,null),
start = {},end = {},goTime;
//设置初始属性值和结束属性值
for(var key in attr){
if(attr[key] != parseFloat(cssJosn[key])){
start[key] = parseFloat(cssJosn[key]);
end[key] = attr[key] - start[key];
}
}
goTime = new Date();
if(endTime instanceof Array){
(function delayFn(){
if((new Date() - goTime) >= endTime[0]){
endTime = endTime[1];
goTime = new Date();
ref();
}else{
obj.timer = requestAnimationFrame(delayFn);
}
})();
}else{
ref();
}
function ref(){
var prop = (new Date() - goTime) / endTime;
(prop >= 1) ? prop = 1 : obj.timer = requestAnimationFrame(ref);
for(var key in start){
var val = -end[key] * prop *(prop-2) + start[key];
if(key == 'opacity'){
obj.style.opacity = val;
obj.style.filter = "alpha(opacity="+ (val*100) +")";
}else{
obj.style[key] = val+'px';
}
}
(prop === 1) && callback && callback.call(obj);
};
}
module.exports.FragmentBanner = FragmentBanner;
在需要的组件里面引入改js
import {FragmentBanner} from '../../../static/js/banner.js'使用方式如下
// html代码
<header class="js_header mod-header">
<div class="banner" id="banner1" style="margin: 50px auto;margin-bottom:0px">
<div class="banner-view"></div>
<div class="banner-btn"></div>
<div class="banner-number"></div>
<div class="banner-progres"></div>
</div>
</header>
//css样式
<style>
.banner{
position: relative;
overflow: hidden;
