首页 > 其他分享 >JS动画框架及案例

JS动画框架及案例

时间:2022-11-28 20:06:06浏览次数:43  
标签:function 动画 obj timer JS 案例 var oDiv speed


JS动画效果:
综合——运动框架 move.js
1、简单动画
1-1、速度动画 D01_share.html
1-2、透明度动画 D02_opacity.html
2、缓冲动画
2-1、缓冲动画 D03_speed.html
3、多物体动画
3-1、多物体动画 D04_morespart01.html D04_morespart02.html
3-2、获取样式 D05_getStyle01.html D05_getStyle02.html
3-3、任意属性值(一) D06_anyValue.html
3-4、任意属性值(二)
4、链式动画
4-1、链式动画 D07_chainAnimation.html
5、同时运动
5-1、同时运动 D08_json.html(json的介绍) D08_sametimeMove.html
5-2、完美运动框架 move.js
6、动画案例

速度动画 D01_share.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>速度动画</title>
<style>
* {
margin: 0;
padding: 0;
}
#div1 {
width: 200px;
height: 250px;
background-color: #807a62;
position: relative;
left: -200px;
top: 0;
}
#div1 span {
width: 20px; /* 行内元素脱离文本流后可以设置宽高*/
height: 50px;
background-color: aquamarine;
position: absolute;
left: 200px;
top: 75px;
text-align: center;
}
</style>

<script>
var oDiv;
window.onload = function() {
oDiv = document.getElementById('div1');
/*oDiv.onmouseover = startMoveIn;
oDiv.onmouseout = startMoveOut;*/

oDiv.onmouseover = function() {
//startMove(10, 0);
startMove02(0);
};
oDiv.onmouseout = function() {
//startMove(-10, -200);
startMove02(-200);
};
};

var timer=null;
/*startMoveIn() 和 startMoveOut()方法相似,可以进行提取合成 --> startMove()*/
/*function startMoveIn() {
clearInterval(timer);

timer = setInterval(function() {
if(oDiv.offsetLeft == 0) {
clearInterval(timer);
} else {
oDiv.style.left = oDiv.offsetLeft + 10 + 'px';
}
},30);
}

function startMoveOut() {
clearInterval(timer);

timer = setInterval(function() {
if(oDiv.offsetLeft == -200) {
clearInterval(timer);
} else {
oDiv.style.left = oDiv.offsetLeft - 10 + 'px';
}
},30)
}*/

function startMove(speed, iTarget) {
clearInterval(timer);

timer = setInterval(function() {
if(oDiv.offsetLeft == iTarget) {
clearInterval(timer);
} else {
oDiv.style.left = oDiv.offsetLeft + speed + 'px';
}
},30);
}

//除去speed参数
function startMove02(iTarget) {
clearInterval(timer);

var speed;
if(oDiv.offsetLeft > iTarget) {
speed = -10;
} else {
speed = 10;
}

timer = setInterval(function() {
if(oDiv.offsetLeft == iTarget) {
clearInterval(timer);
} else {
oDiv.style.left = oDiv.offsetLeft + speed + 'px';
}
},30);
}
</script>
</head>
<body>
<div id="div1"><span id="share">分享</span></div>
</body>
</html>



透明度动画  D02_opacity.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>透明度动画</title>
<style>
body,div{
margin: 0;
padding: 0;
}
#div1 {
width: 200px;
height: 200px;
background: red;
filter: alpha(opacity=30); /*基于IE*/
opacity: 0.3; /*基于火狐、Chrome*/
}
</style>

<script>
window.onload = function() {
var oDiv = document.getElementById('div1');
oDiv.onmouseover = function() {
startMove(100);
};
oDiv.onmouseout = function() {
startMove(30);
};
};

var timer = null;
var alpha = 30;
function startMove(iTarget) {
var oDiv = document.getElementById('div1');

//解决定时器叠加的问题
clearInterval(timer);
timer = setInterval(function() {
var speed = 0;
if(alpha > iTarget) {
speed = -10;
} else {
speed = 10;
}

if(alpha == iTarget) {
clearInterval(timer);
} else {
alpha += speed;
oDiv.style.filter = 'alpha(opacity='+alpha+')';
oDiv.style.opacity = alpha / 100;
}
},30);
}
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>


