javaScript动画项目案例

javaScript动画项目案例

1.动画库编写

匀速运动

案例一

效果:匀速运动

 
   
    
     
     
    
匀速运动
 
    按钮 
    
 
    
 
     
    
  

使用定时器控制位置

案例二：侧边栏效果

效果:侧边栏效果

 
   
    
     
     
    
 
     拉开 
    
 
     
    
  

缓动运动

 
   
    
     
     
    
 
     拉开 
    
 
     
    
  

透明度运动

多物体运动

效果:多物体运动

注意：多物体运动时，定时器需要绑在对象上，清除定时器时，只需要清除自己的定时器即可

多值运动

链式运动

/ * 动画函数 * @param {Object} obj 当前对象 * @param {Object} attr 当前元素对象的属性 * @param {Object} end 末尾位置 * @param {Object} fn 回调函数 * */ function startAnimation(obj,attr,end,fn) { clearInterval(obj.timer); obj.timer = setInterval(function () { let cur = 0,speed = 0; if(attr === 'opacity'){ cur = Math.round(parseFloat(getStyle(obj,attr)) * 100); // console.log(getStyle(obj,attr)); }else{ cur = parseInt(getStyle(obj,attr)); } if(end === cur){ clearInterval(obj.timer); // 回调函数放在动画执行结束之后 if(fn){ fn(); } return; } // 运动 speed = end > cur ? 10:-10; if(attr === 'opacity'){ // console.log(cur + speed); obj.style[attr] = (cur + speed) / 100; obj.style['filter'] = `alpha(opacity:${cur + speed})`; }else{ obj.style[attr] = cur + speed + 'px'; } },30) } // 获取属性 function getStyle(obj,attr) { if(obj.currentStyle){ // 针对IE浏览器 return obj.currentStyle[attr]; }else{ // 针对于Firefox浏览器 return getComputedStyle(obj,null)[attr]; } } 

index.html

同时运动

动画库最终版本
myAnimation2.js

/ * 动画函数 * @param {Object} obj 当前对象 * @param {Object} json 当前元素属性列表 * @param {Object} fn 回调函数 * */ function startAnimation(obj,json,fn) { clearInterval(obj.timer); obj.timer = setInterval(function () { let cur = 0,speed = 0; let flag = true; // flag:代表所有动画执行完毕 // 将json中所有元素属性遍历，修改 for(attr in json){ let end = json[attr]; // 获取对象属性值 switch(attr){ case "opacity": cur = Math.round(parseFloat(getStyle(obj,attr)) * 100); break; case "scrollTop": cur = obj[attr]; break; default: cur = parseInt(getStyle(obj,attr)); } // 临界处理 该动画没有执行完毕 if(end !== cur){ flag = false; }else{ continue; } console.log(cur); // 设置速度：判断结束值end和当前值cur相差值小于speed速度 if(end > cur){ // end=100 cur=92 speed=10 speed = end - cur < 100?end - cur:100; }else{ // end=0 cur=2 speed=-10 speed = end - cur > -100?end - cur:-100; } // 设置值 switch(attr){ case "opacity": obj.style[attr] = (cur + speed) / 100; obj.style['filter'] = `alpha(opacity:${cur + speed})`; break; case "scrollTop": obj[attr] = cur + speed; break; default: obj.style[attr] = cur + speed + 'px'; } } // 查看flag是否为true， 都当所有属性都没有被修改时，flag为true，结束动画 if(flag){ clearInterval(obj.timer); if(fn){ fn(); } return ; } },30) } // 获取属性 function getStyle(obj,attr) { if(obj.currentStyle){ // 针对IE浏览器 return obj.currentStyle[attr]; }else{ // 针对于Firefox浏览器 return getComputedStyle(obj,null)[attr]; } } 

案例

案例一：关闭页脚广告效果

案例二：侧边栏横幅效果

案例三：淘宝侧边导航效果

 
   
    
     
     
    
 
     

       爱逛好货 
     
 
     

       好店直播 
     
 
     

       品质特色 
     
 
     

       实惠热卖 
     
 
    
 
    
 
     
爱逛好货
 
     
好店直播
 
     
品质特色
 
     
实惠热卖
 
    
 
     
     
    
  

[…Divs] 使用了es6写法,将dom获取的集合类型转换为真正的数组，有forEach变量方法；这一步等价于使用for(element in Divs) 循环

案例四：轮播图

index.css

*{ padding: 0; margin: 0; } .slider{ width: 400px; height: 500px; margin: 100px auto; position: relative; overflow: hidden; } .slider_scroll { position: relative; width: 400px; height: 500px; } .slider_main{ position: relative; width: 400px; height: 500px; } .slider_main .item{ width: 40px; height: 500px; position: absolute; } .slider_main .item img{ width: 400px; height: 500px; } /* 索引部分 */ .slider_index{ width: 400px; height: 40px; line-height: 40px; text-align: center; color:#fff; font-weight: 700; z-index: 20; position: absolute; bottom: 0; background-color: rgba(0,0,0,.5); } .slider_index .slider_index_icon{ margin: 0 10px; line-height: 40px; cursor: pointer; } .slider_index .slider_index_icon.current{ color: red; } /* 下一张和上一张定位 */ .slider_scroll>span{ position: absolute; width: 30px; height: 68px; background: url(../images/icon-slides.png) no-repeat; top: 50%; margin-top: -34px; cursor: pointer; } .slider_scroll span.next{ right: 0; background-position: -46px 0; } .slider_scroll span.prev{ left: 0; background-position: 0 0; } 

index.js

window.onload = function () { // 获取元素 const slider = document.getElementById("slider"); const slider_main = document.getElementById("slider_main"); const slider_items = slider_main.children; const next = document.getElementById("next"); const prev = document.getElementById("prev"); const slider_index = document.getElementById("slider_index"); let iNode = 0; //当前显示索引的坐标 // 动态创建索引 [...slider_items].forEach((v,i)=>{ let span = document.createElement("span"); span.innerText = i+1; // 给索引添加类 if(i === 0){ span.className = "slider_index_icon current" }else{ span.className = "slider_index_icon" } slider_index.appendChild(span); }) // 让滚动元素归位 let scroll_w = this.parseInt(getStyle(slider,'width')); // console.log(scroll_w); [...slider_items].forEach((item,i,arr)=>{ if(i !== 0){ item.style.left = scroll_w + "px"; } }); // 下一步按钮 function autoPlay() { // 1.将显示的图片向左移动 startAnimation(slider_items[iNode],{ "left":-scroll_w }); // 将下一张图片放在中心盒子的右边 iNode++; if(iNode >= slider_items.length){ iNode = 0; } // console.log(slider_items[iNode].left); slider_items[iNode].style.left = scroll_w + "px"; // console.log(slider_items[iNode].left); // 将下一张图片向左移动 startAnimation(slider_items[iNode],{ "left":0 }); updateIndex(); } next.onclick = autoPlay; // 更新索引样式 let slider_index_items = slider_index.children; function updateIndex() { // console.log(slider_index_items); [...slider_index_items].forEach((item,i)=>{ if(i == iNode){ item.className = "slider_index_icon current"; }else{ item.className = "slider_index_icon" } }) } // 上一步按钮 prev.onclick = function () { // 1.将该元素右移动 startAnimation(slider_items[iNode],{ "left":scroll_w }) // 2.将上一个元素放在左边 iNode--; if(iNode < 0){ iNode += slider_items.length } slider_items[iNode].style.left = -scroll_w + "px"; // 3.将上一个元素右移 startAnimation(slider_items[iNode],{ "left":0 }) // 更新下面索引 updateIndex(); }; // 设置索引点击事件 [...slider_index_items].forEach((item,i)=> { item.onmousedown = function () { // 1.判断点击的索引与当前索引关系 if(iNode > i){ // 上一张图片效果 startAnimation(slider_items[iNode],{ "left":scroll_w }) slider_items[i].style.left = -scroll_w + "px"; }else if(iNode < i){ // 下一张图片效果 startAnimation(slider_items[iNode],{ "left":-scroll_w }) slider_items[i].style.left = scroll_w + "px"; } iNode = i; startAnimation(slider_items[iNode],{ "left":0 }) updateIndex(); } });; // 设置自动播放 let timer = window.setInterval(autoPlay,2000); // 设置鼠标悬浮停止定时器，离开开启定时器 slider.onmouseover = function () { clearInterval(timer); } slider.onmouseout = function () { timer = window.setInterval(autoPlay,2000); } } 

图片部分，在上传到github上面时，已经将素材上传上去了。