用move.js库实现百叶窗特效

2024-10-02 12:49:49

今天操作的是一个，百叶窗效果的一个页面特效，好，现在直接上最终效果吧。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: center;
    width: 100%;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px dashed #000;
    position: relative;
    overflow: hidden;
   }
   div.box{
    width: 100%;
    height: 50px;
    position: absolute;
    top: -50px;
   }
   p{
    height: 50px;
   }
  </style>
 </head>
 <body>
  <ul id="bai">
   <li>
    <div class="box a1">
     <p>1111111111111111</p>
     <p>22222222222222222</p>
    </div>
   </li>
   <li>
    <div class="box a2">
     <p>33333333333333333</p>
     <p>44444444444444444</p>
    </div>
   </li>
   <li>
    <div class="box a3">
     <p>55555555555555555</p>
     <p>66666666666666666</p>
    </div>
   </li>
   <li>
    <div class="box a4">
     <p>77777777777777777</p>
     <p>88888888888888888</p>
    </div>
   </li>
  </ul>

关键在这里：可以来这里下载　

<script src="js库/move.min.js"></script>

导入这个，这个插件怎么用呢？具体的我就不讲了，可以看这里,这篇文章讲的挺好的。关键就是，move()里面取代的对象，跟jquery $取DOM节点对象一样,下面简单的陈了一些方法

move('.square')
 .to(500, 200)
 .rotate(180)
 .scale(.5)
 .set('background-color', '#FF0551')
 .set('border-color', 'black')
 .duration('3s')
 .skew(50, -10)
 .then()
 .set('opacity', 0)
 .duration('0.3s')
 .scale(0.1)
 .pop()
 .end();

接下来，放上接下来全部js代码，整体思路是，两个定时器，一个定时器来定时总的时间，多久后开始，第二次定时器，是每个小div，依次多久执行动画。

<script>
      window.onload = function(){
        var num=1; /*为了取到各个div*/
        var timer=null;/*定义定时器*/
        var tet = false;/*这里用来判断方向*/
        ding();
        function ding(){
          setInterval(function(){
            change();
          },3000)
        }
        function change(){
          timer=setInterval(function(){
            if(num == 5){
              clearInterval(timer);
              num=1;
              tet = !tet;
            }
            else if(tet == false){
              move("#bai .a"+num+"").y(50).end();/*这里用到就是，move中的translateY方法，简称y()*/
              num++;
            }
            else{
              move("#bai .a"+num+"").y(0).end();
              num++;
            }
          },100)
        }
      }
    </script>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

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实现绿白相间竖向网页百叶窗动画切换效果

本文实例讲述了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 上面
基于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++)
Move.js入门

在网站上,CSS3 的过渡和动画是当前创建轻量级动画的首选方法.不幸的是,很多开发者发现他们自己的语法和复杂和混乱的.如果这听起来像你自己,对你来说,或许Move.js是完美的方案.Move.js是使用简单函数创建 CSS3 动画的一个简单的JavaScript库.本教程将探讨Move.js的基础知识,并提供一个在线demo. 基础知识 Move.js 提供了创建 CSS3 动画的最简单的 JavaScript API.让我们假设有一个带类 box 的 div 元数,当鼠标移动到 div 上面
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实现横向百叶窗效果网页切换动画效果的方法.分享给大家供大家参考.具体分析如下: 这是一款很简洁但是效果却不错的网页切换效果,点击新网页后,网页会出现蓝白相间的百叶窗线条自动切换,直到网页全部显示完全.代码如下: 复制代码代码如下: <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:
原生JS实现百叶窗特效

本文分享一个用原生JS实现的百叶窗特效,效果如下: 代码实现如下,欢迎大家复制粘贴. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>原生JS实现百叶窗特效</title> <style> * { margin: 0;
JS库之Particles.js中文开发手册及参数详解

因为自己需要做产品,所以一个好的UI界面也是很重要的,发现这种散射的原子颗粒特效还不错,就弄了一个官方github:https://github.com/VincentGarreau/particles.js/ demo制作器,注意可能需要FQ https://codepen.io/VincentGarreau/pen/pnlso 这个可以把你制作的demo导出 http://vincentgarreau.com/particles.js/这个可以用来尝试配置不同效果使用方法加载parti
JS库之Three.js 简易入门教程(详解之一)

开场白 webGL可以让我们在canvas上实现3D效果.而three.js是一款webGL框架,由于其易用性被广泛应用.如果你要学习webGL,抛弃那些复杂的原生接口从这款框架入手是一个不错的选择. 博主目前也在学习three.js,发现相关资料非常稀少,甚至官方的api文档也非常粗糙,很多效果需要自己慢慢敲代码摸索.所以我写这个教程的目的一是自己总结,二是与大家分享. 本篇是系列教程的第一篇:入门篇.在这篇文章中,我将以一个简单的demo为例,阐述three.js的基本配置方法.学完这篇文章
js实现无缝滚动特效

本文实例为大家介绍了js实现无缝滚动特效需要做到的功能,以及关键性js代码,分享给大家供大家参考,具体内容如下运行效果图: 结合下学了的知识,做个模拟的综合性扩展练习~~ 大致功能如下: 1.点开html后,图片自动移动展示 2.点击左右方向,可以改变图片移动的方向(改变left的值,正负) 3.鼠标移入移出图片后,图片暂停移动(setInterval,clearInterval) 4.鼠标移到图片上,高亮(a:hover) 5.点击小图, 下面的大图会改变 6.文字区域随着图片的变化而变
JS库中的Particles.js在vue上的运用案例分析

知乎的首页后面的粒子动效总觉得很炫酷,搜了一下,发现是用particles.js编写的.刚好目前的项目是利用vue框架的,两个凑在一起学了. 讲道理,这个用得好的话,页面是可以很酷的,譬如我现在写的项目酷酷的登录页嘻嘻~ 安装particles.js npm install --save particles.js 配置particles.js 1.data 这个data是用于控制粒子在页面中所呈现的状态. { "particles": { "number": {
JS库particles.js创建超炫背景粒子插件(附源码下载)

插件描述:particles.js用于创建粒子的轻量级 JavaScript 库. 查看效果源码下载使用加载 particles.js和配置粒子 <div id="particles-js"></div> <script src="particles.js"></script> app.js /* particlesJS.load(@dom-id, @path-json, @callba

用move.js库实现百叶窗特效

相关推荐

随机推荐