每逢佳节胖三斤啊，胖了胖了，加上每天坐在电脑前，现在还和一个智障聊天，后天去苏州玩的事情，住哪里啊？去哪里嘿嘿嘿啊？

苏州，找了下，攻略，听说一定要去园林看，听说很牛逼，好吧，陶冶一下我的情操。今天操作的是一个，百叶窗效果的一个页面特

效，好，现在直接上最终效果吧。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>

　　

百叶窗特效（用move.js库）的更多相关文章

  1. 分享jquery实现百叶窗特效的图片轮播

    首先非常感谢网友嘉翼的无私分享,这是他刚在网站扣下来的特效,第一时间与大家分享,jquery实现百叶窗特效的图片轮播 使用方法: 1.引用css文件,css文件里面已经做了注释,基本只需要修改宽高就好 ...

  2. paip.关于动画特效原理 html js 框架总结

    paip.关于动画特效原理 html js 框架总结 1. 动画框架的来源:flex,jqueryui 3 2. 特效的分类 3 2.1. Property effects 动态改变一个或多个目标对象 ...

  3. <WEB>平板_手机开发_13 个处理触摸事件和多点触摸的JS 库

    触摸屏是现在所有智能手机的标配,还包括各种平板设备,而且很多桌面也慢慢在开始支持触摸操作.要开发支持触摸屏设备的 Web 应用,我们需要借助浏览器的触摸事件来实线. 下图是各种触摸事件说明: 本文我们 ...

  4. move.js 源码 学习笔记

    源码笔记: /* move.js * @author:flfwzgl https://github.com/flfwzgl * @copyright: MIT license * Sorrow.X - ...

  5. 【干货】教你如何利用fullPage.js以及move.js插件打造高端大气的网站效果！

    前言: 如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次. 在学习过jQuery插件之后,才发现之前的很多网站特效完全可 ...

  6. ios实例开发精品文章推荐（8.12）11个处理触摸事件和多点触摸的JS库

    11个处理触摸事件和多点触摸的JS库 触摸屏是现在所有智能手机的标配,还包括各种平板设备,而且很多桌面也慢慢在开始支持触摸操作.要开发支持触摸屏设备的Web应用,我们需要借助浏览器的触摸事件来实现. ...

  7. 主流JS库一览

    主流JS库一览 标签: prototypedojomootoolsprototypejsjqueryjavascript 2009-10-14 22:52 19936人阅读 评论(2) 收藏 举报   ...

  8. 同一页面中引入多个JS库产生的冲突解决方案(转)

    发生JS库冲突的主要原因:与jQuery库一样,许多JS库都使用‘$’符号作为其代号.因此在一个页面中引入多个JS库,并且使用‘$’作为代号时,程序不能识别其代表哪个库(这个是我自己的解释,但更深的原 ...

  9. 一些JS库汇总

    作者:wlove 链接:https://www.zhihu.com/question/429436558/answer/2348777302 来源:知乎 著作权归作者所有.商业转载请联系作者获得授权, ...

随机推荐

  1. CodeForces 621A Wet Shark and Odd and Even

    水题 #include<cstdio> #include<cstring> #include<cmath> #include<ctime> #inclu ...

  2. 浅谈SQL Server中的三种物理连接操作(HASH JOIN MERGE JOIN NESTED LOOP)

    简介 在SQL Server中,我们所常见的表与表之间的Inner Join,Outer Join都会被执行引擎根据所选的列,数据上是否有索引,所选数据的选择性转化为Loop Join,Merge J ...

  3. iOS技术框架构和更新版本的技术特性

    Core OS层 Sytem 系统层包括内核环境,驱动及操作系统层unix接口.内核以mach为基础,它 负责操作系统的各个方面,包括管理系统的虚拟内存,线程,文件系统,网络以及进程间通讯.这一层包含 ...

  4. iOS开发——单例模式

    一.用if语句实现单例 1.在.h文件中 #import <Foundation/Foundation.h> @interface YYTRequestTool : NSObject +( ...

  5. SQLite高级：一库建多表，封装类

    package eoe.database; import android.content.Context; import android.database.sqlite.SQLiteDatabase; ...

  6. 简易的AJAX工具[转]

    关键字: ajax 1.创建XMLHttpRequest对象的js文件 Ajax.js function Ajax(){    var xmlHttp=null;    if(window.XMLHt ...

  7. 安卓Visibility属性

    可见(visible) XML文件:android:visibility="visible" Java代码:view.setVisibility(View.VISIBLE); 不可 ...

  8. sql数据库恢复 文件丢失误删除 误格式化置疑报错修复 数据库置疑修复总结/SQL SERVER 2000/2005/2008/2008R2

    数据库置疑的原因会有多种多样,不同的问题采用的步骤也会有所不同,以下的步骤不能适用所有的情况,但包括了一些基本的步骤. 数据库置疑是指数据库内部处于不一致的状态,很有可能会有数据丢失.我们推荐您从做数 ...

  9. hashchange

    <!DOCTYPE html> <html> <head> <title>Hash Change Example</title> <s ...

  10. Nginx中的信号量(信号控制)