您的位置：首页 > Web前端 > JavaScript

Js运动动画系列9--多物体同时运动-封装运动框架

2016-07-11 11:50 585 查看

<head>
<title>5-2多物体同时运动</title>
<!--引用js文件，把运动代码封装起来 -->
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
ul li
{
list-style: none;
}
li
{
width: 200px;
height: 100px;
background: yellow;
margin-bottom:20px;
border: 4px solid #000;
fliter: alpha(opacity:30);
opacity: 0.3;
}
</style>
<script type="text/javascript" src="Scripts/PerfectMove.js"></script>
</head>
<body>
<ul>
<li id="li1"></li>
</ul>
</body>
</html>

<script type="text/javascript">
//链式动画:执行完当前动画，调用回调函数执行下一个动画
window.onload = function () {
var li1 = document.getElementById('li1');
li1.onmouseover = function () {
//statMove(li1, 'width', 400);
//statMove(li1, 'height', 200);
//只会执行高的运动，因为框架move.js那边方法一进来就clearInterval(obj.timer);宽度变化刚开始就清除
statMove(li1, {height: 200,width:400,opacity:100},8);//同时运动
}
li1.onmouseout = function () {
statMove(li1, { height: 100, width: 200, opacity: 30 }, 8);
}
}
</script>

PerfectMove.js

//move.js的完整版 PerfectMove.js 可同时运动
//move.js无法实现同时运动 statMove(obj, attr, iTarget,fn)只能一次运动执行一对键值，改用json可以实现同时运动

//获取目标元素样式
function getStyle(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr]; //获取样式支持IE
}
else {
return getComputedStyle(obj, false)[attr]; //支持火狐
}
}
//statMove(obj,{ attr1:iTarget2,attr1:iTarget2}, fn)多属性同时运动
function statMove(obj,json,value,fn) {//fn为回调函数
//方式一：alert(getStyle(obj,'width')); 200px; obj.style.offsetWidth 则是 204px
var flag = true; //假设同时运动都达到目标值
clearInterval(obj.timer);
obj.timer = setInterval(function () {
for (var attr in json) {
//1、获取值
var cul = 0;
if (attr == 'opacity') {//parseFloat小数点
cul = Math.round(parseFloat(getStyle(obj, attr)) * 100); //Math.round alert(0.7*100)=7.0000000000001需要做下处理要不然透明度100.998
}
else {
cul = parseInt(getStyle(obj, attr));
}
//2、算速度
speed = (json[attr] - cul) / value; //json[attr]目标属性的目标值
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
//3、检测停止
if (cul != json[attr]) {//得先判断同时运动完毕再关闭定时器
//clearInterval(obj.timer);if (fn) { fn();}
flag = false;
}
else {
flag = true;
}

if (attr == 'opacity') {
obj.style.filter = 'alpha(opacity:' + cul + speed + ')';
obj.style.opacity = (cul + speed) / 100;
}
//css样式高透明度字体大小都可以改变
else {
obj.style[attr] = cul + speed + 'px'; //obj.style.width 可以写成 obj.style['width']
}
}
if (flag == true) {
clearInterval(obj.timer);
if (fn) {
fn();
}
}
}, 30)
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 前端博客 javascript 动画

相关文章推荐

新的分享

章节导航