作为一名前端开发人员，想要的大多都是，在开发过程中，看着自己制作的动画的炫酷以及困难的解决；开发结束后，自己的项目、成果可以被他人认可接受。人们浏览网页时，若一个网页动画效果丰富炫酷，性能良好，体验度良好，自然会受到吸引去打来浏览。吸引用户，自然少不了网页的布局优美、色彩搭配的恰当，更重要的是其中吸引人的炫酷动画效果。
在这里，我为大家提供几种常用的动画效果，虽然没有什么特别，不是很炫酷，但很常见也很便捷。
一、轮播图：
轮播图在网页中运用较广，经常使用于头部banner，使用于电商网站中，例如;淘宝、京东、天猫等购物平台都少不了。而轮播图有多种类型，这次就和大家说说其中的两款。轮播图的原理：点击上一张或下一张时，图片移动的距离为图片本身的宽度；点击图片下的原点导航时跳转到相应的图片位置。
1、一般的轮播图。这一类型的轮播图，在切换图片的过程中，图片会缓慢的滑动到达相应的位置，即可以看到图片到达相应位置的全过程。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
img{
width: 520px;
}
div.box{
width: 520px;
height: 280px;
overflow: hidden;
margin: 100px auto;
position: relative;
}
ul.img{
top: 0px;
left: 0px;
width: 1000%;
position: absolute;
}
ul.img li{
float: left;
list-style: none;
}
ul.circle{
left: 50%;
bottom: 10px;
margin-left: -75px;
position: absolute;
}
ul.circle li{
width: 20px;
height: 20px;
float: left;
color: #666;
cursor: pointer;
margin: 0px 5px;
list-style: none;
text-align: center;
border-radius: 10px;
background: #e4e4e4;
font: normal 12px/20px "conslas";
}
ul.arrow{
top: 50%;
width: 100%;
position: absolute;
margin-bottom: -25px;
}
ul.arrow li{
width: 35px;
height: 50px;
color: #666;
cursor: pointer;
list-style: none;
text-align: center;
background: #ccc;
font: 800 30px/50px "conslas";
}
ul.arrow li.left{
float:left;
}
ul.arrow li.right{
float: right;
}
ul.circle li.current{
color:#fff;
background: red;
}
</style>
</head>
<body>
<div class="box">
<ul class="img">
<li><img src="img/p1.jpg" alt="" /></li>
<li><img src="img/p2.jpg" alt="" /></li>
<li><img src="img/p3.jpg" alt="" /></li>
<li><img src="img/p4.jpg" alt="" /></li>
<li><img src="img/p5.jpg" alt="" /></li>
</ul>
<ul class="circle">
</ul>
<ul class="arrow">
<li class="left"><</li>
<li class="right">></li>
</ul>
</div>
<script>
var box=document.getElementsByTagName("div")[0];//轮播图容器
var img=box.children[0];//图片容器
var circle=box.children[1];//小圆点容器
var arrow=box.children[2];//箭头容器
var left=arrow.children[0];//左箭头
var right=arrow.children[1];//右箭头
var index=0;//当前显示的图片的索引
//需求分析：
//1、在最后一幅图后面添加第一幅图
var addImg=img.children[0].cloneNode(true);
img.appendChild(addImg);
//2、动态添加小圆点，同时点亮第一个
var circles=img.children;//小圆点的个数即所有图片的个数集合
for(var i=1;i<circles.length;i++){
var circleLi=document.createElement("li");
circleLi.innerHTML=i;
circle.appendChild(circleLi);
}
var points=circle.children;
light();
function light(){
for(var i=0;i<points.length;i++){
points[i].className="";
if(index>4){
points[0].className="current";
}else{
points[index].className="current";
}
}
}
//3、点击小圆点，ul移动到相应的图片,同时点亮小圆点
for(var j=0;j<points.length;j++){
points[j].index=j;
points[j].onclick=function(){
index=this.index;
animate(img,-index*box.offsetWidth);
light();
}
}
//4、左右箭头切换图片
right.onclick=autoplay;
function autoplay(){
index++;
if(index>circles.length-1){
img.style.left=0;
index=1;
}
animate(img,-index*box.offsetWidth);
light();
}
left.onclick=function(){
index--;
if(index<0){
img.style.left=-(circles.length-1)*box.offsetWidth+"px";
index=circles.length-2;
}
animate(img,-index*box.offsetWidth);
light();
}
//5、添加自动轮播功能
box.timer=setInterval(autoplay,2000);
box.onmouseover=function(){
clearInterval(box.timer);
}
box.onmouseout=function(){
clearInterval(box.timer);
box.timer=setInterval(autoplay,2000);
}
function animate(obj,target){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var speed=(obj.offsetLeft>target?-20:20);
if(Math.abs(obj.offsetLeft-target)>20){
obj.style.left=obj.offsetLeft+speed+"px";
}else{
obj.style.left=target+"px";
}
},20)
}
</script>
</body>
</html>
2、无缝轮播图。此类轮播图不会显示图片移动的全过程。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
border: none;
list-style: none;
}
img {
width: 310px;
height: 220px;
}
.slider {
width: 310px;
height: 265px;
margin: 100px auto;
position: relative;
overflow: hidden;
cursor: pointer;
}
.slider-img {
width: 310px;
height: 220px;
}
ul {
list-style: none;
}
li {
position: absolute;
top: 0;
left: 0;
}
.slider-ctrl {
text-align: center;
padding-top: 10px;
}
.slider-ctrl-con {
display: inline-block;
width: 24px;
height: 24px;
background: url("img/icon.png") no-repeat -24px -780px;
text-indent: -99999px;
margin: 0 5px;
cursor: pointer;
}
.slider-ctrl-con.current {
background-position: -24px -760px;
}
.prev,
.next {
position: absolute;
top: 40%;
width: 30px;
height: 35px;
background: url("img/icon.png") no-repeat;
}
.prev {
left: 10px;
}
.next {
right: 10px;
background-position: 0 -44px;
}
</style>
</head>
<body>
<div class="slider" id="slider" style="overflow: hidden;">
<div class="slider-img">
<ul>
<li>
<a href="#"><img src="img/p1.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="img/p2.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="img/p3.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="img/p4.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="img/p5.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="img/p6.jpg" alt="" /></a>
</li>
</ul>
</div>
<div class="slider-ctrl">
<span class="prev" id="prev"></span>
<span class="next" id="next"></span>
</div>
</div>
<script type="text/javascript">
window.onload = function() {
var slider = document.getElementById("slider"); //获取元素
var ul = document.getElementsByTagName('ul')[0];
var lis = ul.children;
var per = document.getElementById('prev');
var next = document.getElementById('next');
var imgWidth = slider.offsetWidth; //获取图片的宽度作为缓动的距离
for (var i = 0; i < lis.length; i++) { //添加span，用于点击跳转到指定图片
var span = document.createElement('span');
span.innerHTML = i;
span.className = "slider-ctrl-con "; //添加未选中状态
per.parentNode.insertBefore(span, per);
lis[i].style.left = imgWidth + "px";
}
var num = 0; //标记索引值
var span = document.getElementsByTagName('span'); //获取span元素
span[0].className += " current"; //为第一个span标签状态设置为选中状态
lis[0].style.left = 0 + "px"; //为第一张图片设置显示位置
for (var k = 0; k < span.length; k++) {
span[k].onclick = function() { //为所有span标签添加点击事件（包括左右按钮）
if (this.className == "prev") { //当点击的是向前播放按钮时
//要看上一张
animation(lis[num], imgWidth); //当前图片缓动到右边位置
num = --num < 0 ? lis.length - 1 : num; //索引值设置为前一张图片的索引，当索引值小于0时则等于最后一张的索引
lis[num].style.left = -imgWidth + "px"; //将前一张图片瞬间移动到左侧
animation(lis[num], 0); //将移动到左侧的图片，缓动到显示位置
light(); //点亮底部相应的span标签
} else if (this.className == 'next') { //当点击的是向后播放按钮时
//要看下一张
autoplay(); //按自动播放顺序播放
} else {
//获取当前被点击的盒子的索引值
var index = this.innerHTML;
//中间：left = 0；左边：left = -imgWidth+“px";右边：left = +imgWidth+”px“
//判断点击的span和当前的图片的索引，谁大谁小
if (index > num) { //当点击索引值大于当前播放图片的索引值时
lis[index].style.left = imgWidth + "px"; //该索引值对应的图片瞬间移动到右侧
animation(lis[num], -imgWidth); //当前播放图片缓动到左侧
animation(lis[index], 0); //再缓动至当前播放位置
num = index; //改变索引值
light(); //点亮底部相应的span标签
}
if (index < num) {
lis[index].style.left = -imgWidth + "px";
animation(lis[num], imgWidth);
animation(lis[index], 0);
num = index;
light();
}
}
}
}
function animation(obj, target) { //缓动
clearInterval(obj.timer); //为避免多个定时器同时运行带来的bug，在用定时器之前先清理定时器
obj.timer = setInterval(function() {
var speed = (target - obj.offsetLeft) / 10;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); //为确保能搞达到最终目标值，给speed取整
obj.style.left = obj.offsetLeft + speed + "px"; //赋值给当前元素
if (target == obj.offsetLeft) { //属性达到目标值时，清理定时器
clearInterval(obj.timer);
}
}, 20);
}
slider.timer = setInterval(function() { //当前无操作时自动播放
autoplay();
}, 2000);
slider.onmouseover = function() { //鼠标进入图片区域停止自动播放
clearInterval(slider.timer);
}
slider.onmouseout = function() { //鼠标离开图片区域恢复自动播放
clearInterval(slider.timer);
slider.timer = setInterval(function() {
autoplay();
}, 2000);
}
function light() {
for (var j = 0; j < span.length - 2; j++) {
span[j].className = "slider-ctrl-con ";
}
span[num].className += " current";
}
function autoplay() { //封装自动播放函数
animation(lis[num], -imgWidth);
num = ++num > lis.length - 1 ? 0 : num;
lis[num].style.left = imgWidth + "px";
animation(lis[num], 0);
light();
}
}
</script>
</body>
</html>
二、旋转木马。顾名思义，旋转木马的动画效果和游乐园中旋转木马类似，因此而得名。旋转木马的原理和轮播图其实差不多，只是旋转木马需要设置每一张图片的z-index属性，且每一张的z-index的设置精准、满意需要一定的经验。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.wrap {
width: 1200px;
margin: 10px auto;
}
.slider {
height: 500px;
position: relative;
}
.slider li {
list-style: none;
position: absolute;
left: 200px;
top: 0;
}
.slider li img {
width: 100%;
display: block;
}
.arrow {
opacity: 1;
}
.prev,
.next {
width: 76px;
height: 112px;
position: absolute;
top: 50%;
margin-top: -56px;
background: url(img/prev.png) no-repeat;
z-index: 99;
}
.next {
right: 0;
background: url("img/next.png") no-repeat;
}
.prev {
left: 0;
}
</style>
</head>
<body>
<div class="wrap">
<div class="slider">
<ul>
<li><img src="img/1.jpg" /></li>
<li><img src="img/2.png" /></li>
<li><img src="img/3.jpg" /></li>
<li><img src="img/4.jpg" /></li>
<li><img src="img/5.jpg" /></li>
</ul>
<div class="arrow">
<div class="prev" id="prev"></div>
<div class="next" id='next'></div>
</div>
</div>
</div>
<script>
var json = [{ // 0
width: 400,
top: 70,
left: 50,
opacity: 0.2,
zIndex: 2
}, { // 1
width: 600,
top: 120,
left: 0,
opacity: 0.8,
zIndex: 3
}, { // 2
width: 800,
top: 100,
left: 200,
opacity: 1,
zIndex: 4
}, { // 3
width: 600,
top: 120,
left: 600,
opacity: 0.8,
zIndex: 3
}, { //4
width: 400,
top: 70,
left: 750,
opacity: 0.2,
zIndex: 2
}];
//根据json的内容把图片缓动到相应位置，同时缓动
var liArr = document.getElementsByTagName('li');
var next = document.getElementById('next');
var prev = document.getElementById('prev');
function move() {
for (var i = 0; i < liArr.length; i++) {
animation(liArr[i], json[i]);
}
}
move()
next.onclick = function() {
var last = json.pop();
json.unshift(last);
move()
}
prev.onclick = function() {
var first = json.shift();
json.push(first);
move();
}
function animation(obj, json, fn) {
clearInterval(obj.timer);
obj.timer = setInterval(function() {
var flag = true;
//json里面有几个属性就要执行几次
var target = 0; //记录目标位置
var leader = 0; //记录当前位置
var speed = 0; //记录速度
for (var key in json) {
if (key == 'opacity') {
target = Math.round(json['opacity'] * 100) //0-100
leader = getStyle(obj, 'opacity') * 100 //0-100
} else {
target = parseInt(json[key]);
leader = parseInt(getStyle(obj, key));
}
speed = (target - leader) / 10;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
leader = leader + speed; //0-100
if (key == 'opacity') {
obj.style.opacity = leader / 100;
obj.style.filter = "alpha(opacity=" + leader + ")";
} else if (key == "zIndex") {
obj.style.zIndex = json['zIndex'];
} else {
obj.style[key] = leader + "px";
}
if (leader != target) {
flag = false
}
}
if (flag) {
clearInterval(obj.timer);
if (fn) {
fn();
}
}
}, 20)
}
function getStyle(obj, attr) {
if (window.getComputedStyle) {
return window.getComputedStyle(obj, null)[attr]
} else {
return obj.currentStyle[attr];
}
}
</script>
</body>
</html>
三、楼层跳跃。该动画效果也大多使用在电商网站，当点击到相应的标签时就会跳到该位置的内容。例如：当点击淘宝旁的楼层跳跃中的美妆/女装时就会跳到美妆/女装模块。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
}
ul.nav{
position: fixed;
top: 80px;
left: 20px;
}
ul.nav li{
width: 70px;
height: 40px;
color: #fff;
cursor: pointer;
background: #ccc;
text-align: center;
line-height: 40px;
list-style: none;
margin-top: 10px;
}
ul.nav .current{
background: red;
}
ul.content{
height: 500%;
}
ul.content li{
height: 20%;
text-align: center;
font: 100px/200px "微软雅黑";
}
</style>
</head>
<body>
<ul class="nav">
<li>享品质</li>
<li>服饰美妆</li>
<li>家电手机</li>
<li>电脑数码</li>
<li>3C运动</li>
</ul>
<ul class="content">
<li>享品质</li>
<li>服饰美妆</li>
<li>家电手机</li>
<li>电脑数码</li>
<li>3C运动</li>
</ul>
<script type="text/javascript">
var color=['skyblue','yellowgreen','pink','cornflowerblue',' #87CEEB'];
var navlis=document.getElementsByTagName("ul")[0].children;
var contentlis=document.getElementsByTagName("ul")[1].children;
for(var i=0;i<color.length;i++){
contentlis[i].style.background=color[i];
}
for(var i=0;i<navlis.length;i++){
navlis[i].index=i;
navlis[i].onclick=function(){
for(var j=0;j<navlis.length;j++){
navlis[j].className="";
}
this.className="current";
var yPos=this.index*document.body.offsetHeight;
clearInterval(window.timer);
window.timer=setInterval(function(){
var speed=(yPos-scroll().top)/10;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
window.scrollTo(0,scroll().top+speed);
if(scroll().top==yPos){
clearInterval(Window.timer);
}
},30)
}
}
window.onscroll=function(){
var num=scroll().top/document.body.offsetHeight;
num=Math.ceil(num*2)/2;
if(parseInt(num)!=num){
num=num-0.5;
}
for(var j=0;j<navlis.length;j++){
navlis[j].className="";
}
navlis[num].className="current";
}
function scroll(){
return{
"top":document.body.scrollTop+document.documentElement.scrollTop,
"left":document.body.scrollLeft+document.documentElement.scrollLeft
}
}
</script>
</body>
</html>
四、返回顶部。返回顶部严格来说并不算真正意义上的动画效果，通过锚点就可以实现返回顶部的效果，但此返回顶部效果是滚动条缓慢的回到顶部，这个动画效果几乎在每个网页都可以看到。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html{
height:100%;
}
body{
height: 600%;
}
div{
position: fixed;
right: 30px;
bottom: 20px;
display: none;
}
</style>
</head>
<body>
<div>
<img src="Top.jpg" />
</div>
<script type="text/javascript">
var div=document.getElementsByTagName("div")[0];
var img=div.children[0];
window.onscroll=function(){
if(scroll().top>100){
div.style.display="block";
}else{
div.style.display="none";
}
}
img.onclick=function(){
clearInterval(img.timer);
img.timer=setInterval(function(){
var speed=(0-scroll().top)/10;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
window.scrollTo(0,scroll().top+speed);
if(scroll().top==0){
clearInterval(img.timer);
}
},30)
}
function scroll(){
return{
"top":document.documentElement.scrollTop+document.body.scrollTop,
"left":document.documentElement.scrollLeft+document.body.scrollLeft
}
}
</script>
</body>
</html>
常见的JS动画效果还有许多更炫酷的，以上皆是一些比较普通的，但无论多炫酷的动画效果都是以以上的动画效果的原理为基础，以上动画虽然普通但性能方面没有太大问题。
