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

2024-04-14 15:21:32

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

原理:

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

布局分析：

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

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百叶窗效果有所帮助。

Move.js入门

在网站上,CSS3 的过渡和动画是当前创建轻量级动画的首选方法.不幸的是,很多开发者发现他们自己的语法和复杂和混乱的.如果这听起来像你自己,对你来说,或许Move.js是完美的方案.Move.js是使用简单函数创建 CSS3 动画的一个简单的JavaScript库.本教程将探讨Move.js的基础知识,并提供一个在线demo. 基础知识 Move.js 提供了创建 CSS3 动画的最简单的 JavaScript API.让我们假设有一个带类 box 的 div 元数,当鼠标移动到 div 上面
js实现横向百叶窗效果网页切换动画效果的方法

本文实例讲述了js实现横向百叶窗效果网页切换动画效果的方法.分享给大家供大家参考.具体分析如下: 这是一款很简洁但是效果却不错的网页切换效果,点击新网页后,网页会出现蓝白相间的百叶窗线条自动切换,直到网页全部显示完全.代码如下: 复制代码代码如下: <html> <head> <title>js网页百叶窗动态切换效果</title> <style> <!-- .intro{ position:absolute; left:0; top:0
用move.js库实现百叶窗特效

今天操作的是一个,百叶窗效果的一个页面特效,好,现在直接上最终效果吧.demo做的有点low,不过效果都在了这是html和css代码:思路就是,每一个li里面div,放几个p,通过调节translatY,来控制. <style> *{ padding: 0; margin: 0; list-style: none; } #bai{ width: 400px; height: auto; float: left; margin-left:20px auto; } li{ text-align:
基于JavaScript实现百叶窗动画效果不只单纯flas可以实现

看到这种什么百叶窗的动画,以为都是flash实现的,最近突然灵光一闪,想到了用js实现(虽然我不是做前端的,本人做.net).代码虽然实现了,但是比较乱,先上个图: 一个js的动画,以前以为只有flash可以实现代码主要就是一些数学的计算,然后结合html,css打造出类似flash的效果. 下面贴出主要的部分代码: function all(books){ for(var i=;i<self.rows;i++) { for (var j = ; j < self.columns; j++)
js实现绿白相间竖向网页百叶窗动画切换效果

本文实例讲述了js实现绿白相间竖向网页百叶窗动画切换效果.分享给大家供大家参考.具体分析如下: 前面我们讲解了一个网页百叶窗切换动画效果,不过是横向百叶窗,这个是竖向百叶窗,代码基本一样: 复制代码代码如下: <html> <head> <title>百叶窗页面切换效果</title> <style> <!-- .intro{ position:absolute; left:0; top:0; layer-background-color
用Move.js配合创建CSS3动画的入门指引

在网站上,CSS3 的过渡和动画是当前创建轻量级动画的首选方法.不幸的是,很多开发者发现他们自己的语法和复杂和混乱的.如果这听起来像你自己,对你来说,或许Move.js是完美的方案.Move.js是使用简单函数创建 CSS3 动画的一个简单的JavaScript库.本教程将探讨Move.js的基础知识,并提供一个在线demo. 基础知识 Move.js 提供了创建 CSS3 动画的最简单的 JavaScript API.让我们假设有一个带类 box 的 div 元数,当鼠标移动到 div 上面
JS实现类似百叶窗下拉菜单效果

废话不多说了,直接给大家贴代码了,具体代码如下所示: function leftmove(){ var oLeft_ul=document.getElementById('left_ul'); var aLeft_li=oLeft_ul.children;//获得左侧ul下的第一个子集li var aleft_ul_hidden=oLeft_ul.getElementsByTagName('ul'); var aleft_span_hidden=oLeft_ul.getElementsByTag
JS实现网页百叶窗效果

网页百叶窗特效代码 window.innerHeight) clearInterval(stopit) } else if (document.all){ clipbottom-=speed for (i=1;i [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
原生js实现百叶窗效果及原理介绍

百叶窗大家都见过吧!如图: 原理: 如图所示,空心格子就好比是每个li,给它设定相对定位属性,设置overflow:hidden:黑块为li子元素,高度为li的2倍,设置absolute属性,我们正是要改变它的top值从而获得变化!(右上角多余块与本图无关) 布局分析: 注意top值得变化!默认top=0时候,显示的"一楼上铺",当top=-40px时候,li的子元素上移40px,这时候显示的内容就为"一楼下铺"注意p元素的包裹层div JS分析: 1.要开多个定
原生JS实现百叶窗特效

本文分享一个用原生JS实现的百叶窗特效,效果如下: 代码实现如下,欢迎大家复制粘贴. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>原生JS实现百叶窗特效</title> <style> * { margin: 0;
原生JS实现弹幕效果的简单操作指南

前言现在很多的直播平台或者视频平台都会用到弹幕加强和观众的互动效果,那么如何用JS实现这样的效果呢,用一个初学者的方法记录下这个方法,欢迎大牛指导. 1.首先需要操作文档必须拿到Dom中的元素,当然有很多方法,这里还是用document.querySelector. 2.这边也是为了键盘和鼠标都可发送封装了一个函数function sendMsg(){ 首先需要创建一个容器来接受你编辑的内容,这里用span标签,当然其他标签也可 var oSpan=document.cerateElement
基于原生JS实现分页效果的示例代码

这个只是一个分页的demo,主要是思路整理(很久之前项目用的东西) 分页实现的效果主要是左侧上一页右侧是下一页中间显示主要是超过5个显示省略号然后是可配置选项实现之后的效果首先需要初始化该对象的一些基本属性,显示总页码数,中间显示的页面数, 添加一个回调函数,在页面变化激活回调函数并返回当前页面和一些需要的其他参数 init为对象初始化的方法(里面的参数都是可以写成活的,我这里偷懒了所以写成死的了) 这个里的 z_page 可以接是接口返回的总页数 function Page(o
基于React.js实现原生js拖拽效果引发的思考

一.起因&思路一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖拽效果. 首先,其实拖拽效果的思路是很简单的.主要就是三个步骤: 1.onmousedown的时候,启动可拖拽事件,记录被拖拽元素的原始坐标参数. 2.onmousemove的时候,实时记录鼠标移动的距离,结合被拖拽元素第一阶段的坐标参数,计算并设置新的坐标值. 3.onmouseup的时候,关闭可拖拽事件,记录新的坐标值. 注意:这里主要是通过绝对定位的top和left来确定元素的位置
原生JS实现烟花效果

原生JS实现烟花效果,点击页面生成烟花,向四周扩散,然后再坠落下去.(这里的烟花我是用的特殊字符爱心形状) 基础css代码 /* 设置基础的css样式 */ body{background: #000;overflow: hidden;} .fire{position: absolute;width: 4px;height: 30px;} js代码: 1.给页面添加点击事件,生成主体烟花 //给页面设置点击事件 document.onclick = function(eve){ var e =
原生js实现照片墙效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-
原生js实现弹幕效果

本文实例为大家分享了js实现弹幕效果的具体代码,供大家参考,具体内容如下效果展示: 源码展示: <!doctype html> <html> <head> <meta charset="utf-8"> <title>原生js实现弹幕效果</title> <style> * { padding:0; margin:0; } .all { width:600px; height:400px; backgr
原生js实现拼图效果

本文实例为大家分享了原生js实现拼图效果的具体代码,供大家参考,具体内容如下需求:每次刷新页面后,右侧容器内会随机排列碎片图片,鼠标按下拖动到左侧,在正确坐标一定范围内,图片会自动吸附过去,放好的碎片不能再进行拖动. 先来看一下效果: js代码 : //执行初始函数 init(); function init() { //创建一个碎片容器 var frag = document.createDocumentFragment(); document.body.style.margin = "0p
原生js二级联动效果

今天说的这个是原生js的二级联动,在空白页面里动态添加并作出相对应的效果. //创建两个下拉列表 select标签是下拉列表 var sel = document.createElement("select"); var sel1 = document.createElement("select"); //添加到body document.body.appendChild(sel); document.body.appendChild(sel1); // 创建一个

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

相关推荐

随机推荐