Saber 酱的抱枕

万圣节到了٩(●ω●) و 别的群主早已穿上女仆装蓝白胖次白丝袜戴上项圈猫耳让自己成为万圣节的礼物，而我们群主却想着蒙混过关，一言不发，楼下保持队形 ٩(●ω●)و

做了一个魔理沙飞过的动画，会左右来回飞行。但在不支持css3的浏览器上，可能会看到魔理沙是倒着从右往左飞的。另外魔理沙开始飞行时，起点高度和终点高度都已经固定，如果你在动画过程中滚动页面，魔理沙在你视野中的位置也会改变。也许给魔理沙做一个独立的遮罩层可以解决此问题。

jq版本（现已弃用）：

<style>
    #wsj{display: block;position: absolute;z-index: 999;left: -158px;top: 350px;}
    body{overflow-x:hidden;}
</style>
<script>
	var wsjimg=new Image();
	wsjimg.src="/f/mls1.png";
	wsjimg.id="wsj";
	wsjimg.onload=function  () {
		document.body.appendChild(wsjimg);
		window.setTimeout("wsja()",1000);
		window.setInterval("wsja()", 4000);
	}
	function wsja () {
		if (parseInt($("#wsj").css("left"),10)<0) {
			$("#wsj").css({"top":window.scrollY+250+"px","transform":"scalex(1)"});
			$("#wsj").animate({left:"1920px",top:window.scrollY+50+"px"}, "slow", "swing");
		};
		if (parseInt($("#wsj").css("left"),10)>=1920) {
			$("#wsj").css({"top":window.scrollY+250+"px","transform":"scalex(-1)"});
			$("#wsj").animate({left:"-158px",top:window.scrollY+50+"px"}, "slow", "swing");	
		};
	}
</script>

另外我给jq动画设置的slow或fast参数似乎无效，求解。如果设置为毫秒，则运动卡顿。

css3版本，把js代码改了改，用css做动画效果：

<script>
	var wsjimg=new Image();
	wsjimg.src="/f/mls1.png";
	wsjimg.id="wsj";
	wsjimg.onload=function  () {
		document.body.appendChild(wsjimg);
		window.setTimeout("wsja()",1000);
		window.setInterval("wsja()", 4000);
	}
	function wsja () {
		if (parseInt($("#wsj").css("left"),10)<0) {
			$("#wsj").css({"top":window.scrollY+250+"px","transform":"scalex(1)","transition":"all 0s"});
			$("#wsj").css({left:"1920px",top:window.scrollY+50+"px","transition":"all 1.0s"});
		};
		if (parseInt($("#wsj").css("left"),10)>=1920) {
			$("#wsj").css({"top":window.scrollY+250+"px","transform":"scalex(-1)","transition":"all 0s"});
			$("#wsj").css({left:"-158px",top:window.scrollY+50+"px","transition":"all 1.0s"});
		};
	}
</script>

css默认的速度是从快到慢，随意设置时间也不会卡顿。但是图片后方会有残影，运动越慢越明显。

今天是万圣节了，不给糖就导弹！