原生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 相关文章推荐
让iframe自适应高度(支持XHTML,支持FF)
Jul 24 Javascript
js判断选择时间不能小于当前时间的示例代码
Sep 24 Javascript
JS比较2个日期间隔的示例代码
Apr 15 Javascript
jQuery插件bgStretcher.js实现全屏背景特效
Jun 05 Javascript
iframe中子父类窗口调用JS的方法及注意事项
Aug 25 Javascript
微信支付 JS API支付接口详解
Jul 11 Javascript
详解vue跨组件通信的几种方法
Jun 15 Javascript
ECMAScript6变量的解构赋值实例详解
Sep 19 Javascript
浅谈Vue.js中ref ($refs)用法举例总结
Dec 19 Javascript
详解vue中的computed的this指向问题
Dec 05 Javascript
VUE实现自身整体组件销毁的示例代码
Jan 13 Javascript
如何在CocosCreator里画个炫酷的雷达图
Apr 16 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
谈谈PHP语法(2)
2006/10/09 PHP
PHP实现Unicode编码相互转换的方法示例
2020/11/17 PHP
laravel框架数据库操作、查询构建器、Eloquent ORM操作实例分析
2019/12/20 PHP
js判断浏览器的比较全的代码
2007/02/13 Javascript
capacityFixed 基于jquery的类似于新浪微博新消息提示的定位框
2011/05/24 Javascript
JS getAttribute和setAttribute(取得和设置属性)的使用介绍
2013/07/10 Javascript
深入理解JavaScript系列(43):设计模式之状态模式详解
2015/03/04 Javascript
JS实现将Asp.Net的DateTime Json类型转换为标准时间的方法
2016/08/02 Javascript
Javascript中字符串和数字的操作方法整理
2017/01/22 Javascript
js中的触发事件对象event.srcElement与event.target详解
2017/03/15 Javascript
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
2017/05/20 jQuery
node.js+captchapng+jsonwebtoken实现登录验证示例
2017/08/17 Javascript
详解angular笔记路由之angular-router
2017/09/12 Javascript
vue语法之拼接字符串的示例代码
2017/10/25 Javascript
javascript字体颜色控件的开发 JS实现字体控制
2017/11/27 Javascript
JavaScript实现的超简单计算器功能示例
2017/12/23 Javascript
javascript将非数值转换为数值
2018/09/13 Javascript
判断JavaScript中的两个变量是否相等的操作符
2019/12/21 Javascript
python改变日志(logging)存放位置的示例
2014/03/27 Python
Python的Asyncore异步Socket模块及实现端口转发的例子
2016/06/14 Python
django中模板的html自动转意方法
2018/05/27 Python
Python使用一行代码获取上个月是几月
2018/08/30 Python
python命令行参数用法实例分析
2019/06/25 Python
妙用itchat! python实现久坐提醒功能
2019/11/25 Python
Pytorch之保存读取模型实例
2019/12/30 Python
python 使用raw socket进行TCP SYN扫描实例
2020/05/05 Python
python 安装移动复制第三方库操作
2020/07/13 Python
3D动画《斗罗大陆》上线当日播放过亿
2021/03/16 国漫
Html5上传图片 移动端、PC端通用代码
2016/06/08 HTML / CSS
印尼在线旅游门户网站:NusaTrip
2019/11/01 全球购物
Steiff台湾官网:德国金耳釦泰迪熊
2019/12/26 全球购物
班主任对学生的评语
2014/04/26 职场文书
奉献演讲稿范文
2014/05/21 职场文书
学党史心得体会
2014/09/05 职场文书
2014年新教师工作总结
2014/11/08 职场文书
2015年爱牙日活动总结
2015/02/05 职场文书