簡單的HTML5圖片拖拽和CSS3轉動動畫效果代碼



82 324 109



特效描述:簡單的HTML5 圖片拖拽 CSS3轉動動畫效果,HTML5拖拽和CSS3基本轉動動畫

代碼結構

1. HTML代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>html5_拖拽</title>
<style type="text/css">
#container,#drag{
	float:left; 
	width:420px; 
	height:420px;
	margin:10px;
	padding:10px;
	border:1px solid #aaaaaa;
	text-align: center;
}
#container {
	background-color: #E95a44;
}
#drag {
	background-color: rgb(228, 104, 104);
}
/*定義動畫幀*/
@keyframes myMove{
	from { transform: rotate(2deg); } 
	20% { transform: rotate(5deg); } 
	60% { transform: rotate(7deg); } 
	80% { transform: rotate(5deg); } 
	to { transform: rotate(2deg); } 
}
@-webkit-keyframes myMove{
	from { -webkit-transform: rotate(2deg); } 
	20% { -webkit-transform: rotate(5deg); } 
	60% { -webkit-transform: rotate(7deg); } 
	80% { -webkit-transform: rotate(5deg); } 
	to { -webkit-transform: rotate(2deg); } 
}
@-moz-keyframes myMove{
	from { -moz-transform: rotate(2deg); } 
	20% { -moz-transform: rotate(5deg); } 
	60% { -moz-transform: rotate(7deg); } 
	80% { -moz-transform: rotate(5deg); } 
	to { -moz-transform: rotate(2deg); } 
}
@-ms-keyframes myMove{
	from { -ms-transform: rotate(2deg); } 
	20% { -ms-transform: rotate(5deg); } 
	60% { -ms-transform: rotate(7deg); } 
	80% { -ms-transform: rotate(5deg); } 
	to { -ms-transform: rotate(2deg); } 
}
@-o-keyframes myMove{
	from { -ms-transform: rotate(2deg); } 
	20% { -ms-transform: rotate(5deg); } 
	60% { -ms-transform: rotate(7deg); } 
	80% { -ms-transform: rotate(5deg); } 
	to { -ms-transform: rotate(2deg); } 
}
#content #dragImg {
	margin-top:20px;
	transform: rotate(2deg);			/*Firefox 16+, IE 10+, Opera 12.10+*/
	-webkit-transform: rotate(2deg);	/*Chrome, Safari 3.1+*/
	-moz-transform: rotate(2deg);		/*Firefox 3.5-15*/
	-ms-transform: rotate(2deg); 		/*IE9+*/
	-o-transform: rotate(2deg);  		/* Opera 10.50-12.00 */ 
	animation:myMove 0.2s 5 ease-in;
	-webkit-animation:myMove 0.2s 5 ease-in;
	-moz-animation:myMove 0.2s 5 ease-in;
	-ms-animation:myMove 0.2s 5 ease-in;
	-o-animation:swing 0.2s 5 ease-in;
}
</style>
</head>
<body id="content">
<div id="drag"  ondragover="allowDrop(event)" >
<img src="tt.jpg" draggable="true" id="dragImg" />
</div>
<div id="container" ondrop="drop(event)" ondragover="allowDrop(event)" ></div>
<script type="text/javascript" charset="utf-8">
var moveElement = document.getElementById("dragImg");
if(moveElement.attachEvent){  //ie專屬attachEvent
	moveElement.attachEvent('ondragstart',function(event){
		var eve = event ? event : window.event;  //兼容火狐,ie瀏覽器中用window.event 對象表示事件對象
		var obj = eve.srcElement ? eve.srcElement : eve.target;  //兼容火狐,ie中有srcElement
		eve.dataTransfer.setData("Text",obj.id);
	});
}else{   //(moveElement.addEventListener)情況
	moveElement.addEventListener("dragstart", function (event) { 
		event.dataTransfer.setData("Text",event.target.id);
	}, false);
}
function allowDrop(event){
		var eve = event ? event : window.event;
		eve.preventDefault();
}
function drop(event){
	event.preventDefault();
	var data = event.dataTransfer.getData("Text");
	event.target.appendChild(document.getElementById(data));
}
</script>
</body>
</html>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 拖動 拖拽 拖動插件 拖拽插件 滑動星星打分 其他 圖片拖動 圖片拖拽 震動
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子