缓冲动画  D03_speed.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>缓冲动画</title>
<style>
* {
margin: 0;
padding: 0;
}
#div1 {
width: 200px;
height: 250px;
background-color: #807a62;
position: relative;
left: -200px;
top: 0;
}
#div1 span {
width: 20px; /* 行内元素脱离文本流后可以设置宽高*/
height: 50px;
background-color: aquamarine;
position: absolute;
left: 200px;
top: 75px;
text-align: center;
}
</style>

<script>
var oDiv;
window.onload = function() {
oDiv = document.getElementById('div1');
/*oDiv.onmouseover = startMoveIn;
oDiv.onmouseout = startMoveOut;*/

oDiv.onmouseover = function() {
//startMove(10, 0);
startMove02(0);
};
oDiv.onmouseout = function() {
//startMove(-10, -200);
startMove02(-200);
};
};

var timer=null;

//除去speed参数
function startMove02(iTarget) {
clearInterval(timer);

timer = setInterval(function() {
var speed = (iTarget - oDiv.offsetLeft) / 10;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

if(oDiv.offsetLeft == iTarget) {
clearInterval(timer);
} else {
oDiv.style.left = oDiv.offsetLeft + speed + 'px';
}
},30);
}
</script>
</head>
<body>
<div id="div1"><span id="share">分享</span></div>
</body>
</html>


多物体动画  D04_morespart01.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多物体动画</title>

<style>
ul {
list-style: none;
}
ul li {
width: 200px;
height: 100px;
background: yellow;
margin-bottom: 20px;
}
</style>

<script>
window.onload = function() {
var aLi = document.getElementsByTagName('li');
for(var i = 0; i<aLi.length; i++) {
aLi[i].timer = null; //为每一个li加一个定时器
aLi[i].onmouseover = function() {
startMove(this,400);
};
aLi[i].onmouseout = function() {
startMove(this,200);
};
}
};

//var timer = null;
function startMove(obj, iTarget) {
clearInterval(obj.timer);
obj.timer = setInterval(function() {
var speed = (iTarget - obj.offsetWidth) / 8;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

if(obj.offsetWidth == iTarget) {
clearInterval(obj.timer);
} else {
obj.style.width = obj.offsetWidth + speed + 'px';
}
},30);
}


</script>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>


D04_morespart02.html


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多物体动画</title>
<style>
div{
width: 300px;
height: 300px;
background: red;
float: left;
margin: 10px;

filter: alpha(opacity=30);
opacity: 0.3;
}
</style>

<script>
var ds;
window.onload = function() {
ds = document.getElementsByTagName('div');

for(var i = 0; i < ds.length; i++) {
ds[i].timer = null;
ds[i].alpha = 30;

ds[i].onmouseover = function() {
startChange(this, 100);
};
ds[i].onmouseout = function() {
startChange(this, 30);
};
}
}

function startChange(obj, iTarget) {
clearInterval(obj.timer);

obj.timer = setInterval(function() {
var speed = (iTarget - obj.alpha) / 8;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

if(obj.alpha == iTarget) {
clearInterval(obj.timer);
} else {
obj.alpha += speed;
obj.style.filter = 'alpha(opacity=' + obj.alpha + ')';
obj.style.opacity = obj.alpha / 100;
}
}, 30);
}

</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>


获取样式  D05_getStyle01.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取样式</title>
<style>
#div1 {
width: 200px;
height: 200px;
background: red;
border: 2px solid #000;
font-size: 12px;
color: #fff;
}
</style>

<script>
var oDiv;
window.onload = function() {
oDiv = document.getElementById('div1');
setInterval(function() {
//oDiv.style.width = parseInt(getStyle(oDiv, 'width')) - 1 + 'px';
oDiv.style.fontSize = parseInt(getStyle(oDiv, 'fontSize')) + 1 + 'px';
}, 30);
};

//获取样式
function getStyle(obj, attr) {
if(obj.currentStyle) { //currentStyle 针对IE浏览器
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj,false)[attr]; //getComputedStyle 针对火狐浏览器
}
}
</script>
</head>
<body>
<div id="div1">font-size</div>
</body>
</html>


