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

2023-10-15 08:10

本文主要是介绍原生 javaScript 百叶窗 效果的实现及原理介绍,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

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

原理:

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

布局分析:

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

JS分析:

    1. 要开多个定时器来达到效果
    2. 执行相反方向
    3. 执行多组运动
    4. 累加产生错落感
    5. 产生时间间隔的动画

JS代码如下:

 1     <script>
 2         window.onload = function(){
 3             var oUl = document.getElementById('ul1');
 4             var oUl2 = document.getElementById('ul2');
 5 
 6             toShow(oUl);
 7             //每四秒执行一次
 8             setTimeout(function(){
 9                 toShow(oUl2);                   
10             },4000);    
11             function toShow(obj){
12                 var aDiv = obj.getElementsByTagName('div');
13                 var iNow = 0;
14                 var timer = null;
15                 var bBtn = true;
16 
17                 setInterval(function(){            
18                     toChange();    
19                 },2000);
20                 function toChange(){
21                     timer = setInterval(function(){
22                         if(iNow==aDiv.length){
23                             clearInterval(timer);
24                             iNow = 0;
25                             bBtn = !bBtn;
26                         }
27                         else if(bBtn){
28                             startMove(aDiv[iNow],{top:0},function(){
29                                 var p = document.getElementsByClassName('p-2');
30                                 for(var i=0; i<p.length;i++){
31                                     p[i].style.background = 'red';
32                                 }
33                             });
34                             iNow++;
35                         }
36                         else{
37                             startMove(aDiv[iNow],{top:-30});
38                             iNow++;
39                         }                    
40                     },100);                    
41                 }                
42             }            
43         };
       //运动框架
44 function startMove(obj,json,endFn){ 45 clearInterval(obj.timer); 46 obj.timer = setInterval(function(){ 47 var bBtn = true; 48 for(var attr in json){ 49 var iCur = 0; 50 iCur = parseInt(getStyle(obj,attr)) || 0; 51 var iSpeed = (json[attr] - iCur)/8; 52 iSpeed = iSpeed >0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); 53 54 if(iCur!=json[attr]){ 55 bBtn = false; 56 } 57 obj.style[attr] = iCur + iSpeed + 'px'; 58 } 59 if(bBtn){ 60 clearInterval(obj.timer); 61 if(endFn){ 62 endFn.call(obj); 63 } 64 } 65 },30); 66 }
        //获取非行间样式
67 function getStyle(obj,attr){ 68 if(obj.currentStyle){ 69 return obj.currentStyle[attr]; 70 } 71 else{ 72 return getComputedStyle(obj,false)[attr]; 73 } 74 } 75 </script>

下载地址:(百度云)

  • http://pan.baidu.com/s/1gexD6KF

博客主页:http://www.cnblogs.com/bc8web/

欢迎拍砖交流!

转载于:https://www.cnblogs.com/bc8web/p/JavaScript2.html

这篇关于原生 javaScript 百叶窗 效果的实现及原理介绍的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/216456

相关文章

Python位移操作和位运算的实现示例

《Python位移操作和位运算的实现示例》本文主要介绍了Python位移操作和位运算的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一... 目录1. 位移操作1.1 左移操作 (<<)1.2 右移操作 (>>)注意事项:2. 位运算2.1

如何在 Spring Boot 中实现 FreeMarker 模板

《如何在SpringBoot中实现FreeMarker模板》FreeMarker是一种功能强大、轻量级的模板引擎,用于在Java应用中生成动态文本输出(如HTML、XML、邮件内容等),本文... 目录什么是 FreeMarker 模板?在 Spring Boot 中实现 FreeMarker 模板1. 环

Qt实现网络数据解析的方法总结

《Qt实现网络数据解析的方法总结》在Qt中解析网络数据通常涉及接收原始字节流,并将其转换为有意义的应用层数据,这篇文章为大家介绍了详细步骤和示例,感兴趣的小伙伴可以了解下... 目录1. 网络数据接收2. 缓冲区管理(处理粘包/拆包)3. 常见数据格式解析3.1 jsON解析3.2 XML解析3.3 自定义

SpringMVC 通过ajax 前后端数据交互的实现方法

《SpringMVC通过ajax前后端数据交互的实现方法》:本文主要介绍SpringMVC通过ajax前后端数据交互的实现方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价... 在前端的开发过程中,经常在html页面通过AJAX进行前后端数据的交互,SpringMVC的controll

Spring Security自定义身份认证的实现方法

《SpringSecurity自定义身份认证的实现方法》:本文主要介绍SpringSecurity自定义身份认证的实现方法,下面对SpringSecurity的这三种自定义身份认证进行详细讲解,... 目录1.内存身份认证(1)创建配置类(2)验证内存身份认证2.JDBC身份认证(1)数据准备 (2)配置依

利用python实现对excel文件进行加密

《利用python实现对excel文件进行加密》由于文件内容的私密性,需要对Excel文件进行加密,保护文件以免给第三方看到,本文将以Python语言为例,和大家讲讲如何对Excel文件进行加密,感兴... 目录前言方法一:使用pywin32库(仅限Windows)方法二:使用msoffcrypto-too

Java Spring 中 @PostConstruct 注解使用原理及常见场景

《JavaSpring中@PostConstruct注解使用原理及常见场景》在JavaSpring中,@PostConstruct注解是一个非常实用的功能,它允许开发者在Spring容器完全初... 目录一、@PostConstruct 注解概述二、@PostConstruct 注解的基本使用2.1 基本代

C#使用StackExchange.Redis实现分布式锁的两种方式介绍

《C#使用StackExchange.Redis实现分布式锁的两种方式介绍》分布式锁在集群的架构中发挥着重要的作用,:本文主要介绍C#使用StackExchange.Redis实现分布式锁的... 目录自定义分布式锁获取锁释放锁自动续期StackExchange.Redis分布式锁获取锁释放锁自动续期分布式

springboot使用Scheduling实现动态增删启停定时任务教程

《springboot使用Scheduling实现动态增删启停定时任务教程》:本文主要介绍springboot使用Scheduling实现动态增删启停定时任务教程,具有很好的参考价值,希望对大家有... 目录1、配置定时任务需要的线程池2、创建ScheduledFuture的包装类3、注册定时任务,增加、删

SpringBoot整合mybatisPlus实现批量插入并获取ID详解

《SpringBoot整合mybatisPlus实现批量插入并获取ID详解》这篇文章主要为大家详细介绍了SpringBoot如何整合mybatisPlus实现批量插入并获取ID,文中的示例代码讲解详细... 目录【1】saveBATch(一万条数据总耗时:2478ms)【2】集合方式foreach(一万条数