原生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 相关文章推荐
Js 获取HTML DOM节点元素的方法小结
Apr 24 Javascript
js从Cookies里面取值的简单实现
Jun 30 Javascript
JQuery CheckBox(复选框)操作方法汇总
Apr 15 Javascript
jquery解析json格式数据的方法(对象、字符串)
Nov 24 Javascript
Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证)
May 09 Javascript
基于BootStrap的前端分页带省略号和上下页效果
May 18 Javascript
JavaScript中递归实现的方法及其区别
Sep 12 Javascript
Vue 进入/离开动画效果
Dec 26 Javascript
bootstrap-table.js扩展分页工具栏(增加跳转到xx页)功能
Dec 28 Javascript
JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码
Apr 21 Javascript
jQuery实现消息弹出框效果
Dec 10 jQuery
javascript中innerHTML 获取或替换html内容的实现代码
Mar 17 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
PHP和JAVA中的重载(overload)和覆盖(override) 介绍
2012/03/01 PHP
基于在生产环境中使用php性能测试工具xhprof的详解
2013/06/03 PHP
PHP连接MySQL查询结果中文显示乱码解决方法
2013/10/25 PHP
在Win7 中为php扩展配置Xcache
2014/10/08 PHP
PHP启动windows应用程序、执行bat批处理、执行cmd命令的方法(exec、system函数详解)
2014/10/20 PHP
php+ajax实现无刷新的新闻留言系统
2020/12/21 PHP
使用PHP实现微信摇一摇周边红包
2016/01/04 PHP
详解WordPress中调用评论模板和循环输出评论的PHP函数
2016/01/05 PHP
php抽象方法和抽象类实例分析
2016/12/07 PHP
php进行md5加密简单实例方法
2019/09/19 PHP
JavaScript 基础篇之对象、数组使用介绍(三)
2012/04/07 Javascript
JavaScript 操作table,可以新增行和列并且隔一行换背景色代码分享
2013/07/05 Javascript
JS动态调用方法名示例介绍
2013/12/18 Javascript
JavaScript中的Math 使用介绍
2014/04/21 Javascript
javascript中通过arguments参数伪装方法重载
2014/10/08 Javascript
js性能优化技巧
2015/11/29 Javascript
JS Attribute属性操作详解
2016/05/19 Javascript
jquery判断页面网址是否有效的两种方法
2016/12/11 Javascript
javascript history对象详解
2017/02/09 Javascript
读懂CommonJS的模块加载
2019/04/19 Javascript
JS Thunk 函数的含义和用法实例总结
2020/04/08 Javascript
vue使用keep-alive实现组件切换时保存原组件数据方法
2020/10/30 Javascript
详解Python中的序列化与反序列化的使用
2015/06/30 Python
python实现集中式的病毒扫描功能详解
2019/07/09 Python
基于python计算滚动方差(标准差)talib和pd.rolling函数差异详解
2020/06/08 Python
python如何实现DES加密
2020/09/21 Python
HTML5头部标签的一些常用信息小结
2016/10/23 HTML / CSS
销售总监岗位职责
2014/01/04 职场文书
实习单位接收函
2014/01/11 职场文书
《黄河颂》教学反思
2014/02/07 职场文书
数学检讨书1000字
2014/02/24 职场文书
简单通用的简历自我评价
2014/09/21 职场文书
群众路线教育实践活动民主生活会个人检查对照思想汇报
2014/10/04 职场文书
《吃水不忘挖井人》教学反思
2016/02/22 职场文书
创业项目(超低成本创业项目)
2019/08/16 职场文书
Python 的 sum() Pythonic 的求和方法详细
2021/10/16 Python