D05_getStyle02.html


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取样式</title>
<style>
ul {
list-style: none;
}
ul li {
width: 200px;
height: 100px;
background: yellow;
margin-bottom: 20px;
border: 1px solid yellowgreen;
}

ul li:hover {
box-shadow: 0 0 7px 2px #0CC;
}
</style>
<script>
var aLi;
window.onload = function() {
aLi = document.getElementsByTagName('li');

for(var i = 0; i < aLi.length; i++) {
aLi[i].timer = null;
aLi[i].onmouseover = function() {
startChange(this, 400);
};
aLi[i].onmouseout = function() {
startChange(this, 200);
};
}
};

function startChange(obj, iTarget) {
clearInterval(obj.timer);

obj.timer = setInterval(function() {
var icur = parseInt(getStyle(obj, 'width'));
var speed = (iTarget - icur) / 10;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

if(icur == iTarget) {
clearInterval(obj.timer);
} else {
obj.style.width = icur + speed + 'px';
}
}, 30);
}

function getStyle(obj, attr) {
if(obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];
}
}
</script>
</head>
<body>

</body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</html>


任意属性值  D06_anyValue.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>任意属性值</title>
<style>
ul {
list-style: none;
}
ul li {
width: 200px;
height: 100px;
background: yellow;
margin-bottom: 20px;
border: 1px solid yellowgreen;
filter: alpha(opacity=50);
opacity: 0.5;
}

ul li:hover {
box-shadow: 0 0 7px 2px #0CC;
}
</style>
<script>
var li1, li2, li3;
window.onload = function() {
li1 = document.getElementById('li1');
li2 = document.getElementById('li2');
li3 = document.getElementById('li3');

li1.onmouseover = function() {
startChange(this, 'height', 400);
};
li1.onmouseout = function() {
startChange(this, 'height', 100);
};
li2.onmouseover = function() {
startChange(this, 'width', 400);
};
li2.onmouseout = function() {
startChange(this, 'width', 200);
};
li3.onmouseover = function() {
startChange(this, 'opacity', 100);
};
li3.onmouseout = function() {
startChange(this, 'opacity', 50);
};
};

function startChange(obj, attr, iTarget) {
clearInterval(obj.timer);

obj.timer = setInterval(function() {
var icur = 0;
if(attr == 'opacity') {
icur = Math.round(parseFloat(getStyle(obj, attr))*100);
} else {
icur = parseInt(getStyle(obj, attr));
}

var speed = (iTarget - icur) / 10;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

if(icur == iTarget) {
clearInterval(obj.timer);
} else {
if(attr == 'opacity') {
obj.style.filter = 'alpha(opacity=' + (icur + speed) + ')';
obj.style.opacity = (icur + speed) / 100;
} else {
obj.style[attr] = icur + speed + 'px';
}
}
}, 30);
}

function getStyle(obj, attr) {
if(obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];
}
}
</script>
</head>
<body>

</body>
<ul>
<li id="li1"><p>我是高度改变~</p></li>
<li id="li2"><p>我是宽度改变~</p></li>
<li id="li3"><p>我是透明度改变~</p></li>
</ul>
</html>


JS动画框架  move.js

/**
* Created by DreamBoy on 2016/1/22.
*/
//获取对象样式,如 getStyle(obj, 'width')
function getStyle(obj, attr) {
if(obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];
}
}

//动画效果,如 startMove(obj, 'width', 200)
// fn是回调函数,如果fn有传入的话,动画结束后会执行给函数——》可以形成 链式动画
/*function startMove(obj, attr, iTarget, fn) {
clearInterval(obj.timer);

obj.timer = setInterval(function() {
//1.取当前的值
var icur = 0;
if(attr == 'opacity') {
icur = Math.round(parseFloat(getStyle(obj, attr))*100);
} else {
icur = parseInt(getStyle(obj, attr));
}

//2.计算速度
var speed = (iTarget - icur) / 10;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

//3.检测停止
if(icur == iTarget) {
clearInterval(obj.timer);
if(fn) {
fn();
}
} else {
if(attr == 'opacity') {
obj.style.filter = 'alpha(opacity=' + (icur + speed) + ')';
obj.style.opacity = (icur + speed) / 100;
} else {
obj.style[attr] = icur + speed + 'px';
}
}
}, 30);
}*/

