原生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 相关文章推荐
JQuery下关于$.Ready()的分析
Dec 13 Javascript
ASP.NET jQuery 实例4(复制TextBox的文本到本地剪贴板上)
Jan 13 Javascript
Jquery实现视频播放页面的关灯开灯效果
May 27 Javascript
jQuery中的read和JavaScript中的onload函数的区别
Aug 27 Javascript
jQuery插件PageSlide实现左右侧栏导航菜单
Apr 12 Javascript
Sublime Text 3常用插件及安装方法
Dec 16 Javascript
AngularJS中directive指令使用之事件绑定与指令交互用法示例
Nov 22 Javascript
Bootstrap中datetimepicker使用小结
Dec 28 Javascript
Three.js获取鼠标点击的三维坐标示例代码
Mar 24 Javascript
ES6 javascript的异步操作实例详解
Oct 30 Javascript
浅谈vue获得后台数据无法显示到table上面的坑
Aug 13 Javascript
手写实现JS中的new
Nov 07 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 图片上添加透明度渐变的效果
2009/06/29 PHP
php设计模式 Factory(工厂模式)
2011/06/26 PHP
php目录遍历函数opendir用法实例
2014/11/20 PHP
PHP的关于变量和日期处理的一些面试题目整理
2015/08/10 PHP
PHP chunk_split()函数讲解
2019/02/12 PHP
PHP 实现文件压缩解压操作的方法
2019/06/14 PHP
laravel框架数据库操作、查询构建器、Eloquent ORM操作实例分析
2019/12/20 PHP
javascript js cookie的存储,获取和删除
2007/12/29 Javascript
HTML中Select不用Disabled实现ReadOnly的效果
2008/04/07 Javascript
jquery异步调用页面后台方法&amp;#8207;(asp.net)
2011/03/01 Javascript
jquery插件开发方法(初学者)
2012/02/03 Javascript
javascript中打印当前的时间实现思路及代码
2013/12/18 Javascript
浅析如何利用angular结合translate为项目实现国际化
2016/12/08 Javascript
Angular实现响应式表单
2017/08/04 Javascript
Mui使用jquery并且使用点击跳转新窗口的实例
2017/08/19 jQuery
不使用 JS 匿名函数理由
2017/11/17 Javascript
vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)
2018/11/05 Javascript
微信小程序与后台PHP交互的方法实例分析
2018/12/10 Javascript
使用webpack4编译并压缩ES6代码的方法示例
2019/04/24 Javascript
Vue中props的详解
2019/05/16 Javascript
python妙用之编码的转换详解
2017/04/21 Python
python批量替换多文件字符串问题详解
2018/04/22 Python
Python中文件的写入读取以及附加文字方法
2019/01/23 Python
CSS3教程:新增加的结构伪类
2009/04/02 HTML / CSS
Kathmandu新西兰官网:新西兰户外运动品牌
2019/07/27 全球购物
可以使用抽象函数重写基类中的虚函数吗
2013/06/02 面试题
大三在校生电子商务求职信
2013/10/29 职场文书
关于廉洁的广播稿
2014/01/30 职场文书
煤矿机修工岗位职责
2014/02/07 职场文书
洗手间标语
2014/06/23 职场文书
2014年安全管理工作总结
2014/12/01 职场文书
客房部经理岗位职责
2015/02/02 职场文书
2015年社区民政工作总结
2015/04/21 职场文书
背起爸爸上学观后感
2015/06/08 职场文书
《认识钟表》教学反思
2016/02/16 职场文书
windows server 2016 域环境搭建的方法步骤(图文)
2022/06/25 Servers