05/19
2017
在pc设备上，我的博客底部会有一个saber桌宠走来走去~这个效果大概是三年前博客建立不久就做了，但是当时是用JavaScript的定时器来改变桌宠的位置的。今天我把它用css3动画重做了一遍,效果基本上维持原样。
这次我依然用到了JavaScript，不过JavaScript已经不直接移动桌宠的位置了，它的作用是动态创建animation动画规则，这样桌宠的移动就由css3动画控制了。
其实我改成css3动画本来是想降低我的博客在浏览器里的资源占用，但是改了之后发现效果不明显，看来占用资源大头的另有原因，这个以后再查吧。
单独查看demo
源代码：
<!-- 底部走动的桌宠 -->
<img id="zhuochong" src="/demo/zc.gif">
<style>
#zhuochong{position: fixed;z-index: 999999;bottom:0;left:-100px;opacity: 0.9;transform:scaleX(-1);animation-direction: alternate;animation-timing-function: linear;}
</style>
<style id="zcCss"></style>
<script type="text/javascript">
(function () {
var zc,zcCss,w1,w2,leftStart,leftEnd,speed,time,fx,isfirst; //预设变量
document.addEventListener("DOMContentLoaded", function () {// 初始化
zc=document.querySelector("#zhuochong"),
zcCss=document.querySelector("#zcCss"),
w1=document.body.scrollWidth, //页面宽度
w2=86, //桌宠宽度
leftStart=0-w2, //左边界
leftEnd=w1-w2, //右边界
speed=100, //每秒移动多少像素
time=parseInt(w1/speed), //动画时长
fx="r", //桌宠方向
isfirst=true; //是否是第一次执行
zcmove(fx); //启动
zc.addEventListener("animationend", function () { //动画播放完毕后再启动
isfirst=false;
fx==="r"?fx="l":fx="r";
zcmove(fx);
});
});
function zcmove(fx) { // 要注意两次的动画名要有区别，不然第二次就不正常了
if (!isfirst) { //如果已经不是第一次执行了，则把左边界设置为0（即不走出屏幕外）
leftStart=0;
}
if (fx==="r") { //向右移动
zc.style.transform="scaleX(-1)";
zcCss.innerHTML='@keyframes zcmove{' +
'from {left: '+leftStart+'px}' +
'to {left: '+leftEnd+'px}' +
'}';
zc.style.animationName="zcmove";
zc.style.animationDuration=time+"s";
}else if (fx==="l") { //向左移动
zc.style.transform="scaleX(1)";
zcCss.innerHTML='@keyframes zcmove2{' +
'from {left: '+leftEnd+'px}' +
'to {left: '+leftStart+'px}' +
'}';
zc.style.animationName="zcmove2";
zc.style.animationDuration=time+"s";
}
}
})();
</script>
