JS动画实现

概述

在CSS3中可以通过transition过渡属性可以实现动画
JS可以利用CSS3中的transition属性实现元素动画

匀速动画

JS封装匀速动画

<button id="btn">开始动画</button>
<div id="box"></div>

var btn = document.querySelector("#btn");
var box = document.querySelector("#box");var timer = null;
var left = 0;function animation(target, distance, time) {var each = parseInt(distance / time * 30);clearInterval(timer);timer = setInterval(function() {if (left >= distance) {clearInterval(timer);} else {left += each;target.style.left = left + "px";}}, 30);
};btn.onclick = function() {animation(box, 800, 2000);
};

利用CSS transition属性实现平滑动画效果

<button>开始动画</button>
<div id="box"></div><script>var btn = document.querySelector("button");var box = document.querySelector("#box");btn.onclick = function() {box.style.transition = "all 2s linear 0s";box.style.left = "800px";};
</script>

缓速动画

var btn = document.querySelector("#btn");
var box = document.querySelector("#box");var timer = null;
var left = 0;function animation(target, distance) {clearInterval(timer);timer = setInterval(function() {if (left >= distance) {clearInterval(timer);} else {var step = (distance - left) / 10;step = step > 0 ? Math.ceil(step) : Math.floor(step);left += step;target.style.left = left + "px";}}, 30);
};btn.onclick = function() {animation(box, 800);
};

无缝连续滚动特效

<div id="banner" class="banner"><ul id="list"><li><img src="data:images/0.png" alt=""></li><li><img src="data:images/1.png" alt=""></li><li><img src="data:images/2.png" alt=""></li><li><img src="data:images/3.png" alt=""></li><li><img src="data:images/4.png" alt=""></li><li><img src="data:images/5.png" alt=""></li></ul>
</div>

* {margin: 0;padding: 0;
}.banner {width: 1000px;height: 130px;border: 1px solid red;margin: 50px auto;overflow: hidden;
}.banner ul {list-style: none;width: 5000px;position: relative;
}.banner ul li {float: left;margin-right: 10px;
}

var banner = document.querySelector("#banner");
var list = document.querySelector("#list");list.innerHTML += list.innerHTML;var left = 0;
var timer = null;startMove();function startMove() {clearInterval(timer);timer = setInterval(function() {left -= 4;if (left <= -1260) {left = 0;}list.style.left = left + "px";}, 20);
}function stopMove() {clearInterval(timer);
}banner.onmouseenter = function() {stopMove();
};banner.onmouseleave = function() {startMove();
};

轮播图

<div id="banner" class="banner"><ul id="list"><li><img src="data:images/0.png" alt=""></li><li><img src="data:images/1.png" alt=""></li><li><img src="data:images/2.png" alt=""></li><li><img src="data:images/3.png" alt=""></li><li><img src="data:images/4.png" alt=""></li><li><img src="data:images/5.png" alt=""></li></ul><a id="leftBtn" class="left-btn" href="javascript:;">&lt;</a><a id="rightBtn" class="right-btn" href="javascript:;">&gt;</a>
</div>

* {margin: 0;padding: 0;
}.banner {width: 650px;height: 360px;border: 1px solid red;margin: 50px auto;overflow: hidden;position: relative;
}.banner ul {list-style: none;width: 5000px;height: 100%;position: relative;left: 0;
}.banner ul li {float: left;
}.banner ul li img {width: 650px;height: 360px;
}.banner a {text-decoration: none;color: white;text-align: center;line-height: 50px;
}.banner .left-btn {position: absolute;width: 50px;height: 50px;left: 20px;top: 50%;margin-top: -25px;background-color: rgba(0, 0, 0, .5);border-radius: 50%;
}.banner .right-btn {position: absolute;width: 50px;height: 50px;right: 20px;top: 50%;margin-top: -25px;background-color: rgba(0, 0, 0, .5);border-radius: 50%;
}

var banner = document.querySelector("#banner");
var dot = document.querySelector("#banner #dot");
var list = document.querySelector("#list");
var leftBtn = document.querySelector("#leftBtn");
var rightBtn = document.querySelector("#rightBtn");var firstLi = list.lastElementChild.cloneNode(true);
var lastLi = list.firstElementChild.cloneNode(true);
list.insertBefore(firstLi, list.firstElementChild);
list.appendChild(lastLi);//总长度
var length = list.childElementCount;//当前显示第几页
var index = 1;//节流锁
var lock = false;function setPage(index) {list.style.transition = "left .5s ease 0s";list.style.left = -index * 650 + "px";
}setPage(index);rightBtn.onclick = function() {if (lock) {return;}lock = true;index++;setPage(index);if (index === length - 1) {setTimeout(function() {index = 1;list.style.transition = "none";list.style.left = -index * 650 + "px";}, 500);}setTimeout(function() {lock = false;}, 500);
};leftBtn.onclick = function() {if (lock) {return;}lock = true;index--;setPage(index);if (index === 0) {setTimeout(function() {index = length - 2;list.style.transition = "none";list.style.left = -index * 650 + "px";}, 500);}setTimeout(function() {lock = false;}, 500);
};

