JS动画效果_学习笔记

首页免费课 JS动画效果笔记

JS动画效果

最热最新

林疏雪正是在下

获取任意值属性封装函数，敲在本地运行记录验证

查看全部

0 采集收起来源：任意属性值（二）
2019-11-07
林疏雪正是在下

未实现运动效果，后续再次尝试验证

查看全部

0 采集收起来源：获取样式
2019-11-07
喵叽

运动框架实现思路
1、速度（改变值left、right、width、height、opacity）
2、缓冲运动
3、多物体运动
4、任意值变换
5、链式运动
6、同时运动

查看全部

0 采集收起来源：JS动画效果课程介绍
2019-09-01
xiaowan321 08:43

var speed = (iTarget-oDiv.offsetLeft)/20;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
缓冲动画

查看全部

0 采集收起来源：JS缓冲动画
2019-08-20
xiaowan321 07:21

Math.floor() 向下取整；
Math.ceil() 向上取整；

查看全部

0 采集收起来源：JS缓冲动画
2019-08-20
xiaowan321 07:21

if(alpha == iTarget){
clearInterval(timer);
}
else{
alpha+=speed;
oDiv.style.filter = 'alpha(opactiy:'+alpha+')';
oDiv.syle.opacity = alpha/100;
}

查看全部

0 采集收起来源：JS透明度动画
2019-08-19
little慕慕

<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8">
<title>More</title>
<style type="text/css">
body, ul, li, span {
margin: 0;
padding: 0;
}
ul {
list-style: none;
padding-left: 0;
}
ul li {
background-color: red;
width: 200px;
height: 100px;
margin-bottom: 20px;
border: 4px solid black;
filter: alpha(opacity=30);/*针对IE设置透明度*/
opacity: 0.3;/*针对火狐/chrome浏览器*/
}
</style>
<script src="same.js"></script>
<script>
window.onload = function() {
var li1=document.getElementById("li1");
li1.onmouseover=function(){
startMove(li1,{width:201,height:200,opacity:100});
}
li1.onmouseout=function(){
startMove(li1,{width:200,height:100,opacity:30});
}
}
</script>
</head>
<body>
<ul>
<li id="li1"></li>
</ul>
</body>
</html>

function getStyle(obj,attr) {
if(obj.currentStyle){//IE浏览器
return obj.currentStyle[attr];
}
else{//firefox浏览器
return getComputedStyle(obj,false)[attr];
}
}
function startMove(obj,json,fn) {//添加一个回调函数fn
var flag=true;//假设,标志所有运动是否到达目标值
clearInterval(obj.timer);
obj.timer = setInterval(function(){
for(var attr in json){
//1.取当前的值
var icur=null;
if(attr=='opacity'){
icur=Math.round(parseFloat(getStyle(obj,attr))*100);
}
else{
icur=parseInt(getStyle(obj,attr));
}
//2.算速度
var speed = (json[attr]-icur)/8;
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);
if(fn){
fn();
}
}
},30)
}

查看全部

0 采集收起来源：完美运动框架
2019-08-10
little慕慕

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>More</title>
<style type="text/css">
body, ul, li, span {
margin: 0;
padding: 0;
}
ul {
list-style: none;
padding-left: 0;
}
ul li {
background-color: red;
width: 200px;
height: 100px;
margin-bottom: 20px;
border: 4px solid black;
}
#li3 {
filter: alpha(opacity=30);/*针对IE设置透明度*/
opacity: 0.3;/*针对火狐/chrome浏览器*/
}
</style>
<script>
window.onload = function() {
// var aLi = document.getElementsByTagName("li");
// for(var i=0;i<aLi.length;i++){
// aLi[i].timer = null;
// aLi[i].onmouseover = function() {
// startMove(this, 400);
// };
// aLi[i].onmouseout = function() {
// startMove(this, 200);
// }
// }
var li1=document.getElementById("li1");
var li2=document.getElementById("li2");
var li3=document.getElementById("li3");
li1.onmouseover=function(){
startMove(this,'width',400);
}
li1.onmouseout=function(){
startMove(this,'width',200);
}
li2.onmouseover=function(){
startMove(this,'height',200);
}
li2.onmouseout=function(){
startMove(this,'height',100);
}
li3.onmouseover=function(){
startMove(this,'opacity',100);
}
li3.onmouseout=function(){
startMove(this,'opacity',30);
}
}
function getStyle(obj,attr) {
if(obj.currentStyle){//IE浏览器
return obj.currentStyle[attr];
}
else{//firefox浏览器
return getComputedStyle(obj,false)[attr];
}
}
function startMove(obj,attr,liTa) {
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var icur=null;
if(attr=='opacity'){
icur=Math.round(parseFloat(getStyle(obj,attr))*100);
}
else{
icur=parseInt(getStyle(obj,attr));
}
var speed = (liTa-icur)/8;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
if (icur == liTa) {
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)
}
</script>

</head>
<body>
<ul>
<li id="li1"></li>
<li id="li2"></li>
<li id="li3"></li>
</ul>
</body>
</html>

查看全部

