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

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

效，好，现在直接上最终效果吧。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. HTML5绘制矩形和圆形并且还有获取在这个图层内的坐标的思路和代码 - feilong_12的专栏 - 博客频道 - CSDN.NET

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

  3. Struts2实现异步调用机制详细剖析（XML和JSON）

    一.使用XML传递 1.页面展示getXML.jsp <%@ page language="java" import="java.util.*" page ...

  4. android-tools adb for ARM Linux

    /************************************************************************* * android-tools adb for A ...

  5. “canvas画布仿window系统自带画图软件"项目的思考

    "canvas画布仿window系统自带画图软件"项目的思考 首先贴上DEMO图,并没有美化效果.对UI有要求的,请自带补脑技术. 思考一 在做项目的过程中,我发现"工具 ...

  6. 13、手把手教你Extjs5（十三）模块字段和Grid列的定义[1]

    这一节加入模块自定义字段,并根据这些字段生成model.然后再定义grid中的分组和列.从这一切开始真正进入到了模块自定义的节奏当中,代码的复杂度和技巧性也大大提高.先从模块字段的自定义开始.先看一下 ...

  7. iOS自定义字体及类目

    1:获取字体文件 从各种渠道下载字体文件ttf, 网站或者从别的ipa里扣出来.(以fzltxh.ttf为例) 2:将fzltxh.ttf文件拷贝到工程中 3:在Info.plist中添加项: Fon ...

  8. bzoj-1834 network 网络扩容 【网络流】

    这题就是复习下网络流. #include <bits/stdc++.h> #define rep(i, a, b) for (int i = a; i <= b; i++) #def ...

  9. 简单介绍java Enumeration

    Enumeration接口 Enumeration接口本身不是一个数据结构.但是,对其他数据结构非常重要. Enumeration接口定义了从一个数据结构得到连续数据的手段.例如,Enumeratio ...

  10. PHP的高并发和大数据处理

    收集前人的经验.加速学习,解决工作中的难题. 一.代码优化(包括sql语句的优化), 合理的使用索引,避免整表查询.二.日常海量数据处理我用文件缓存,文件缓存分两种,第一种是最常见的生成html静太文 ...