轮播图淡入淡出效果

<div id="banner" class="banner"><ul id="list"><li><img src="data:images/0.png" alt=""></li><li><img src="data:images/1.png" alt=""></li><li><img src="data:images/2.png" alt=""></li><li><img src="data:images/3.png" alt=""></li><li><img src="data:images/4.png" alt=""></li><li><img src="data:images/5.png" alt=""></li></ul><a id="leftBtn" class="left-btn" href="javascript:;">&lt;</a><a id="rightBtn" class="right-btn" href="javascript:;">&gt;</a>
</div>

* {margin: 0;padding: 0;
}.banner {width: 650px;height: 360px;border: 1px solid red;margin: 50px auto;overflow: hidden;position: relative;
}.banner ul {list-style: none;width: 5000px;height: 100%;position: relative;left: 0;
}.banner ul li {position: absolute;top: 0;left: 0;opacity: 0;transition: opacity 1s ease 0s;
}.banner ul li:first-child {opacity: 1;
}.banner ul li img {width: 650px;height: 360px;
}.banner a {text-decoration: none;color: white;text-align: center;line-height: 50px;
}.banner .left-btn {position: absolute;width: 50px;height: 50px;left: 20px;top: 50%;margin-top: -25px;background-color: rgba(0, 0, 0, .5);border-radius: 50%;
}.banner .right-btn {position: absolute;width: 50px;height: 50px;right: 20px;top: 50%;margin-top: -25px;background-color: rgba(0, 0, 0, .5);border-radius: 50%;
}

var banner = document.querySelector("#banner");
var lis = document.querySelectorAll("#list li");
var leftBtn = document.querySelector("#leftBtn");
var rightBtn = document.querySelector("#rightBtn");var index = 0;
var length = lis.length;
var lock = false;rightBtn.onclick = function() {if (lock) {return;}lock = true;lis[index].style.opacity = 0;index++;if (index >= length) {index = 0;}lis[index].style.opacity = 1;setTimeout(function() {lock = false;}, 1000);
};
leftBtn.onclick = function() {if (lock) {return;}lock = true;lis[index].style.opacity = 0;index--;if (index < 0) {index = length - 1;}lis[index].style.opacity = 1;setTimeout(function() {lock = false;}, 1000);
};

JavaScript 动画效果相关推荐

Javascript动画效果（四）
Javascript动画效果(四) 前面我们自己写了一个小小的关于js动画的插件,下面我们来使用之前的框架来完成我们想要的动画效果.我们经常在淘宝网中看到,鼠标经过某一图片时,该图片有从上滚出而又从下 ...
【BOOM】一款有趣的Javascript动画效果
实践出真知,有的时候看到一些有趣的现象就想着用自己所学的知识复现一下. boomJS 缘起前几天在 github 上看到同事的一个这样的小项目,在 IOS 上实现了这样一个小动画效果,看上去蛮 ...
JavaScript 动画效果的实现（附带示例）
在学习 CSS 时我们知道,通过 CSS 可以实现简单的动画效果,但对于比较复杂的动画,使用 CSS 实现起来就会比较麻烦. 除了可以使用 CSS 来实现外,也可以使用 JavaScript 来实现. ...
html js 动画效果,JavaScript 动画效果
使用JavaScript可以生成图像的动画效果. ----------------------- JavaScript 动画使用JavaScript可以生成图像的动画效果,技巧是使用JavaScri ...
javascript动画效果之透明度
在css中的filter对应老版本的ie浏览器,opacity对应的是其他浏览器 1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 & ...
html动画之制作烟花效果,JavaScript实现烟花绽放动画效果
先编写一个烟花绽放的动画效果. 放烟花时,一个烟花可分为两个阶段:(1)烟花上升到空中:(2)烟花炸开成碎片,炸开的碎片慢慢消散. 为此抽象出两个对象类:Firework和Particle.其中,Fi ...
JavaScript——仿键盘打字输入动画效果DEMO
功能介绍 jQuery仿键盘打字输入动画效果,支持设置字体为红色.设置背景色.暂停.开始.码字.退格功能. 源代码 <!DOCTYPE html> <html lang=" ...
html动画效果结束返回,javascript判断css3动画结束 css3动画结束的回调函数
本文主要给大家介绍的是如何使用javascript判断CSS3动画效果结束,主要是使用了javascript的回调函数,其思路是一旦动画或变换结束,回调函数就会触发.不再需要大型类库支持,非常的简单实 ...
javascript实现汉诺塔动画效果
javascript实现汉诺塔动画效果当初以为不用html5也很简单,踩了javascript单线程的大坑后终于做出来了,没事可以研究下,对理解javascript的执行过程还是很有帮助的,代码很烂 ...

JavaScript 动画效果

文章目录

JS动画实现

概述

匀速动画

缓速动画

无缝连续滚动特效

轮播图

轮播图淡入淡出效果

JavaScript 动画效果相关推荐

最新文章

热门文章