用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数字格式化通用类 accounting.js使用
Aug 24 Javascript
JavaScript中Cookie操作实例
Jan 09 Javascript
javascript版2048小游戏
Mar 18 Javascript
javascript学习之json入门
Dec 22 Javascript
js处理层级数据结构的方法小结
Jan 17 Javascript
vue.js利用Object.defineProperty实现双向绑定
Mar 09 Javascript
jQuery.form.js的使用详解
Jun 14 jQuery
微信小程序获取微信运动步数的实例代码
Jul 20 Javascript
JavaScript基础进阶之数组方法总结(推荐)
Sep 04 Javascript
解决vue中修改export default中脚本报一大堆错的问题
Aug 27 Javascript
Vue实现一个图片懒加载插件
Mar 11 Javascript
Node使用Nodemailer发送邮件的方法实现
Feb 24 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
jQuery获取json后使用zy_tmpl生成下拉菜单
2015/03/27 PHP
php类自动加载器实现方法
2015/07/28 PHP
PHP处理会话函数大总结
2015/08/05 PHP
CodeIgniter多语言实现方法详解
2016/01/20 PHP
PHP hex2bin()函数用法讲解
2019/02/25 PHP
PHP压缩图片功能的介绍
2019/03/21 PHP
javascript读取xml
2006/11/04 Javascript
控制文字内容的显示与隐藏示例
2014/06/11 Javascript
js实现图片和链接文字同步切换特效的方法
2015/02/20 Javascript
JS选项卡动态替换banner图片路径的方法
2015/05/11 Javascript
谈谈encodeURI和encodeURIComponent以及escape的区别与应用
2015/11/24 Javascript
javascript实现C语言经典程序题
2015/11/29 Javascript
JavaScript动态添加css样式和script标签
2016/07/19 Javascript
AngularJS操作键值对象类似java的hashmap(填坑小结)
2016/11/12 Javascript
web前端开发中常见的多列布局解决方案整理(一定要看)
2017/10/15 Javascript
详解vue移动端日期选择组件
2018/02/22 Javascript
Bootstrap4如何定制自己的颜色和风格
2018/02/26 Javascript
vue.js2.0 实现better-scroll的滚动效果实例详解
2018/08/13 Javascript
js中Array对象的常用遍历方法详解
2019/01/17 Javascript
记一次用vue做的活动页的方法步骤
2019/04/11 Javascript
微信小程序封装的HTTP请求示例【附升级版】
2019/05/11 Javascript
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
2020/11/18 Vue.js
python使用内存zipfile对象在内存中打包文件示例
2014/04/30 Python
给Python初学者的一些编程技巧
2015/04/03 Python
python中list列表的高级函数
2016/05/17 Python
Python3 replace()函数使用方法
2018/03/19 Python
TensorFlow 模型载入方法汇总(小结)
2018/06/19 Python
python函数的万能参数传参详解
2019/07/26 Python
tesserocr与pytesseract模块的使用方法解析
2019/08/30 Python
深入浅析Python 命令行模块 Click
2020/03/11 Python
利用python中的matplotlib打印混淆矩阵实例
2020/06/16 Python
python安装sklearn模块的方法详解
2020/11/28 Python
导游词之无锡东林书院
2019/12/11 职场文书
php远程请求CURL案例(爬虫、保存登录状态)
2021/04/01 PHP
MySQL系列之一 MariaDB-server安装
2021/07/02 MySQL
python工具dtreeviz决策树可视化和模型可解释性
2022/03/03 Python