发表于: 2016-09-03 23:15:54

2 1772


今天完成的事情:用hexo+githubpages搭建了个人博客,网上挺多教程的,基本步骤就是

1.npm下载安装hexo,并在github下创建一个库。

2.本地git和自己的github联系起来,上传hexo中的文件到github中创建的库

3.解析自己的域名指向github中自己库的路径,就可以完成访问了。----博客地址


明天计划的事情:完善自己博客基本功能,学会用markdown快速编写文章


遇到的问题:无

收获:写了一个用js实现基本动画的函数 ,类似JQ中的animate ,注释已写全


/*
* 调用示例: run(obj,{opacity:30,height:50,width:50,left:200},fn,30)
* obj : 需要运动的对象
* json :传入需要改变的值,json格式,如{opacity:30,height:50,width:50}  当为opacity时 传的值应为1-100
* 注意: 进行上下左右平移变化时需设置 position的值
* fn : 动画运行完执行的回调函数 ,可实现多动画嵌套
* time : 定时器执行速度 ,不写的话默认为30
*/
function run(obj,json,fn,time) {
clearInterval(obj.timer); // 进入动画之前先清楚重复的定时器

   obj.timer = setInterval(function () { // 生成定义器
       var isEnd = true;
for (var styleName in json) {
// 获取样式
           var style = obj.currentStyle? obj.currentStyle[styleName] : getComputedStyle(obj,null)[styleName];
var isOpacity = styleName==='opacity';

// 获取需要改变的style
           var price = isOpacity ? parseFloat(style) * 100 : parseInt(style);

// 生成每次动画运行速度,缓冲运动
           var speed = (json[styleName] - price)/8;

// 速度取整
           speed = speed>0? Math.ceil(speed):Math.floor(speed);
if (price != json[styleName]) { // 当有值没到达终点是isEnd的为false
               isEnd = false;
}

// 改变style的值
           obj.style[styleName] = isOpacity ?(price + speed)/100 : price + speed + 'px';
}
if (isEnd) { // 当值等于需要到达的时候消除定时器
           clearInterval(obj.timer);
if (fn) { // 如果有回调函数则执行
               fn()
}
}
},time || 30)
}




返回列表 返回列表
评论

    分享到