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

jquery的animate动画效果函数用JS代码是如何实现的

2016-08-19 13:55 1221 查看

众所周知，jquery是一个封装了很多函数的JS代码库，页面上要做的很多的东西如果用JS代码实现是很费时费力的，所以才有了jquery这种封装好的代码库，帮助程序员快速开发web实现交互，其中有一个很常见的函数animate，只需要传入一些属性和属性需要改变的值以及回调函数等就可以实现很难的动画效果。调用起来很容易，但JS代码是如何实现的呢，下面我就贴上我封装好的一个JS代码的函数，可以实现同animate差不多的效果

我做了一个demo,实现了鼠标放上去飞机就向上移动并且逐渐透明然后从下面回来的效果，不是调用的jquery的animate，而是采用手打的JS代码来实现。

下面是具体代码：

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画案例</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="box">
<ul>
<li><div><img src="images/1.png"></div><p>出行</p></li>
<li><div><img src="images/1.png"></div><p>出行</p></li>
<li><div><img src="images/1.png"></div><p>出行</p></li>
<li><div><img src="images/1.png"></div><p>出行</p></li>
<li><div><img src="images/1.png"></div><p>出行</p></li>
<li><div><img src="images/1.png"></div><p>出行</p></li>
<li><div><img src="images/1.png"></div><p>出行</p></li>
<li><div><img src="images/1.png"></div><p>出行</p></li>
</ul>
</div>

<script type="text/javascript" src="script.js"></script>
</body>
</html>
style.css:

#box{
width: 280px;
height: 300px;
margin:0 auto;
background-color: #aaa;
text-align: center;

}
ul{
list-style: none;
display: block-inline;
height: 100%;
padding:0;
}
ul li{
margin: 10px 10px;
list-style: none;
display: block-inline;
float: left;
width: 50px;
height: 50px;
background-color: #fff;
text-align: center;
padding:0;
}
ul li div{
width: 100%;
height: 30px;
margin: 0px;
padding: 0px;
display: block-inline;
opacity: 1;
}
ul li p{
margin: 2px 0;
font-size: 10px;
font-family: '楷体';
color: #aaa;
}
script.js:

window.onload = function () {
var box = document.getElementById('box');
var aList = box.getElementsByTagName('li');
for (var i = 0; i < aList.length; i++) {

aList[i].onmouseover = function () {
var _this = this.getElementsByTagName('img')[0];
startMove(_this,{'margin-top':-25,'opacity':0},function () {
_this.style.marginTop = 50+'px';
startMove(_this,{'margin-top':2,'opacity':100},false);
}
);
};

}
};

/**
* [startMove description] 封装好的缓冲方式改变元素某个方向上的值
* @param {[type]} obj [description] 要改变的元素
* @param {[type]} target [description] 元素要改变成的目标值
* @param {[type]} attr [description] 元素需要改变的属性
* @return {[type]} [description]
*/
// function startMove(obj,{attr1:target1,attr2:target2},fn)
// 使用json格式接收参数可以接收多对参数，实现同时运动
function startMove(obj,json,fn) {
// 定义变化的速度
var speed;
clearInterval(obj.timer);
// 及时反映当前属性的变化
var length;
// 判断是否所有属性都到达了目标值的标杆
var flag;
obj.timer = setInterval(function () {
flag = true;
for(var attr in json){
if(attr == 'opacity'){
//如果传进来的属性是不透明度，需要使用以下代码获取其值
length = Math.round(parseFloat(getStyle(obj,attr))*100);
} else {
// length = obj.offsetWidth;//使用对象的offsetWidth属性取得对象的宽度
length = parseInt(getStyle(obj,attr));
}
//计算速度
speed = (json[attr] - length)/2;//计算出一个可以变化的速度，距离目标越近速度越小，反之则越大
speed = speed>0?Math.ceil(speed):Math.floor(speed);//防止速度出现-1到0和0到1的情况，出现则向上(正数)或向下取整(负数)
//判断停止还是运行
if(length != json[attr]){
flag = false;
}
length += speed;
if(attr == 'opacity'){
//针对IE浏览器
obj.style.filter = 'alpha(opacity:'+length+')';
obj.style.opacity = length/100;
}else{
// 等于obj.style.attr = length+'px'; attr表示某个属性例如width
obj.style[attr] = length+'px';
}
}
if(flag){
clearInterval(obj.timer);
// 当停止后执行，形成链式运动
if(fn){
fn();
}
}

}, 50);

}

//用于获取对象元素样式的值
function getStyle (obj,attr) {
//IE使用currentStyle,火狐使用getComputedStyle
if(obj.currentStyle){
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj,false)[attr];
}
}
images/1.png:这是飞机的图片

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

标签： javascript 动画 jquery

相关文章推荐

新的分享

章节导航