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


Posted in Javascript onFebruary 08, 2017

今天操作的是一个,百叶窗效果的一个页面特效,好,现在直接上最终效果吧。demo做的有点low,不过效果都在了

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

这是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> 

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
javascript的事件描述
Sep 08 Javascript
JS OOP包机制,类创建的方法定义
Nov 02 Javascript
JQuery+DIV自定义滚动条样式的具体实现
Jun 25 Javascript
jquery获得option的值和对option进行操作
Dec 13 Javascript
jquery map方法使用示例
Apr 23 Javascript
日常收藏的jquery技巧
Dec 02 Javascript
js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码
May 13 Javascript
JavaScript数组的定义及数字操作技巧
Jun 06 Javascript
详解react-router如何实现按需加载
Jun 15 Javascript
手把手带你封装一个vue component第三方库
Feb 14 Javascript
node将geojson转shp返回给前端的实现方法
May 29 Javascript
js实现简单扫雷
Nov 27 Javascript
浅谈js停止事件冒泡 阻止浏览器的默认行为(阻止超连接 #)
Feb 08 #Javascript
Move.js入门
Feb 08 #Javascript
jquery ajaxfileupload异步上传插件使用详解
Feb 08 #Javascript
详解Javascript百度地图接口开发文档中的类和方法
Feb 07 #Javascript
简单实现bootstrap导航效果
Feb 07 #Javascript
vue.js实现请求数据的方法示例
Feb 07 #Javascript
Avalonjs 实现简单购物车功能(实例代码)
Feb 07 #Javascript
You might like
PHP面向对象学习笔记之一 基础概念
2012/10/06 PHP
利用php做服务器和web前端的界面进行交互
2016/10/31 PHP
Avengerls vs KG BO3 第二场2.18
2021/03/10 DOTA
javascript 冒号 使用说明
2009/06/06 Javascript
网页上的Javascript编辑器和代码格式化
2010/04/25 Javascript
关于document.cookie的使用javascript
2010/10/29 Javascript
基于jquery的弹出提示框始终处于窗口的居中位置(类似于alert弹出框的效果)
2011/09/28 Javascript
JavaScript中使用构造器创建对象无需new的情况说明
2012/03/01 Javascript
Js表格万条数据瞬间加载实现代码
2014/02/20 Javascript
js的for in循环和java里foreach循环的区别分析
2015/01/28 Javascript
浅谈javascript中call()、apply()、bind()的用法
2015/04/20 Javascript
Javascript中arguments和arguments.callee的区别浅析
2015/04/24 Javascript
跟我学习javascript的prototype,getPrototypeOf和__proto__
2015/11/17 Javascript
探究Javascript模板引擎mustache.js使用方法
2016/01/26 Javascript
js类式继承与原型式继承详解
2016/04/07 Javascript
深入理解vue路由的使用
2017/03/24 Javascript
详解JavaScript中return的用法
2017/05/08 Javascript
jquery处理checkbox(复选框)是否被选中实例代码
2017/06/12 jQuery
angular ng-click防止重复提交实例
2017/06/16 Javascript
日期时间范围选择插件:daterangepicker使用总结(必看篇)
2017/09/14 Javascript
Nodejs中的JWT和Session的使用
2018/08/21 NodeJs
jQuery实现日历效果
2020/09/11 jQuery
[05:43]VG.R战队教练Mikasa专访:为目标从未停止战斗
2016/08/02 DOTA
彻底搞懂Python字符编码
2018/01/23 Python
在cmd中运行.py文件: python的操作步骤
2018/05/12 Python
python实现音乐下载的统计
2018/06/20 Python
Python3实现腾讯云OCR识别
2018/11/27 Python
简单了解Python3 bytes和str类型的区别和联系
2019/12/19 Python
详解python tcp编程
2020/08/24 Python
利用python+ffmpeg合并B站视频及格式转换的实例代码
2020/11/24 Python
python中numpy数组与list相互转换实例方法
2021/01/29 Python
美国唇部护理专家:Sara Happ
2019/06/19 全球购物
小学国庆节活动方案
2014/02/11 职场文书
村抢险救灾方案
2014/05/09 职场文书
上课不认真检讨书
2014/09/17 职场文书
会计工作岗位职责
2015/02/03 职场文书