原生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 相关文章推荐
JavaScript在IE中“意外地调用了方法或属性访问”
Nov 19 Javascript
Exitjs获取DataView中图片文件名
Nov 26 Javascript
javascript JSON操作入门实例
Apr 16 Javascript
在firefox和Chrome下关闭浏览器窗口无效的解决方法
Jan 16 Javascript
javascript 数组的正态分布排序的问题
Jul 31 Javascript
bootstrap datetimepicker 日期插件在火狐下出现一条报错信息的原因分析及解决办法
Mar 08 Javascript
关于element-ui的隐藏组件el-scrollbar的使用
May 29 Javascript
详解Vuex下Store的模块化拆分实践
Jul 31 Javascript
解决vscode进行vue格式化,会自动补分号和双引号的问题
Oct 26 Javascript
vue实现两个区域滚动条同步滚动
Dec 13 Vue.js
Vue中ref和$refs的介绍以及使用方法示例
Jan 11 Vue.js
ReactRouter的实现方法
Jan 25 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
综合图片计数器
2006/10/09 PHP
解析php DOMElement 操作xml 文档的实现代码
2013/05/10 PHP
WordPress特定文章对搜索引擎隐藏或只允许搜索引擎查看
2015/12/31 PHP
JavaScript 给汉字排序实例代码
2008/06/28 Javascript
用正则表达式 动态创建/增加css style script 兼容IE firefox
2009/03/10 Javascript
checkbox全选所涉及到的知识点介绍
2013/12/31 Javascript
innerHTML动态添加html代码和脚本兼容多个浏览器
2014/10/11 Javascript
js实现仿Discuz文本框弹出层效果
2015/08/13 Javascript
jQuery简单实现两级下拉菜单效果代码
2015/09/15 Javascript
JavaScript文本框脚本编写的注意事项
2016/01/25 Javascript
使用jQuery.form.js/springmvc框架实现文件上传功能
2016/05/12 Javascript
jQuery表单验证插件解析(推荐)
2016/07/21 Javascript
jQuery+ajax读取并解析XML文件的方法
2016/09/09 Javascript
Highcharts+NodeJS搭建数据可视化平台示例
2017/01/01 NodeJs
canvas知识总结
2017/01/25 Javascript
vue监听滚动事件实现滚动监听
2017/04/11 Javascript
微信小程序开发之好友列表字母列表跳转对应位置
2017/09/26 Javascript
Vue-Quill-Editor富文本编辑器的使用教程
2018/09/21 Javascript
微信小程序tabbar底部导航
2018/11/05 Javascript
微信小程序之滑动页面隐藏和显示组件功能的实现代码
2020/06/19 Javascript
python3实现读取chrome浏览器cookie
2016/06/19 Python
python使用openpyxl库修改excel表格数据方法
2018/05/03 Python
Python Django简单实现session登录注销过程详解
2019/08/06 Python
python打印直角三角形与等腰三角形实例代码
2019/10/20 Python
pycharm运行scrapy过程图解
2019/11/22 Python
python3 通过 pybind11 使用Eigen加速代码的步骤详解
2020/12/07 Python
python数据抓取3种方法总结
2021/02/07 Python
俄罗斯购买剧院和演唱会门票网站:Parter.ru
2019/11/09 全球购物
JBL加拿大官方商店:扬声器、耳机等
2020/10/23 全球购物
小区推广策划方案
2014/06/06 职场文书
未受刑事制裁公证证明
2014/09/20 职场文书
工程部部长岗位职责
2015/02/12 职场文书
2015年打非治违工作总结
2015/04/02 职场文书
2015年店长工作总结范文
2015/04/08 职场文书
家属联谊会致辞
2015/07/31 职场文书
SQL Server代理:理解SQL代理错误日志处理方法
2021/06/30 SQL Server