*[iPhone Safari] webkitAnimation を使って移動 [#j34f2914]
#contents2_1(compact=true,depth=1-2)



&br;
*CSS を使って移動 [#ta3bd2da]
CSS を使って画像を移動します。移動後にもとの位置に戻ってしまいます。

#geshi(CSS){{

.slideToRight {
	-webkit-animation-name: "slideToRightAnimation";
	-webkit-animation-duration: 1s;
}
@-webkit-keyframes "slideToRightAnimation" {
	from {
		left: 0px;
	}
	to {
		left: 300px;
	}
}
}}


&br;
*JavaScript で CSS のクラスを指定して移動する [#v7c15a55]
これもCSS を使って画像を移動します。JavaScript で CSS のクラスを指定して移動しています。

#geshi(JavaScript){{
var element = document.getElementById("bigimage");
element.addEventListener("webkitAnimationEnd", function(e){
	e.currentTarget.removeEventListener("webkitAnimationEnd", arguments.callee, false);
	alert("webkitAnimationEnd");
}, false);
element.className = "slideToRight";
}}

#geshi(CSS){{

.slideToRight {
	-webkit-animation-name: "slideToRightAnimation";
	-webkit-animation-duration: 1s;
}
@-webkit-keyframes "slideToRightAnimation" {
	from {
		left: 0px;
	}
	to {
		left: 300px;
	}
}
}}


&br;
*移動後の位置を設定 [#ta3bd2da]
移動後の位置を JavaScritp で設定します。移動後に 300px の位置で止まります。


#geshi(JavaScript){{
var element = document.getElementById("bigimage");
element.addEventListener("webkitAnimationEnd", function(e){
	e.currentTarget.removeEventListener("webkitAnimationEnd", arguments.callee, false);
	alert("webkitAnimationEnd");
}, false);
element.className = "slideToRight";
// 移動後の位置を設定します
element.style.left = "300px";
}}


#geshi(CSS){{

.slideToRight {
	-webkit-animation-name: "slideToRightAnimation";
	-webkit-animation-duration: 1s;
}
@-webkit-keyframes "slideToRightAnimation" {
	from {
		left: 0px;
	}
	to {
		left: 300px;
	}
}
}}

&br;
*サンプル [#c07cfd1c]
iPhone で見てください
-http://wiki.minaco.net/data/javascript/mobile/


#comment_nospam
&br;
#counter



トップ   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS