JS速度動畫
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS速度動畫</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#div1 {
width: 200px;
height: 200px;
background: red;
position: relative;
left: -200px;
}
#div1 span {
width: 20px;
height: 50px;
background: blue;
position: absolute;
left: 200px;
top: 75px;
}
</style>
<script type="text/javascript">
window.onload = function() {
var odiv = document.getElementById("div1");
odiv.onmouseover = function() {
starmove(0);
};
odiv.onmouseout = function() {
starmove(-200);
};
};
var timer = null;
function starmove(itarget) {
clearInterval(timer);
var odiv = document.getElementById("div1");
timer = setInterval(function() {
var speed = 0;
if (odiv.offsetLeft < itarget) {
speed = 10;
} else {
speed = -10;
}
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>
JS透明度動畫
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS速度動畫</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#div1 {
width: 200px;
height: 200px;
background: red;
filter: alpha(opacity:30);
opacity: 0.3;
}
#div1 span {
width: 20px;
height: 50px;
background: blue;
position: absolute;
left: 200px;
top: 75px;
}
</style>
<script type="text/javascript">
window.onload = function() {
var odiv = document.getElementById("div1");
odiv.onmouseover = function() {
starmove(100);
};
odiv.onmouseout = function() {
starmove(30);
};
};
var timer = null;
var alpha = 30;
function starmove(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>
JS緩沖動畫
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS速度動畫</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#div1 {
width: 200px;
height: 200px;
background: red;
position: relative;
left: -200px;
}
#div1 span {
width: 20px;
height: 50px;
background: blue;
position: absolute;
left: 200px;
top: 75px;
}
</style>
<script type="text/javascript">
window.onload = function() {
var odiv = document.getElementById("div1");
odiv.onmouseover = function() {
starmove(0);
};
odiv.onmouseout = function() {
starmove(-200);
};
};
var timer = null;
function starmove(itarget) {
clearInterval(timer);
var odiv = document.getElementById("div1");
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>
JS多物體動畫
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS多物體動畫</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul,li{
list-style: none;
}
ul li{
width: 200px;
height: 100px;
background: yellow;
margin-bottom: 20px;
}
</style>
<script type="text/javascript">
window.onload = function() {
var ali = document.getElementsByTagName("li");
for (var i = 0; i < ali.length; i++) {
ali[i].zzz = null
ali[i].onmouseover = function(e) {
starmove(this, 800);
}
ali[i].onmouseout = function(e) {
starmove(this, 200);
}
}
};
function starmove(obj, itarget) {
clearInterval(obj.zzz);
var odiv = document.getElementById("div1");
obj.zzz = setInterval(function() {
var speed = (itarget - obj.offsetWidth) / 8;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if (obj.offsetWidth == itarget) {
clearInterval(obj.zzz)
} else {
obj.style.width = obj.offsetWidth + speed + 'px';
}
}, 30)
}
</script>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
JS透明度多物體動畫
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS透明度多物體動畫</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
div {
width: 200px;
height: 200px;
background: red;
filter: alpha(opacity:30);
opacity: 0.3;
margin: 10px;
float: left;
}
</style>
<script type="text/javascript">
window.onload = function() {
var odiv = document.getElementsByTagName("div");
for (var i = 0; i < odiv.length; i++) {
odiv[i].timer = null;
odiv[i].alpha = 30;
odiv[i].onmouseover = function() {
starmove(this, 100);
};
odiv[i].onmouseout = function() {
starmove(this, 30);
};
}
};
function starmove(obj, itarget) {
clearInterval(obj.timer);
obj.timer = setInterval(function() {
var speed = 0;
if (obj.alpha > itarget) {
speed = -10;
} else {
speed = 10;
}
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>
獲取樣式屬性值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>獲取樣式</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#div1 {
width: 200px;
height: 200px;
background: red;
border: 1px solid #000;
}
</style>
<script type="text/javascript">
window.onload = function() {
var odiv = document.getElementById("div1");
console.log(getStyle(odiv,'background-color'));
odiv.onmouseover = function() {
starmove();
};
};
function starmove() {
var odiv = document.getElementById("div1");
setInterval(function() {
odiv.style.width=parseInt(getStyle(odiv,'width'))-1+'px';
}, 30)
}
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
}
</script>
</head>
<body>
<div id="div1">
</div>
</body>
</html>
任意屬性值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>任意值屬性1</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul,li{
list-style: none;
}
ul li{
width: 200px;
height: 100px;
background: yellow;
margin-bottom: 20px;
border: solid 3px #000;
}
</style>
<script type="text/javascript">
window.onload = function() {
var li1 = document.getElementById("li1");
var li2 = document.getElementById("li2");
li1.onmouseover = function() {
starmove(this, 'height', 400)
}
li1.onmouseout = function() {
starmove(this, 'height', 100)
}
li2.onmouseover = function() {
starmove(this, 'width', 400)
}
li2.onmouseout = function() {
starmove(this, 'width', 200)
}
};
function starmove(obj, attr, itarget) {
clearInterval(obj.zzz);
obj.zzz = setInterval(function() {
var speed = (itarget - parseInt(getStyle(obj, attr))) / 8;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if (parseInt(getStyle(obj, 'height')) == itarget) {
clearInterval(obj.zzz)
} else {
obj.style[attr] = parseInt(getStyle(obj, attr)) + speed + 'px';
}
}, 30)
}
function getStyle(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];
}
}
</script>
</head>
<body>
<ul>
<li id="li1"></li>
<li id="li2"></li>
</ul>
</body>
</html>
任意屬性值(二)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>任意值屬性1</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul,li{
list-style: none;
}
ul li{
width: 200px;
height: 100px;
background: yellow;
margin-bottom: 20px;
border: solid 3px #000;
filter: alpha(opacity:30);
opacity: 0.3;
}
</style>
<script type="text/javascript">
window.onload = function() {
var li1 = document.getElementById("li1");
li1.onmouseover = function() {
starmove(this, 'opacity', 100)
}
li1.onmouseout = function() {
starmove(this, 'opacity', 30)
}
};
function starmove(obj, attr, itarget) {
clearInterval(obj.zzz);
obj.zzz = 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) / 8;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if (icur == itarget) {
clearInterval(obj.zzz)
} else {
if(attr=='opacity'){
icur+=speed;
obj.style.filter = 'alpha(opacity:' + icur + ')';
obj.style.opacity = icur / 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>
<ul>
<li id="li1"></li>
</ul>
</body>
</html>
JS鏈式動畫
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS鏈式動畫</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul,li{
list-style: none;
}
ul li{
width: 200px;
height: 100px;
background: yellow;
margin-bottom: 20px;
border: solid 3px #000;
filter: alpha(opacity:30);
opacity: 0.3;
}
</style>
<script type="text/javascript">
window.onload = function() {
var li1 = document.getElementById("li1");
li1.onmouseover = function() {
starmove(li1, 'opacity', 100,function(){
starmove(li1, 'height', 500)
});
}
li1.onmouseout = function() {
starmove(this, 'height', 100,function(){
starmove(li1, 'opacity', 30)
})
}
};
function starmove(obj, attr, itarget,fn) {
clearInterval(obj.zzz);
obj.zzz = 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) / 8;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if (icur == itarget) {
clearInterval(obj.zzz);
if(fn){
fn();
}
} else {
if(attr=='opacity'){
icur+=speed;
obj.style.filter = 'alpha(opacity:' + icur + ')';
obj.style.opacity = icur / 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>
<ul>
<li id="li1"></li>
</ul>
</body>
</html>
完美運動框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>同時運動</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul,li{
list-style: none;
}
ul li{
width: 200px;
height: 100px;
background: yellow;
margin-bottom: 20px;
border: solid 3px #000;
filter: alpha(opacity:30);
opacity: 0.3;
}
</style>
<script type="text/javascript">
window.onload = function() {
var li1 = document.getElementById("li1");
li1.onmouseover = function() {
starmove(li1, {
width: 400,
height: 200,
opacity: 100
});
}
li1.onmouseout = function() {
starmove(li1, {
width: 200,
height: 100,
opacity: 30
})
}
};
function starmove(obj, json, fn) {
var flag = true;
clearInterval(obj.zzz);
obj.zzz = setInterval(function() {
for (var attr in json) {
var icur = 0;
if (attr == 'opacity') {
icur = Math.round(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]) {
flag = false;
}
if (attr == 'opacity') {
icur += speed;
obj.style.filter = 'alpha(opacity:' + icur + ')';
obj.style.opacity = icur / 100;
} else {
obj.style[attr] = icur + speed + 'px';
}
if (flag) {
clearInterval(obj.zzz);
if (fn) {
fn();
}
}
}
}, 30)
}
function getStyle(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];
}
}
</script>
</head>
<body>
<ul>
<li id="li1"></li>
</ul>
</body>
</html>
d