标签：
<!DOCTYPE html>
<html>
<head>
<title>使用数据绑定的方式来执行元素的动画</title>
<meta charset="utf-8">
<style>
*{margin: 0;padding: 0;}
body{background: #eee;}
ul,
ol{list-style: none;}
.container{position: relative;width: 600px;height: 600px;margin: 50px auto;}
.container ul{position: relative;height: 100%;}
.container ul li{position: absolute;border-radius: 50%;opacity: .3;filter: alpha(opacity=30);}
.container ul li.item-1{top: 0;left: 0;width: 200px;height: 200px;background: #f03;}
.container ul li.item-2{top: 0;right: 0;width: 160px;height: 160px;background: #cf0;}
.container ul li.item-3{right: 0;bottom: 0;width: 120px;height: 120px;background: #069;}
.container ul li.item-4{bottom: 0;left: 0;width: 80px;height: 80px;background: #f60;}
.container .btn{position: absolute;top: 50%;right: 0;width: 100px;margin-top: -20px;background: #fff;border-radius: 3px;cursor: pointer;font: 14px/40px "Consolas";color: #333;text-align: center;letter-spacing: 1px;}
.container .btn.animate{right: 0;}
.container .btn.reset{left: 0;}
</style>
</head>
<body>
<div class="container">
<!-- <ul>
<li class="item-1" data-animate="{top: 50%, left: 50%, marginLeft: -50, marginTop: -50, opacity: 1}"></li>
<li class="item-2" data-animate="{top: 50%, right: 50%, marginRight: -40, marginTop: -40, opacity: 1}"></li>
<li class="item-3" data-animate="{bottom: 50%, right: 50%, marginRight: -30, marginBottom: -30, opacity: 1}"></li>
<li class="item-4" data-animate="{bottom: 50%, left: 50%, marginLeft: -20, marginBottom: -20, opacity: 1}"></li>
</ul> -->
<ul>
<li class="item-1"></li>
<li class="item-2"></li>
<li class="item-3"></li>
<li class="item-4"></li>
</ul>
<a class="btn animate">Animate</a>
<a class="btn reset">Reset</a>
</div>
</body>
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script>
$.fn.dataAnimate = function(duration, callback) {
String.prototype.stringToObj = function() {
var obj = {},
arr = this.replace(/(^\s+)|(\s+$)/g, ‘‘)
.replace(/(\{)|(\})/g, ‘‘)
.split(‘,‘);
for (var i = 0, len = arr.length; i < len; i++) {
var key = arr[i].split(‘:‘)[0].replace(/(^\s+)|(\s+$)/g, ‘‘),
value = arr[i].split(‘:‘)[1].replace(/(^\s+)|(\s+$)/g, ‘‘);
obj[key] = value;
}
return obj;
};
if (typeof duration === ‘function‘) {
callback = arguments[0];
duration = 300;
}
return this.each(function() {
var prop = {};
if ($(this).data(‘animate‘)) {
prop = $(this).data(‘animate‘).stringToObj();
}
$(this).stop(true, false).animate(prop, {
duration: duration,
complete: function() {
if (callback) {
callback.call(this);
}
}
});
});
};
var begin = [
‘{top: 0, left : 0, marginLeft : 0, marginTop : 0, opacity: 0.3}‘,
‘{top: 0, right: 0, marginRight: 0, marginTop : 0, opacity: 0.3}‘,
‘{bottom: 0, right: 0, marginRight: 0, marginBottom: 0, opacity: 0.3}‘,
‘{bottom: 0, left : 0, marginLeft : 0, marginBottom: 0, opacity: 0.3}‘
];
var end = [
‘{top : 50%, left : 50%, marginLeft : -100, marginTop : -100, opacity: 0.8}‘,
‘{top : 50%, right: 50%, marginRight: -80, marginTop : -80, opacity: 0.8}‘,
‘{bottom: 50%, right: 50%, marginRight: -60, marginBottom: -60, opacity: 0.8}‘,
‘{bottom: 50%, left : 50%, marginLeft : -40, marginBottom: -40, opacity: 0.8}‘
];
$(‘.btn‘).click(function() {
if ($(this).hasClass(‘animate‘)) {
$(‘ul li‘).each(function(index) {
$(this).data(‘animate‘, end[index]);
});
}
if ($(this).hasClass(‘reset‘)) {
$(‘ul li‘).each(function(index) {
$(this).data(‘animate‘, begin[index]);
});
}
$(‘ul li‘).dataAnimate();
});
</script>
</html>
标签：
原文地址：http://www.cnblogs.com/happyfreelife/p/5520767.html
