原生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 相关文章推荐
二级域名转向类
Nov 09 Javascript
jquery 打开窗口返回值实现代码
Mar 04 Javascript
Jquery之美中不足小结
Feb 16 Javascript
javascript面向对象包装类Class封装类库剖析
Jan 24 Javascript
ajax与302响应代码测试
Oct 23 Javascript
js隐式全局变量造成的bug示例代码
Apr 22 Javascript
JavaScript闭包详解
Feb 02 Javascript
javascript使用shift+click实现选择和反选checkbox的方法
May 04 Javascript
快速学习AngularJs HTTP响应拦截器
Dec 31 Javascript
jQuery事件绑定方法学习总结(推荐)
Nov 21 Javascript
Angular 2.x学习教程之结构指令详解
May 25 Javascript
vuex Module将 store 分割成模块的操作
Dec 07 Vue.js
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 file_get_contents函数轻松采集html数据
2010/04/22 PHP
PHP 可阅读随机字符串代码
2010/05/26 PHP
基于session_unset与session_destroy的区别详解
2013/06/03 PHP
php使用curl出现Expect:100-continue解决方法
2015/03/03 PHP
php技术实现加载字体并保存成图片
2015/07/27 PHP
php传值和传引用的区别点总结
2019/11/19 PHP
php计数排序算法的实现代码(附四个实例代码)
2020/03/31 PHP
双击滚屏-常用推荐
2006/11/29 Javascript
一个JS小玩意 几个属性相加不能超过一个特定值.
2009/09/29 Javascript
js 动态文字滚动的例子
2011/01/17 Javascript
使用jquery中height()方法获取各种高度大全
2014/04/02 Javascript
PHP使用方法重载实现动态创建属性的get和set方法
2014/11/17 Javascript
浅谈Javascript中substr和substring的区别
2015/09/30 Javascript
AngularJs用户登录问题处理(交互及验证、阻止FQ处理)
2017/10/26 Javascript
解决iview打包时UglifyJs报错的问题
2018/03/07 Javascript
微信小程序出现wx.getLocation再次授权问题的解决方法分析
2019/01/16 Javascript
Tornado Web服务器多进程启动的2个方法
2014/08/04 Python
Python set集合类型操作总结
2014/11/07 Python
使用Python的web.py框架实现类似Django的ORM查询的教程
2015/05/02 Python
python 把文件中的每一行以数组的元素放入数组中的方法
2018/04/29 Python
logging level级别介绍
2020/02/21 Python
Keras 中Leaky ReLU等高级激活函数的用法
2020/07/05 Python
css3实现文字首尾衔接跑马灯的示例代码
2020/10/16 HTML / CSS
HTML5 Video/Audio播放本地文件示例介绍
2013/11/18 HTML / CSS
中国高端家电购物商城:顺电
2018/03/04 全球购物
护士求职信
2014/07/05 职场文书
学校纪律作风整改措施思想汇报
2014/10/11 职场文书
党员干部四风问题整改措施思想汇报
2014/10/12 职场文书
公司员工宿舍管理制度
2015/08/03 职场文书
高三物理教学反思
2016/02/20 职场文书
使用nginx动态转换图片大小生成缩略图
2021/03/31 Servers
python随机打印成绩排名表
2021/06/23 Python
PHP正则表达式之RCEService回溯
2022/04/11 PHP
vue 给数组添加新对象并赋值
2022/04/20 Vue.js
利用正则表达式匹配浮点型数据
2022/05/30 Java/Android
springboot创建的web项目整合Quartz框架的项目实践
2022/06/21 Java/Android