网页排版中如果有大量的元素动画并且使用jquery的animate来生成，写出来的js代码又多又乱；
换一种方式：把动画的属性绑定到动画元素上，再写一个通用的方法去读取这些属性然后自动的生成对应的动画；
或许这样可以省点力气，看起来也更加直观。
<!DOCTYPE html>
<html>
<head>
<title>使用数据绑定的方式来执行元素的动画</title>
<meta charset="utf-8">
</head>
<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;opacity: .3;filter: alpha(opacity=30);border-radius: 10%;}
.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.start{right: 0;}
.container .btn.reset{left: 0;}
</style>
<body>
<div class="container">
<ul>
<li class="item-1" data-animate="{top: 300, left: 300, marginLeft: -100, marginTop: -100, opacity: 0.8, borderRadius: 50%}"></li>
<li class="item-2" data-animate="{top: 300, right: 300, marginRight: -80, marginTop: -80, opacity: 0.8, borderRadius: 50%}"></li>
<li class="item-3" data-animate="{bottom: 300, right: 300, marginRight: -60, marginBottom: -60, opacity: 0.8, borderRadius: 50%}"></li>
<li class="item-4" data-animate="{bottom: 300, left: 300, marginLeft: -40, marginBottom: -40, opacity: 0.8, borderRadius: 50%}"></li>
</ul>
<a class="btn start">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;
};
var isAnimateBack;
if (arguments[0] === ‘back‘) {
isAnimateBack = true;
}
if (typeof duration === ‘function‘) {
callback = arguments[0];
duration = 300;
}
/**
* 在ie8中
* 元素的right属性, bottom属性
* 从百分比过渡到像素时会出现异常，尽量不要使用这两个属性
*/
return this.each(function() {
var targetProp = {}, initProp = {};
if (!isAnimateBack) {
if ($(this).data(‘animate‘)) {
targetProp = $(this).data(‘animate‘).stringToObj();
}
for (var key in targetProp) {
initProp[key] = $(this).css(key);
}
$(this).data(‘animateBack‘, initProp);
} else {
targetProp = $(this).data(‘animateBack‘);
}
$(this).stop(true, false).animate(targetProp, {
duration: duration,
complete: function() {
if (callback) {
callback.call(this);
}
}
});
});
};
$(‘.btn‘).click(function() {
if ($(this).hasClass(‘start‘)) {
$(‘ul li‘).dataAnimate();
} else {
$(‘ul li‘).dataAnimate(‘back‘);
}
});
</script>
</html>
时间： 2024-12-20 01:19:19