原生js实现百叶窗效果及原理介绍


Posted in Javascript onApril 12, 2016

百叶窗大家都见过吧!如图:

原生js实现百叶窗效果及原理介绍

原生js实现百叶窗效果及原理介绍原生js实现百叶窗效果及原理介绍原生js实现百叶窗效果及原理介绍

原理:

如图所示,空心格子就好比是每个li,给它设定相对定位属性,设置overflow:hidden;黑块为li子元素,高度为li的2倍,设置absolute属性,我们正是要改变它的top值从而获得变化!(右上角多余块与本图无关)

原生js实现百叶窗效果及原理介绍原生js实现百叶窗效果及原理介绍

布局分析:

注意top值得变化!默认top=0时候,显示的“一楼上铺”,当top=-40px时候,li的子元素 上移40px,这时候显示的内容就为“一楼下铺”注意p元素的包裹层div

原生js实现百叶窗效果及原理介绍

原生js实现百叶窗效果及原理介绍原生js实现百叶窗效果及原理介绍

JS分析:
1、要开多个定时器来达到效果
2、执行相反方向
3、执行多组运动
4、累加产生错落感
5、产生时间间隔的动画
JS代码如下:

<script>
  window.onload = function(){
   var oUl = document.getElementById('ul1');
   var oUl2 = document.getElementById('ul2');

   toShow(oUl);
   //每四秒执行一次
   setTimeout(function(){
    toShow(oUl2);     
   },4000); 
   function toShow(obj){
    var aDiv = obj.getElementsByTagName('div');
    var iNow = 0;
    var timer = null;
    var bBtn = true;

    setInterval(function(){   
     toChange(); 
    },2000);
    function toChange(){
     timer = setInterval(function(){
      if(iNow==aDiv.length){
       clearInterval(timer);
       iNow = 0;
       bBtn = !bBtn;
      }
      else if(bBtn){
       startMove(aDiv[iNow],{top:0},function(){
        var p = document.getElementsByClassName('p-2');
        for(var i=0; i<p.length;i++){
         p[i].style.background = 'red';
        }
       });
       iNow++;
      }
      else{
       startMove(aDiv[iNow],{top:-30});
       iNow++;
      }     
     },100);     
    }    
   }   
  };


 //运动框架
  function startMove(obj,json,endFn){ 
   clearInterval(obj.timer);  
   obj.timer = setInterval(function(){   
    var bBtn = true;   
    for(var attr in json){    
     var iCur = 0;   
      iCur = parseInt(getStyle(obj,attr)) || 0;
     var iSpeed = (json[attr] - iCur)/8;
      iSpeed = iSpeed >0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);

     if(iCur!=json[attr]){
      bBtn = false;
     }
     obj.style[attr] = iCur + iSpeed + 'px';    
    }   
    if(bBtn){
     clearInterval(obj.timer);
     if(endFn){
      endFn.call(obj);
     }
    }
   },30); 
  }




//获取非行间样式
  function getStyle(obj,attr){
   if(obj.currentStyle){
    return obj.currentStyle[attr];
   }
   else{
    return getComputedStyle(obj,false)[attr];
   }
  }
 </script>

下载地址:js实现百叶窗效果
以上就是本文的全部内容,希望对大家学习实现js百叶窗效果有所帮助。

Javascript 相关文章推荐
去除链接虚线全面分析总结
Aug 15 Javascript
javascript-TreeView父子联动效果保持节点状态一致
Aug 12 Javascript
javascript里绝对用的上的字符分割函数总结
Jul 31 Javascript
javascript中window.open在原来的窗口中打开新的窗口(不同名)
Nov 15 Javascript
node.js实现微信JS-API封装接口的示例代码
Sep 06 Javascript
详解webpack require.ensure与require AMD的区别
Dec 13 Javascript
详解react native页面间传递数据的几种方式
Nov 07 Javascript
JS中的算法与数据结构之常见排序(Sort)算法详解
Aug 16 Javascript
javascript实现简易的计算器
Jan 17 Javascript
React实现轮播效果
Aug 25 Javascript
vue 使用原生组件上传图片的实例
Sep 08 Javascript
前端如何实现动画过渡效果
Feb 05 Javascript
CascadeView级联组件实现思路详解(分离思想和单链表)
Apr 12 #Javascript
jquery中实现时间戳与日期相互转换
Apr 12 #Javascript
Angular.js与Bootstrap相结合实现表格分页代码
Apr 12 #Javascript
JS代码防止SQL注入的方法(超简单)
Apr 12 #Javascript
zTree插件下拉树使用入门教程
Apr 11 #Javascript
对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache详解
Apr 11 #Javascript
js创建jsonArray传输至后台及后台全面解析
Apr 11 #Javascript
You might like
ThinkPHP的模版中调用session数据的方法
2014/07/01 PHP
php上传图片类及用法示例
2016/05/11 PHP
thinkphp3.2中实现phpexcel导出带生成图片示例
2017/02/14 PHP
php实现生成带二维码图片并强制下载功能
2018/02/24 PHP
XHTML-Strict 内允许出现的标签
2006/12/11 Javascript
Javascript实例教程(19) 使用HoTMetal(6)
2006/12/23 Javascript
JQuery 引发两次$(document.ready)事件
2010/01/15 Javascript
javascript 进阶篇2 CSS XML学习
2012/03/14 Javascript
JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
2014/04/03 Javascript
js过滤HTML标签完整实例
2015/11/26 Javascript
AngularJS基础 ng-options 指令详解
2016/08/02 Javascript
微信小程序page的生命周期和音频播放及监听实例详解
2017/04/07 Javascript
javascript中mouseenter与mouseover的异同
2017/06/06 Javascript
Vue实现带进度条的文件拖动上传功能
2018/02/23 Javascript
浅谈vue-cli 3.0.x 初体验
2018/04/11 Javascript
5分钟学会Vue动画效果(小结)
2018/07/21 Javascript
Vue表单输入绑定的示例代码
2018/11/01 Javascript
Vue.js中的组件系统
2019/05/30 Javascript
Vue开发环境中修改端口号的实现方法
2019/08/15 Javascript
npm全局环境变量配置详解
2020/12/15 Javascript
python交互式图形编程实例(三)
2017/11/17 Python
Python使用functools实现注解同步方法
2018/02/06 Python
Django中间件拦截未登录url实例详解
2019/09/03 Python
python中selenium库的基本使用详解
2020/07/31 Python
Python3如何使用多线程升程序运行速度
2020/08/11 Python
深入了解Python装饰器的高级用法
2020/08/13 Python
运动鞋、街头服装、手表和手袋的实时市场:StockX
2020/11/25 全球购物
介绍一下Cookie和Session及他们之间的区别
2012/11/20 面试题
自我鉴定范文300字
2013/10/01 职场文书
临床护士自荐信
2014/01/31 职场文书
车队司机个人自我鉴定
2014/04/17 职场文书
采购部长岗位职责
2014/06/13 职场文书
2014年医药代表工作总结
2014/11/22 职场文书
记者节感言
2015/08/03 职场文书
小学大队干部竞选稿
2015/11/20 职场文书
php去除数组中为0的元素的实例分析
2021/11/17 PHP