标签：
网页排版中如果有大量的元素动画并且使用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>
标签：
原文地址：http://www.cnblogs.com/happyfreelife/p/5520767.html