//修改——> 不同属性变化的同时运行(使用json 属性值:目标值)
// startMove(ojb,{attr1:itarget1, attr2:itarget2},fn)
function startMove(obj, json, fn) {
clearInterval(obj.timer);
obj.timer = setInterval(function() {
var flag = true;
for(var attr in json) {
//1.取当前的值
var icur = 0;
if(attr == 'opacity') {
icur = Math.round(parseFloat(getStyle(obj, attr))*100);
} else {
icur = parseInt(getStyle(obj, attr));
}

//2.计算速度
var speed = (json[attr] - icur) / 10;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

//3.检测停止
if(icur != json[attr]) {
flag = false;

if(attr == 'opacity') {
obj.style.filter = 'alpha(opacity=' + (icur + speed) + ')';
obj.style.opacity = (icur + speed) / 100;
} else {
obj.style[attr] = icur + speed + 'px';
}
}
}

if(flag) {
clearInterval(obj.timer);
//obj.timer = null;
if(fn) {
fn();
}
}
}, 30);
}



链式动画  D07_chainAnimation.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链式动画</title>

<style>
body, ul, li{
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
ul li {
width: 200px;
height: 100px;
background: yellow;
margin-bottom: 20px;
border: 4px solid #000;
filter: alpha(opacity=30);
opacity: 0.3;
}
</style>

<script src="move.js"></script>
<script>
window.onload = function() {
var li1 = document.getElementById('li1');
li1.onmouseover = function() {
startMove(li1, 'width', 400, function() {
startMove(li1, 'height', 200, function() {
startMove(li1, 'opacity', 100);
});
});
};
li1.onmouseout = function() {
startMove(li1, 'opacity', 30, function() {
startMove(li1, 'height', 100, function() {
startMove(li1, 'width', 200);
});
});
}
};
</script>
</head>
<body>
<ul>
<li id="li1"></li>
</ul>
</body>
</html>


json介绍  D08_json.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>json介绍</title>
<script>
//定义一个json
var json = {
a:12,
b:13
};

//遍历json
for(var i in json) {
document.write(i + ":" + json[i] + "<br/>");
}
</script>
</head>
<body>

</body>
</html>


同时运动  D08_sametimeMove.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>同时运动</title>
<style>
ul {
list-style: none;
}
ul li {
width: 200px;
height: 100px;
background: yellow;
margin-bottom: 20px;
border: 4px solid #000;
filter: alpha(opacity=30);
opacity: 0.3;
}
ul li:hover {
box-shadow: 0 0 7px 4px #ccc;
}
</style>
<script src="move.js"></script>
<script>
window.onload = function() {
var oLi = document.getElementById("li1");
oLi.onmouseover = function() {
startMove(oLi, {'width':400, 'height':200, 'opacity': 100}, function() {
startMove(oLi, {'width': 600});
});
};
oLi.onmouseout = function() {
startMove(oLi, {'width':200, 'height':100, 'opacity': 30});
};
}
</script>
</head>
<body>
<ul>
<li id="li1"></li>
</ul>
</body>
</html>


JS动画案例  D09_JSAnimationDemo.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS动画案例</title>

<style>
#move {
width: 300px;
border: 1px solid #ccc;
margin: 0 auto;
padding: 10px;
overflow: hidden;
}

#move a {
float: left;
color: red;
font-size: 10px;
/*border: 1px solid #00CCCC;*/
padding: 35px 30px 0 30px;
margin: 20px 0 20px 10px;

position: relative;
text-decoration: none;
line-height: 25px;
overflow: hidden;
}

#move a i{
position: absolute;
top: 20px;
left: 0;
display: inline-block;
width: 100%;
text-align: center;
filter: alpha(opacity=100);
opacity: 1;
}

#move a:hover {
box-shadow: 0 0 7px 4px #ccc;
}
</style>

