JS封装动画框架,网易轮播图,旋转轮播图
2017-04-25 14:14
633 查看
JS封装动画框架,网易轮播图,旋转轮播图
1. JS封装运动框架
// 多个属性运动框架 添加回调函数 function animate(obj,json,fn) { clearInterval(obj.timer); obj.timer = setInterval(function() { var flag = true; // 用来判断是否停止定时器 一定写到遍历的外面 for(var attr in json){ // attr 属性 json[attr] 值 //开始遍历 json // 计算步长 用 target 位置 减去当前的位置 除以 10 // console.log(attr); var current = 0; if(attr == "opacity") { current = Math.round(parseInt(getStyle(obj,attr)*100)) || 0; // console.log(current); } else { current = parseInt(getStyle(obj,attr)); // 数值 } // console.log(current); // 目标位置就是 属性值 var step = ( json[attr] - current) / 10; // 步长 用目标位置 - 现在的位置 / 10 step = step > 0 ? Math.ceil(step) : Math.floor(step); //判断透明度 if(attr == "opacity") // 判断用户有没有输入 opacity { if("opacity" in obj.style) // 判断 我们浏览器是否支持opacity { // obj.style.opacity obj.style.opacity = (current + step) /100; } else { // obj.style.filter = alpha(opacity = 30) obj.style.filter = "alpha(opacity = "+(current + step)* 10+")"; } } else if(attr == "zIndex") { obj.style.zIndex = json[attr]; } else { obj.style[attr] = current + step + "px" ; } if(current != json[attr]) // 只要其中一个不满足条件 就不应该停止定时器 这句一定遍历里面 { flag = false; } } if(flag) // 用于判断定时器的条件 { clearInterval(obj.timer); // alert("ok了"); if(fn) // 很简单 当定时器停止了。 动画就结束了 如果有回调,就应该执行回调 { fn(); // 函数名 + () 调用函数 执行函数 } } },30) } function getStyle(obj,attr) { // 谁的 那个属性 if(obj.currentStyle) // ie 等 { return obj.currentStyle[attr]; // 返回传递过来的某个属性 } else { return window.getComputedStyle(obj,null)[attr]; // w3c 浏览器 } }
2. 网易轮播图
效果图算是原理图吧
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>网易轮播图</title> <link rel="stylesheet" href="css/css.css"> <script src="js/myJS.js" type="text/javascript"></script> <script src="js/index.js" type="text/javascript"></script> </head> <body> <div class="box" id="js_box"> <div class="slider" id="slider"> <div class="slider-main" id="slider_mian"> <div class="slider-mian-img"><a href="javascript:;"><img src="images/1.jpg" alt=""></a></div> <div class="slider-mian-img"><a href="javascript:;"><img src="images/2.jpg" alt=""></a></div> <div class="slider-mian-img"><a href="javascript:;"><img src="images/3.jpg" alt=""></a></div> <div class="slider-mian-img"><a href="javascript:;"><img src="images/4.jpg" alt=""></a></div> <div class="slider-mian-img"><a href="javascript:;"><img src="images/5.jpg" alt=""></a></div> <div class="slider-mian-img"><a href="javascript:;"><img src="images/6.jpg" alt=""></a></div> </div> </div> <div class="slider-ctrl" id="slider_ctrl"> <span class="slider-ctrl-pre"></span> <span class="slider-ctrl-next"></span> </div> </div> </body> </html>
CSS
* { margin: 0; padding: 0; } img { vertical-align: bottom; } .box { width: 310px; height: 270px; margin: 100px auto; position: relative; overflow: hidden; } .slider { width: 100%; height: 220px; background-color: red; } .slider-ctrl { text-align: center; } .slider-ctrl-con { display: inline-block; width: 35px; height: 20px; background: url("../images/icon.png") no-repeat -24px -782px; margin: 10px 0 0 5px; cursor: pointer; text-indent: 99em; overflow: hidden; } .current { background-position: -24px -762px; } .slider-ctrl-pre, .slider-ctrl-next { position: absolute; top: 50%; margin-top: -35px; display: inline-block; width: 30px; height: 34px; background: url("../images/icon.png") no-repeat; opacity: 0.8; cursor: pointer; } .slider-ctrl-pre { left: 0; background-position: 5px top; } .slider-ctrl-next { right: 0; background-position: -4px -45px; } .slider-main { width: 200%; height: 100%; background-color: orange; } .slider-mian-img { position: absolute; left: 0; top: 0; }
JavaScript
window.onload = function () { var slider = $("slider"); var slider_mian = $("slider_mian"); // 存放图片的盒子 var slider_main_imgs = slider_mian.children; // 图片数组 var slider_ctrl = $("slider_ctrl"); // pageControl var slider_ctrls = slider_ctrl.children; // 加载pageontrol for (var i=0;i<slider_main_imgs.length;i++) { var span = document.createElement("span"); span.className = "slider-ctrl-con"; span.innerHTML = slider_main_imgs.length - i; slider_ctrl.insertBefore(span,slider_ctrls[1]); } slider_ctrl.children[1].className = "slider-ctrl-con current"; for (var i=1;i<slider_main_imgs.length;i++) { slider_main_imgs[i].style.left = slider.offsetWidth + "px"; } // 添加点击事件 var showIndex = 0; for (var index in slider_ctrls) { slider_ctrls[index].onclick = function () { if (this.className == "slider-ctrl-pre") { // 点击了左按钮 animate(slider_main_imgs[showIndex],{left:slider.offsetWidth}); showIndex--; if (showIndex < 0) { showIndex = slider_main_imgs.length - 1; } slider_main_imgs[showIndex].style.left = -slider.offsetWidth + "px"; animate(slider_main_imgs[showIndex],{left:0}); } else if (this.className == "slider-ctrl-next") { // 点击了右按钮 autoPlay(); } else { // 其他按钮 // alert(showIndex); var willShow = this.innerHTML - 1; if (willShow > showIndex) { // 点击了正在展示图片的右侧按钮 // 将要显示的图片立刻定位到右面 slider_main_imgs[willShow].style.left = slider.offsetWidth + "px"; animate(slider_main_imgs[showIndex],{left:-slider.offsetWidth}); // 当前图片慢慢走出去 animate(slider_main_imgs[willShow],{left:0}); // 将要显示的图片慢慢进来 showIndex = willShow; } else if (willShow < showIndex) { // 将要显示的图片立刻定位到左面 slider_main_imgs[willShow].style.left = -slider.offsetWidth + "px"; animate(slider_main_imgs[showIndex],{left:slider.offsetWidth}); // 当前的图片慢慢走出去 animate(slider_main_imgs[willShow],{left:0}); // 将要显示的图片慢慢进来 showIndex = willShow; } } pageControl(); } } // pageControl变化 function pageControl() { for (var i=1;i<=slider_ctrls.length - 2;i++) { slider_ctrls[i].className = "slider-ctrl-con"; } slider_ctrls[showIndex + 1].className = "slider-ctrl-con current"; } // 开启定时器 var timer = null; timer = setInterval(autoPlay,3000); function autoPlay() { animate(slider_main_imgs[showIndex],{left:-slider.offsetWidth}); showIndex++; if (showIndex > slider_main_imgs.length - 1) { showIndex = 0; } slider_main_imgs[showIndex].style.left = slider.offsetWidth + "px"; animate(slider_main_imgs[showIndex],{left:0}); pageControl(); } // 清除定时器 $("js_box").onmouseover = function () { clearInterval(timer); } $("js_box").onmouseout = function () { clearInterval(timer); timer = setInterval(autoPlay,3000); } }
2.旋转轮播图
效果图HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>旋转木马轮播图</title> <link rel="stylesheet" href="css/css.css"> <script src="js/myJS.js" type="text/javascript"></script> <script src="js/index.js" type="text/javascript"></script> </head> <body> <div class="box" id="js_box"> <div class="slider" id="js_slider"> <ul> <li><a href="javascript:;"><img src="images/slidepic1.jpg" alt=""></a></li> <li><a href="javascript:;"><img src="images/slidepic2.jpg" alt=""></a></li> <li><a href="javascript:;"><img src="images/slidepic3.jpg" alt=""></a></li> <li><a href="javascript:;"><img src="images/slidepic4.jpg" alt=""></a></li> <li><a href="javascript:;"><img src="images/slidepic5.jpg" alt=""></a></li> <li><a href="javascript:;"><img src="images/slidepic6.jpg" alt=""></a></li> </ul> </div> <div class="arrow" id="js_arrow"> <a href="javascript:;" class="pre"></a> <a href="javascript:;" class="next"></a> </div> </div> </body> </html>
CSS
* { margin: 0; padding: 0; } ul { list-style: none; } .slider { width: 1200px; height: 600px; margin: 100px auto; position: relative; } ul { width: 100%; height: 100%; } ul li { position: absolute; top: 100px; left: 200px; } ul li img { width: 100%; } .arrow { width: 100%; background-color: orange; opacity: 0; position: absolute; top: 50px; } .pre,.next { width: 76px; height: 112px; position: absolute; background: url("../images/prev.png") no-repeat; top: 0; } .pre { left: 0; } .next { right: 0; background: url("../images/next.png") no-repeat; }
JavaScript
window.onload = function () { var arrow = $("js_arrow"); // 左右按钮的盒子,整体控制左右按钮的显示与隐藏 var box = $("js_box"); var lis = $("js_slider").children[0].children; // 图片集合 var pre = arrow.children[0]; // 左按钮 var next = arrow.children[1]; // 右按钮 box.onmouseover = function () { animate(arrow,{opacity:100}); } box.onmouseout = function () { animate(arrow,{opacity:0}); } // 存储了每个图片的信息 var json = [ { // 1 width:400, top:20, left:50, opacity:20, zIndex:2 }, { // 2 width:550, top:70, left:0, opacity:80, zIndex:3 }, { // 3 width:800, top:100, left:200, opacity:100, zIndex:4 }, { // 4 width:550, top:70, left:600, opacity:80, zIndex:3 }, { //5 width:400, top:20, left:750, opacity:20, zIndex:2 }, { //6 width:350, top:0, left:425, opacity:10, zIndex:1 } ]; var flag = true; // 控制动画的标记 change(); pre.onclick = function () { if (flag == true) { // flag为true时才可以做动画 json.push(json.shift()); // 交换json flag = false; // 立即将flag修改为false,来控制动画 change(); } } next.onclick = function () { if (flag == true) { json.unshift(json.pop()); flag = false; change(); } } function change() { for (var i=0;i<lis.length;i++) { animate(lis[i],json[i],function () { // 回调函数,修改控制动画的标记 flag = true; }); } } }
相关文章推荐
- Bootstrap实现基于carousel.js框架的轮播图效果(无过渡动画)
- JS实现图片旋转动画效果封装与使用示例
- js实现图片旋转动画的封装
- [js高手之路]封装运动框架实战左右与上下滑动的焦点轮播图
- A2D JS框架 - AOP封装
- A2D JS框架 - DES加密解密 与 Cookie的封装(C#与js互相加密解密)
- Pomelo:网易开源基于 Node.js 的游戏服务端框架
- 自己封装的js前端框架(包含了jquery的常用功能)
- JS简单动画封装浅析
- 跨平台移动开发 Xuijs超轻量级的框架+Emile CSS动画
- android控件旋转一圈动画封装
- JS简单动画封装浅析
- paip.关于动画特效原理 html js 框架总结
- 网易开源基于Node.js的游戏服务器框架pomelo
- Pomelo:网易开源基于 Node.js 的游戏服务端框架
- IceMx.Mvc 我的js MVC 框架五、完善植物大战僵尸(雏形版增加动画)
- 轮播JS动画
- JS简单动画封装
- 网易开源Node.js服务端框架 pomelo 的完整安装步骤
- 给力的轻量级JavaScript动画框架 - jsMorph