原生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 相关文章推荐
理解JavaScript中的事件
Sep 23 Javascript
jscript之Read an Excel Spreadsheet
Jun 13 Javascript
IE和Firefox下event事件杂谈
Dec 18 Javascript
jQuery版Tab标签切换
Mar 16 Javascript
jQuery通过点击行来删除HTML表格行的实现示例
Sep 10 Javascript
innerHTML属性,outerHTML属性,textContent属性,innerText属性区别详解
Mar 13 Javascript
Vue官网todoMVC示例代码
Jan 29 Javascript
CountUp.js实现数字滚动增值效果
Oct 17 Javascript
解决ele ui 表格表头太长问题的实现
Nov 13 Javascript
JavaScript实现左右滚动电影画布
Feb 06 Javascript
详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结
May 28 Javascript
解决vue scoped html样式无效的问题
Oct 24 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+MYSQL的文章管理系统(一)
2006/10/09 PHP
php中通过smtp发邮件的类,测试通过
2007/01/22 PHP
PHP常见的序列化与反序列化操作实例分析
2019/10/28 PHP
使用UglifyJS合并/压缩JavaScript的方法
2012/03/07 Javascript
用示例说明filter()与find()的用法以及children()与find()的区别分析
2013/04/26 Javascript
兼容IE和FF的图片上传前预览js代码
2013/05/28 Javascript
jquery重新播放css动画所遇问题解决
2013/08/21 Javascript
第二次聊一聊JS require.js模块化工具的基础知识
2016/04/17 Javascript
内容滑动切换效果jquery.hwSlide.js插件封装
2016/07/07 Javascript
基于jQuery实现页面搜索功能
2020/03/26 Javascript
AngularJS 入门教程之事件处理器详解
2016/08/19 Javascript
JS实现搜索框文字可删除功能
2016/12/28 Javascript
js常用的继承--组合式继承
2017/03/06 Javascript
React Native 环境搭建的教程
2017/08/19 Javascript
Bootstrap 实现表格样式、表单布局的实例代码
2018/12/09 Javascript
如何获取vue单文件自身源码路径
2019/05/06 Javascript
Python的爬虫框架scrapy用21行代码写一个爬虫
2017/04/24 Python
python 换位密码算法的实例详解
2017/07/19 Python
Python cookbook(数据结构与算法)从序列中移除重复项且保持元素间顺序不变的方法
2018/03/13 Python
python selenium 弹出框处理的实现
2019/02/26 Python
python 判断linux进程,并杀死进程的实现方法
2019/07/01 Python
numpy创建单位矩阵和对角矩阵的实例
2019/11/29 Python
Pytorch 实现冻结指定卷积层的参数
2020/01/06 Python
Django+python服务器部署与环境部署教程详解
2020/03/30 Python
Nisbets爱尔兰:英国最大的厨房和餐饮设备供应商
2019/01/26 全球购物
香港草莓网:Strawberrynet香港
2019/05/10 全球购物
美国新娘礼品店:The Paisley Box
2020/09/08 全球购物
美国婴儿服装购物网站:Gerber Childrenswear
2020/05/06 全球购物
介绍一下Ruby的多线程处理
2013/02/01 面试题
初中政治教学反思
2014/01/17 职场文书
幼儿教师寄语集锦
2014/04/03 职场文书
幼儿园家长评语大全
2014/04/16 职场文书
领导干部贪图享乐整改措施
2014/09/21 职场文书
2015年光棍节活动总结
2015/03/24 职场文书
第一军规观后感
2015/06/12 职场文书
运动会广播稿50字
2015/08/19 职场文书