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

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

效，好，现在直接上最终效果吧。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. javascript 中 arguments.callee属性

    javascript 中 arguments.callee属性 可以在函数内部,指向的是这个函数(或者叫做“类”)本身. 相当于PHP 中的 self 关键字. The arguments.calle ...

  2. CDOJ 1270 Playfair

    模拟题,代码写得比较乱... #include<cstdio> #include<cstring> #include<cmath> #include<queu ...

  3. CentOS6.6部署OpenStack Havana(Nova-Network版)

    CentOS6.4部署OpenStack Havana(Nova-Network版) 一 基本设备介绍 测试环境 CentOS6.4 x64 OpenStack 服务 介绍 计算 (Compute) ...

  4. CentOS 6.4 利用 Awstats 7.2 分析 Nginx 日志

    一.配置Nginx 日志分割 (略) 二.配置FCGI 1.安装CPAN wget http://search.cpan.org/CPAN/authors/id/A/AN/ANDK/CPAN-2.00 ...

  5. MySQL中 InnoDB 和 MyISAM 小结

    转:http://blog.csdn.net/ithomer/article/details/5136982 部分内容: InnoDB和MyISAM的差别 InnoDB和MyISAM是许多人在使用My ...

  6. 4、手把手教你Extjs5(四)主界面上加入顶部和底部区域

    这一节为主界面加一个顶部区域和底部区域.一个管理系统的界面可以粗分为顶部标题部分.中间数据展示和处理的部分.底部备注和状态部分. 在增加这二个区域之前,我们先在MainModel.js中加入一些数据. ...

  7. 利用反射动态从程序集dll执行方法和属性

    程序结构: //获取程序集 Assembly asb = Assembly.LoadFrom(path);//path为程序集的物理路径 //获取程序集下面的Student类 Type documen ...

  8. [转]解决Maven报错"Plugin execution not covered by lifecycle configuration"

    [转]解决Maven报错"Plugin execution not covered by lifecycle configuration" 导入Myabtis源码后,POM文件会报 ...

  9. IOS开发中数据持久化的几种方法－－NSUserDefaults

    IOS开发中数据持久化的几种方法--NSUserDefaults IOS 开发中,经常会遇到需要把一些数据保存在本地的情况,那么这个时候我们有以下几种可以选择的方案: 一.使用NSUserDefaul ...

  10. window下Git和github入门

    tip:使用简单的例子来制作一个使用指南过程,默认文件夹为demo.看了3个早晨,写一下留个记录,可能有些不成熟,如有错误欢迎指正. 参考一:http://www.liaoxuefeng.com/wi ...