常见JS动画效果
来源：互联网 发布：xp电脑无法连接网络 编辑：程序博客网 时间：2024/06/05 11:20
作为一名前端开发人员，想要的大多都是，在开发过程中，看着自己制作的动画的炫酷以及困难的解决；开发结束后，自己的项目、成果可以被他人认可接受。人们浏览网页时，若一个网页动画效果丰富炫酷，性能良好，体验度良好，自然会受到吸引去打来浏览。吸引用户，自然少不了网页的布局优美、色彩搭配的恰当，更重要的是其中吸引人的炫酷动画效果。
在这里，我为大家提供几种常用的动画效果，虽然没有什么特别，不是很炫酷，但很常见也很便捷。
一、轮播图：
轮播图在网页中运用较广，经常使用于头部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动画效果还有许多更炫酷的，以上皆是一些比较普通的，但无论多炫酷的动画效果都是以以上的动画效果的原理为基础，以上动画虽然普通但性能方面没有太大问题。
阅读全文
0 0
- 常见JS动画效果
- js动画效果
- js动画效果
- js动画效果
- js实现动画效果
- js中的动画效果
- js原生动画效果
- JS动画效果
- JS动画效果
- 20150730 JS动画效果实现
- Tweenmax.js 绳索动画效果
- JS实现动画效果框架
- js小动画效果完整版
- js延迟动画效果demo
- three.js 动画效果01
- 用js实现动画效果
- JS实现倒计时动画效果
- 《js动画效果》之速度动画
- Google object detection API
- jQuery实现jQuery-form.js实现异步上传文件
- git从已有分支拉新分支开发
- c++中vector向量几种情况的总结（向量指针，指针的向量）
- Notice: Undefined index: user in D:\phpStudy\WWW\js\ls\lsmc\php\add.php on line 9
- 常见JS动画效果
- [python]leetcode(148). Sort List
- Git 使用篇二：小组协作开发
- nginx在phpstudy下配置https
- windows开发，如何使Sleep函数精确到1毫秒
- Pentaho PDI用Kitchen自动运行job
- RMAN Crosscheck/Delete
- 我如何用六个月时间拿到网易游戏，腾讯，百度，美团，华为的offer的
- linux服务器搭建