0 采集收起来源：任意属性值（二）
2019-08-10
little慕慕

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>More</title>
<style type="text/css">
body, ul, li, span {
margin: 0;
padding: 0;
}
ul {
list-style: none;
padding-left: 0;
}
ul li {
background-color: pink;
width: 200px;
height: 100px;
margin-bottom: 20px;
border: 4px solid black;
}
</style>
</head>
<body>
<script>
window.onload = function() {
// var aLi = document.getElementsByTagName("li");
// for(var i=0;i<aLi.length;i++){
// aLi[i].timer = null;
// aLi[i].onmouseover = function() {
// startMove(this, 400);
// };
// aLi[i].onmouseout = function() {
// startMove(this, 200);
// }
// }
var li1=document.getElementById("li1");
var li2=document.getElementById("li2");
li1.onmouseover=function(){
startMove(this,'width',400);
}
li1.onmouseout=function(){
startMove(this,'width',200);
}
li2.onmouseover=function(){
startMove(this,'height',200);
}
li2.onmouseout=function(){
startMove(this,'height',100);
}
}
function getStyle(obj,attr) {
if(obj.currentStyle){//IE浏览器
return obj.currentStyle[attr];
}
else{//firefox浏览器
return getComputedStyle(obj,false)[attr];
}
}
function startMove(obj,attr, liTa) {
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var icur=parseInt(getStyle(obj,attr));
var speed = (liTa-icur)/8;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
if (icur == liTa) {
clearInterval(obj.timer);
}
else {
obj.style[attr] = icur+speed+'px';
}
},30)
}
</script>
<div>
<ul>
<li id="li1"></li>
<li id="li2"></li>
</ul>
</div>
</body>
</html>

查看全部

0 采集收起来源：任意属性值（一）
2019-08-09
little慕慕

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Cartoon</title>
<style type="text/css">
body, div, span {
margin: 0;
padding: 0;
}
#div1 {
width: 200px;
height: 200px;
background: red;
position: relative;
left: -200px;
top: 0;
}
#div1 span {
width: 20px;
height: 50px;
background: blue;
position: absolute;
left: 200px;
top: 75px;
}
</style>
</head>
<body>
<script>
window.onload = function() {
var oDiv = document.getElementById("div1");
oDiv.onmouseover = function() {
move(0);
}
oDiv.onmouseout = function() {
move(-200);
}
}
var timer = null;
function move(dis) {
clearInterval(timer);
var oDiv = document.getElementById("div1");
timer = setInterval(function() {
var speed = (dis - oDiv.offsetLeft)/20;
speed = speed >0?Math.ceil(speed):Math.floor(speed);
if(oDiv.offsetLeft == dis) {
clearInterval(timer);
}
else {
oDiv.style.left = oDiv.offsetLeft + speed + 'px';
}
},30)
}
</script>
<div id="div1">
<span id="share">分享</span>
</div>
</body>
</html>

查看全部

0 采集收起来源：JS缓冲动画
2019-08-08
little慕慕

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Cartoon</title>
<style type="text/css">
body, div, span {
margin: 0;
padding: 0;
}
#div1 {
width: 400px;
height: 400px;
background: red;
/* filter:alpha(opacity=30); */
opacity: 0.3;
}
</style>
</head>
<body>
<script type="text/javascript">
window.onload = function() {
var oDiv = document.getElementById("div1");
oDiv.onmouseover = function() {
move(100);
}
oDiv.onmouseout = function() {
move(30);
}
}
var timer = null;
var opa = 30;
function move(target) {
var oDiv = document.getElementById("div1");
clearInterval(timer);
timer = setInterval(function() {
var speed = 0;
if(opa < target) {
speed = 10;
}
else {
speed = -10;
}
if(opa == target){
clearInterval(timer);
}
else{
opa += speed;
// oDiv.style.filter = 'alpha(opacity:'+alpha+')';
oDiv.style.opacity = opa/100;
}
},40)
}
</script>
<div id="div1">
</div>
</body>
</html>

查看全部

0 采集收起来源：JS透明度动画
2019-08-08
little慕慕
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Cartoon</title>
<style type="text/css">
body, div, span {
margin: 0;
padding: 0;
}
#div1 {
width: 200px;
height: 200px;
background: red;
position: relative;
left: -200px;
top: 0;
}
#div1 span {
width: 20px;
height: 50px;
background: blue;
position: absolute;
left: 200px;
top: 75px;
}
</style>
</head>
<body>
<script>
window.onload = function() {
var oDiv = document.getElementById("div1");
oDiv.onmouseover = function() {
move(0);
}
oDiv.onmouseout = function() {
move(-200);
}
}
var timer = null;
function move(dis) {
clearInterval(timer);
var oDiv = document.getElementById("div1");
timer = setInterval(function() {
var speed = 0;
if(oDiv.offsetLeft > dis){
speed = -10;
}
else {
speed = 10;
}
if(oDiv.offsetLeft == dis) {
clearInterval(timer);
}
else {
oDiv.style.left = oDiv.offsetLeft + speed + 'px';
}
},30)
}
</script>
<div id="div1">
<span id="share">分享</span>
</div>
</body>
</html>
查看全部

1 采集收起来源：JS速度动画
2019-08-08

首页上一页 1 2 3 4 5 6 7 下一页尾页

0/150

提交

取消

开始学习

课程须知: 1.您至少已经具备JavaSript的知识。2.您已经具备一些开发经验。

老师告诉你能学到什么？: 1.使用定时器实现简单动画。2.如何一步步封装库。2.培养编程的思想。

微信扫码，参与3人拼团

热搜

最近搜索清空

JS动画效果