<script src="move.js"></script>
<script>
window.onload = function() {
var oMove = document.getElementById('move');
var aLi = oMove.getElementsByTagName('a');

var k=0;
for(var i = 0; i < aLi.length; i++) {
aLi[i].onmouseover = function() {
var _this = this.getElementsByTagName('i')[0];
startMove(_this, {'top':-25, 'opacity': 0}, function() {
_this.style.top = 35 + 'px';
startMove(_this, {'top':20, 'opacity': 100});
});
};
}
};
</script>
</head>
<body>
<div id="move">
<a href="#"><i><img src="img/caipiao.png"></i><p>彩票</p></a>
<a href="#"><i><img src="img/movie.png"></i><p>电影</p></a>
<a href="#"><i><img src="img/music.png"></i><p>音乐</p></a>
<a href="#"><i><img src="img/jiaofei.png"></i><p>缴费</p></a>
<a href="#"><i><img src="img/licai.png"></i><p>理财</p></a>
<a href="#"><i><img src="img/food.png"></i><p>外卖</p></a>
</div>
</body>
</html>


结果演示:

JS动画框架及案例_Javascript

鼠标移动到图标处,发生动画效果:

JS动画框架及案例_Javascript_02

原素材如下:

JS动画框架及案例_宽高_03

  caipiao.png   

JS动画框架及案例_Javascript_04

  movie.png   

JS动画框架及案例_宽高_05

  music.png   

JS动画框架及案例_动画_06

  jiaofei.png   

JS动画框架及案例_i++_07

  licai.png   

JS动画框架及案例_i++_08

  food.png


标签:function,动画,obj,timer,JS,案例,var,oDiv,speed
From: https://blog.51cto.com/u_15894233/5893597

相关文章

  • xml_解析_Jsoup_快速入门以及Jsoup对象
    xml_解析_Jsoup_快速入门快速入门:1.导入jar包:2.获取Document对象:3.获取对应的标签Element对象:4.获取数据publicclassJsoupDemo1{publicst......
  • js基础笔记学习226练习2之1
    全选和反选 checked控制选中......
  • Java:Hutool工具箱之hutool-jsonJSON数据读取转换处理
    文档https://hutool.cn/docs/#/json/概述依赖<dependency><groupId>cn.hutool</groupId><artifactId>hutool-json</artifactId><version>5.8.10</versi......
  • JSP知识随手记
    目录​​目录​​​​介绍​​​​JSP运行原理​​​​JSP最佳实践​​​JSP指令​​​page指令​​​​include指令​​​​taglib指令​​​JSP九大内置对象​​​out隐式......
  • JSP中的自定义标签
    目录​​目录​​​​简介​​​​入门案例​​​​自定义标签功能扩展​​​​传统自定义标签的运行原理​​​传统自定义标签的使用​​​控制JSP页面部分内容执行​​​......
  • AngularJS自学之路——知识点记录(一)
    AngularJS(以下知识点摘抄自《AngularJS权威教程》一书。)1、ng-app指令标记了AngularJS脚本的作用域;2、AngularJS应用引导过程有3个重要点:1)注入器(injector)将用于创建此应用程......
  • jsp servlet 中的页面路径问题
    user是项目根目录下的一个子目录。<!--修改前的--><framesetrows="80,*"><framesrc="top.jsp"name="top"><framesetcols="10%,*"><framesrc="/user/left.jsp"......
  • 记一次 从servlet传参数到jsp页面出现乱码问题的解决参考
    rs=conn.executeQuery(sql);while(rs.next()){i++;//编号加1p_code=rs.getString("code");p_name=rs.getString("name");p_price=rs.getD......
  • 一个可以防止刷新的JSP计数器
    一个可以防止刷新的JSP计数器<%@pagecontentType="text/html;charset=gb2312"%><!--jsp(SUN企业级应用的首选)计数器--><%--以前学ASP时,用ASP做防止刷新的计数器很......
  • JSP中filter过滤器验证用户登录
    JSP中filter过滤器验证用户登录现在JSP使用越来越广泛了,尤其是很多政府的网站都采用了JSP技术,其功能强大且安全。初学者很多有这么个问题,就是,网站的一个权限设置,比如......