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

javascript 动画效果(多物体缓冲运动,多物体透明度变化,匀速移入移出、链式运动、同时运动)

2019-08-08 21:05 1521 查看

多物体缓冲运动

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>多物体缓冲运动</title>
<style>
ul,
li {
list-style: none;
}

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

<script>
window.onload = function() {
var aLi = document.getElementsByTagName("li");
for (var i = 0; i < aLi.length; i++) {
// 存在连续选择li元素不恢复的bug,所以需要给每个li清除定时器
aLi[i].timer = null;
aLi[i].onmouseover = function() {
startMove(this, 400);
}
aLi[i].onmouseout = function() {
startMove(this, 200);
}
}
// 代表执行一个动画, 第一个参数代表所要执行的对象, 第二个参数代表所要执行对象的宽度
function startMove(obj, iTarget) {
clearInterval(obj.timer);
obj.timer = setInterval(function() {
// 想要改变li 元素的宽度,但不知道是哪一个,可以传一个参数obj来指定当前选中的 这个li元素
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.of
3ff7
fsetWidth + speed + "px";
}
}, 30)
}
}
</script>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>

多物体透明度修改

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JS动画之多物体透明度修改</title>
<style>
*{padding: 0;margin: 0;}

div{
width: 200px;
height: 100px;
background: red;
float: left;
margin: 10px;
opacity: 0.3;
}
</style>
<script>
window.onload=function(){
var oDiv=document.getElementsByTagName("div");
for(var i=0; i<oDiv.length; i++){

// 给每个div元素各自清除定时器仍存在bug,是因为之前设置了统一的透明度值,多物体运动中只能分别设置
oDiv[i].alpha=30;
oDiv[i].onmouseover=function(){
startMove(this,100);
};
oDiv[i].onmouseout=function(){
startMove(this,30);
}
}
}

// var alpha=30;
function startMove(obj,iTarget){
clearInterval(obj.timer);

obj.timer=setInterval(function(){
var speed=0;
if(obj.alpha>iTarget){
speed=-5;
}else{
speed=5;
}
if(obj.alpha == iTarget){
clearInterval(obj.timer);
}else{
obj.alpha += speed;
obj.style.opacity=obj.alpha/100;
}
},30);
}
</script>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
</body>
</html>

移入移出

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JS动画-移入移出</title>
<style type="text/css">
div {
width: 250px;
height: 30px;
background-color: red;
position: absolute;
left: -200px;
top: 50px;
}

span {
float: right;
color: #fff;
color: blue
}
</style>
<script>
window.onload = function() {
var oDiv = document.getElementById("div");
oDiv.onmouseover = function() {
startMove(0);
};
oDiv.onmouseout = function() {
startMove(-200);
}
}

var timer = null;
//不加会出错,清空样式
function startMove(iTarget) {
clearInterval(timer);
var oDiv = document.getElementById("div");
timer = setInterval(function() {
var speed = 0;
if (oDiv.offsetLeft > iTarget) {
speed = -5;
} else {
speed = 5;
}
if (oDiv.offsetLeft == iTarget) {
clearInterval(timer);
} else {
oDiv.style.left = oDiv.offsetLeft + speed + "px";
}
}, 30);
}
</script>
</head>
<body>
<div id="div">
<span>share</span>
</div>
</body>
</html>

链式运动

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>链式运动</title>
<style>
div {
width: 200px;
height: 100px;
border: 1px solid black;
background: red;
filter: alpha(opacity=30);
opacity: 0.3;
}
</style>
<script src="move.js"></script>
<script>
window.onload = function() {
var oDiv = document.getElementById("div");
oDiv.onmouseover = function() {
startMove(oDiv, "width", 400, function() {
startMove(oDiv, "height", 200, function() {
startMove(oDiv, "opacity", 100);
})
})
};
oDiv.onmouseout = function() {
startMove(oDiv, "opacity", 30, function() {
startMove(oDiv, "height", 100, function() {
startMove(oDiv, "width", 200);
})
})
}
}
/* 获得样式 */
function getStyle(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, null)[attr];
}
}

function startMove(obj, attr, iTarget, fun) {
clearInterval(obj.timer);
obj.timer = setInterval(function() {
// 取当前值
var icur = 0;
if (attr == "opacity") {
icur = parseFloat(getStyle(obj, attr)) * 100;
} else {
icur = parseInt(getStyle(obj, attr));
}
// 计算速度
var speed = (iTarget - icur) / 8;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
// 检测停止
if (icur == iTarget) {
clearInterval(obj.timer);
if (fun) { //当存在第四个参数fun时,调用这个fun函数
fun();
}
} 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)
}
</script>
</head>
<body>
<div id="div"></div>
</body>
</html>

同时运动

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>链式运动</title>
<style>
div {
width: 200px;
height: 100px;
border: 1px solid black;
background: red;
filter: alpha(opacity=30);
opacity: 0.3;
}
</style>
<script src="move.js"></script>
<script>
window.onload = function() {
var oDiv = document.getElementById("div");
oDiv.onmouseover = function() {
startMove(oDiv, {
width: 205,
height: 200,
opacity: 100
});
}
oDiv.onmouseout = function() {
startMove(oDiv, {
width: 200,
height: 100,
opacity: 30
});
}
}

function getStyle(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];
}
}

// 修改attr,iTarget为json
function startMove(obj, json, fun) {
var flage = true;
clearInterval(obj.timer);
obj.timer = setInterval(function() {
// 循环json中每个对值进行运动
for (var attr in json) {
// 取当前值
var icur = 0;
if (attr == "opacity") {
icur = parseFloat(getStyle(obj, attr)) * 100;
} else {
icur = parseInt(getStyle(obj, attr));
}
// 计算速度
var speed = (json[attr] - icur) / 8;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
// 检测停止
if (icur != json[attr]) {
flage = 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 (flage) {
clearInterval(obj.timer);
if (fun) {
fun();
}
}
}
}, 30)
}
</script>
</head>
<body>
<div id="div"></div>
</body>
</html>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: