原生JS实现风箱式demo,并封装了一个运动框架(实例代码)


Posted in Javascript onJuly 22, 2016

声明,该DEMO依托于某个培训机构中,非常感谢这个培训结构。话不多说,现在开始改demo的制作。

首先,在前端的学习过程中,轮播图是我们一定要学习的,所以为了更加高效的实现各种轮播图,封装了一个运动的框架。

function getStyle(obj,attr) {
  if(obj.currentStyle){
    return obj.currentStyle[attr];//为了获取IE下的属性值
  }else{
    return window.getComputedStyle(obj,null)[attr];//为了获取W3C浏览器下的属性值
  }
}

function animate(obj,json){
  clearInterval(obj.timer);
  obj.timer = setInterval(function () {
    var flag = true;
    var current = 0;
    for(var attr in json){
      if(attr == 'opacity'){
        current = parseInt(getStyle(obj,attr)*100);
      }else{
        current = parseInt(getStyle(obj,attr));
      };

      var step = (json[attr] - current) / 10;
      step = step > 0 ? Math.ceil(step) : Math.floor(step);
      //先判断属性是否为透明度
      if(attr == 'opacity'){
        //首先判断浏览器是否支持opacity
        if('opacity' in obj.style){
          obj.style.opacity = (current + step) / 100;
        }else{
          obj.style.filter = 'alpha(opacity = ' + (current + step) + ')';
        }
      //再判断属性是否为z-index
      }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);
    }
  },5);
}

在该框架中兼容了不同的浏览器,并且允许传入opacity和z-index这样的属性,当然,像width,height,left,right这样常见的属性是必不可少的。利用该框架,可以实现非常棒的效果。所以现在开始正式做该DEMO。

首先是index.html的制作。

<div id="box">
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

index.html的制作非常的简单,我们会将图片作为li的背景图片在javascript中进行插入。之后,我们进行CSS样式的调节。

*{
    margin:0px;
    padding:0px;
  }
  #box{
    width:1300px;
    height:400px;
    margin:100px auto;
    overflow: hidden;
  }
  #box ul{
    height:400px;
    width:1300px;
  }
  #box ul li{
    width:240px;
    height:400px;
    float:left;
    overflow: hidden;
  }

javascript的代码如下:

window.onload = function () {
    var box = document.getElementById('box');
    var aLi = box.children[0].children;
    for(var i=0;i<aLi.length;i++){
      aLi[i].style.backgroundImage = 'url(' + 'images/' + (i + 1) + '.jpg';
      aLi[i].onmouseover = function(){
        for(var i=0;i<aLi.length;i++){
          animate(aLi[i],{width:100});
        }
        animate(this,{width:800});
      };
      aLi[i].onmouseout = function(){
        for(var i=0;i<aLi.length;i++){
          animate(aLi[i],{width:240});
        }
      }
    }
  }

这样使用原生JS实现的风箱效果demo就实现了,当然,还可以利用封装好的animate框架实现类似网易的轮播图效果。

以上这篇原生JS实现风箱式demo,并封装了一个运动框架(实例代码)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
AutoSave/自动存储功能实现
Mar 24 Javascript
脚本安需导入(装载)的三种模式的对比
Jun 24 Javascript
jQuery 位置插件
Dec 25 Javascript
GreyBox技术总结(转)
Nov 23 Javascript
jQuery 图片切换插件(代码比较少)
May 07 Javascript
Angularjs中三种数据的绑定策略(“@”,“=”,“&amp;”)
Dec 23 Javascript
让你5分钟掌握9个JavaScript小技巧
Jun 09 Javascript
jquery获取元素到屏幕四周可视距离的方法
Sep 05 jQuery
vue实现路由切换改变title功能
May 28 Javascript
关于layui表单中按钮自动提交的解决方法
Sep 09 Javascript
layui树形菜单动态遍历的例子
Sep 23 Javascript
vue中的双向数据绑定原理与常见操作技巧详解
Mar 16 Javascript
jQuery 更改checkbox的状态,无效的解决方法
Jul 22 #Javascript
Javascript字符串常用方法详解
Jul 21 #Javascript
jQuery实现鼠标经过购物车出现下拉框代码(推荐)
Jul 21 #Javascript
javascript实现滚动效果的数字时钟实例
Jul 21 #Javascript
如何用JS判断两个数字的大小
Jul 21 #Javascript
AngularJs基本特性解析(一)
Jul 21 #Javascript
jQuery表单验证插件解析(推荐)
Jul 21 #Javascript
You might like
优化NFR之一 --MSSQL Hello Buffer Overflow
2006/10/09 PHP
php 遍历目录,生成目录下每个文件的md5值并写入到结果文件中
2016/12/12 PHP
PHP将字符串首字母大小写转换的实例
2017/01/21 PHP
浅谈php使用curl模拟多线程发送请求
2019/03/08 PHP
详解PHP神奇又有用的Trait
2019/03/25 PHP
前端开发部分总结[兼容性、DOM操作、跨域等](持续更新)
2010/03/04 Javascript
JavaScript 代码压缩工具小结
2012/02/27 Javascript
js实现仿QQ秀换装效果的方法
2015/03/04 Javascript
jquery实现可自动判断位置的弹出层效果代码
2015/10/12 Javascript
使用微信内嵌H5网页解决JS倒计时失效问题
2017/01/13 Javascript
jQuery动态移除和添加背景图片的方法详解
2017/03/07 Javascript
javascript编程实现栈的方法详解【经典数据结构】
2017/04/11 Javascript
Node.js中的require.resolve方法使用简介
2017/04/23 Javascript
JS仿QQ好友列表展开、收缩功能(第一篇)
2017/07/07 Javascript
javascript定时器取消定时器及优化方法
2017/07/08 Javascript
JavaScript实现HTML5游戏断线自动重连的方法
2017/09/18 Javascript
详解NodeJs开发微信公众号
2018/05/25 NodeJs
vue路由中前进后退的一些事儿
2019/05/18 Javascript
Vue学习笔记之计算属性与侦听器用法
2019/12/07 Javascript
原生js拖拽实现图形伸缩效果
2020/02/10 Javascript
jquery绑定事件 bind和on的用法与区别分析
2020/05/22 jQuery
Js利用正则表达式去除字符串的中括号
2020/11/23 Javascript
深入剖析Python的爬虫框架Scrapy的结构与运作流程
2016/01/20 Python
python探索之BaseHTTPServer-实现Web服务器介绍
2017/10/28 Python
python3在同一行内输入n个数并用列表保存的例子
2019/07/20 Python
python生成大写32位uuid代码
2020/03/03 Python
python解析xml文件方式(解析、更新、写入)
2020/03/05 Python
python suds访问webservice服务实现
2020/06/26 Python
Python使用文件操作实现一个XX信息管理系统的示例
2020/07/02 Python
python3列表删除大量重复元素remove()方法的问题详解
2021/01/04 Python
利用HTML5 Canvas API绘制矩形的超级攻略
2016/03/21 HTML / CSS
安全标语大全
2014/06/10 职场文书
详解PHP服务器如何在有限的资源里最大提升并发能力
2021/05/25 PHP
python flappy bird小游戏分步实现流程
2022/02/15 Python
Mysql事务索引知识汇总
2022/03/17 MySQL
MySQL 主从复制数据不一致的解决方法
2022/03/18 MySQL