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

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

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

    //根据单独的值切换所有复选框 $("input[type='checkbox']").prop("checked", function( i, val ) { ...

  2. 基于LNMP的Zabbbix之PHP源码安装

    安装一些依赖的包 wget -c ftp://xmlsoft.org/libxml2/libxml2-2.7.8.tar.gz .tar.gz -C ../source/ cd ../source/l ...

  3. input有许多，点击按钮使用form传递文本框的值

    input有许多,点击按钮使用form传递文本框的值 <form name="form1" method="post" action="< ...

  4. CodeForces 625A Guest From the Past

    贪心水题 #include <stdio.h> #include <algorithm> #include <string.h> #include <queu ...

  5. 《数据结构与算法分析：C语言描述》读书笔记------List的C语言实现

    List的简单实现.在GCC下测试通过. list.h #ifndef _List_H /*List数据结构的简单实现*/ struct Node; typedef struct Node Node; ...

  6. Golang测试技术

    本篇文章内容来源于Golang核心开发组成员Andrew Gerrand在Google I/O 2014的一次主题分享“Testing Techniques”,即介绍使用Golang开发 时会使用到的 ...

  7. [转]tar 分包压缩与合并

    要将目录logs打包压缩并分割成多个1M的文件,可以用下面的命令:  tar cjf - logs/ |split -b 1m - logs.tar.bz2. 完成后会产生下列文件:  logs.ta ...

  8. 【转】每一个程序员需要了解的10个Linux命令

    作为一个程序员,在软件开发职业生涯中或多或少会用到Linux系统,并且可能会使用Linux命令来检索需要的信息.本文将为各位开发者分享10个有用的Linux命令,希望对你会有所帮助. 以下就是今天我们 ...

  9. git如何正确回滚代码

    git如何正确回滚代码 方法一,删除远程分支再提交 ①首先两步保证当前工作区是干净的,并且和远程分支代码一致 $ git co currentBranch $ git pull origin curr ...

  10. js动画学习笔记

    <html> <head> <meta charest="utf-8"> <title>test</title> < ...