简单的HTML5图片拖拽和CSS3转动动画效果代码



78 309 104



特效描述:简单的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

加群请备注:从官网了解到