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

JS动画效果(移动、透明度、缓冲、多物体)

2017-10-24 23:46 579 查看

JavaScript中可以通过setInterval()函数来实现动态效果。

setInterval()函数设置一个定时器，可以按照指定周期调用函数或计算表达式。setInterval()可以不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

setInterval()函数用法：

//每隔3000毫秒输出"Hello world"
var timer = setInterval(function(){alert("Hello world"); }, 3000);

clearInterval()函数用法:

var timer = setInterval(function(){alert("Hello world"); }, 3000); //设置每3000毫秒输出"Hello world"
clearInterval(timer);  //取消定时器

移动动画

通过setInterval()设置定时器，周期性地修改div的left偏移属性，从而达到移动的效果。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>速度动画</title>
</head>
<style type="text/css">
body,div,span{
margin: 0px;
padding: 0px;
}
#div1 {
width: 200px;
left: -200px;
height: 200px;
background-color: red;
position: relative;
}
#div1 span{
width: 20px;
height: 50px;
position: absolute;
background-color: aqua;
top: 75px;
left: 200px;
}
</style>
<script type="text/javascript">
window.onload = function () {
var onDiv = document.getElementById("div1");
onDiv.onmouseover = function () {
onMove(0);
}
onDiv.onmouseout = function () {
onMove(-200);
}
}
var timer;
function onMove(target) {
clearInterval(timer);
var onDiv1 = document.getElementById("div1");
timer = setInterval(function () {
if(target>onDiv1.offsetLeft)
var speed = 10;
else
var speed = -10;
if(onDiv1.offsetLeft!=target)
onDiv1.style.left = onDiv1.offsetLeft + speed + "px";
else
clearInterval(timer);
},10)
}
</script>
<body>
<div id="div1">
<span>分享</span>
</div>
</body>
</html>

透明度动画

周期性地修改透明度的值实现鼠标移入移出div透明度变化。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>透明度动画</title>
</head>
<style>
body,div{
padding: 0px;
margin: 0px;
}
#div1{
width: 200px;
height: 200px;
background-color: red;
opacity: 0.3;
filter: alpha(opacity:30);
}
</style>
<script>
window.onload = function () {
onDiv = document.getElementById("div1");
onDiv.onmouseover = function () {
onMove(100);
}
onDiv.onmouseout = function () {
onMove(30);
}
}

var alpha = 30;
var timer = null;
var speed = 10;
function onMove(target) {
clearInterval(timer);
onDiv =document.getElementById("div1");
timer = setInterval(function () {
if(alpha < target){
alpha = alpha+speed;
}
else if(alpha > target){
alpha = alpha-speed;
}
else{
clearInterval(timer);
return;
}
onDiv.style.filter = "alpha(opacity:"+alpha+");";
onDiv.style.opacity = alpha/100;
},30);
}
</script>
<body>
<div id="div1"></div>
</body>
</html>

缓冲动画

现实中不是所有东西都是匀速移动的，在速度动画中移动是匀速的，下面例子在此基础上进行改进，定时器每次运行时修改变化速度可实现缓冲动画。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>缓冲动画</title>
</head>
<style type="text/css">
body,div,span{
margin: 0px;
padding: 0px;
}
#div1 {
width: 200px;
left: -200px;
height: 200px;
background-color: red;
position: relative;
}
#div1 span{
width: 20px;
height: 50px;
position: absolute;
background-color: aqua;
top: 75px;
left: 200px;
}
</style>
<script type="text/javascript">
window.onload = function () {
var onDiv = document.getElementById("div1");
onDiv.onmouseover = function () {
onMove(0);
}
onDiv.onmouseout = function () {
onMove(-200);
}
}
var timer = null;
function onMove(target) {
clearInterval(timer);
var onDiv1 = document.getElementById("div1");
timer = setInterval(function () {
var speed = (target - onDiv1.offsetLeft)/20;
speed = Math.floor(speed);
if(onDiv1.offsetLeft!=target)
onDiv1.style.left = onDiv1.offsetLeft + speed + "px";
else
clearInterval(timer);
},10)
}
</script>
<body>
<div id="div1">
<span>分享</span>
</div>
</body>
</html>

多物体动画

当需要对多个相似物体设置动画时，例如列表中的多个选项，各个物体之间不能共用物体。下例中需要对每一个li设置初始透明度、定时器。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多物体动画</title>
<style>
body,ul,li{
padding: 0px;
margin: 0px;
}
ul,li{
list-style: none;
}
li{
width: 200px;
height: 100px;
margin-top: 20px;
background-color: red;
filter: alpha(opacity:30);
opacity: 0.3;
}
</style>
<script>
window.onload = function () {
var allLi = document.getElementsByClassName("lis");
for(var i = 0;i < allLi.length;i++){
allLi[i].alpha = 30;
allLi[i].timer = null;
allLi[i].onmouseover = function () {
onMove(this,400);
}
allLi[i].onmouseout = function () {
onMove(this,200);
}
}
}
function onMove(obj,target) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var speed = (target - obj.offsetWidth)/30;
speed = (speed>0)?Math.ceil(speed):Math.floor(speed);
var cSpeed = (speed>0)?5:-5;
if(obj.offsetWidth!=target){
obj.style.width = obj.offsetWidth + speed + "px";
if(obj.alpha<=100 && obj.alpha>=30){
obj.alpha = obj.alpha + cSpeed;
if(obj.alpha>100)
obj.alpha = 100;
if(obj.alpha<30)
obj.alpha = 30;
obj.style.opacity = obj.alpha/100;
obj.style.filter = "alpha(opacity:"+ obj.alpha +")";
}
}
else{
clearInterval(obj.timer);
}
},30)

}
</script>
</head>
<body>
<div>
<ul>
<li class="lis"></li>
<li class="lis"></li>
<li class="lis"></li>
</ul>
</div>

</body>
</html>

杂项

body、ul、li自带默认边距对程序产生影响。使用

padding:0px;margin:0px

消除

消除无序列表符号:

list-style: none;

设置透明度：

filter: alpha(opacity:30); //IE浏览器
opacity: 0.3; //firefox等

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

标签：

相关文章推荐

新的分享

章节导航