百叶窗特效（用move.js库）

时间：2022-09-25 13:07:49

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

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

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

　　

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

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

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

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

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

  3. &lt&semi;WEB&gt&semi;平板&lowbar;手机开发&lowbar;13 个处理触摸事件和多点触摸的JS 库

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

  4. move&period;js 源码 学习笔记

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

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

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

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

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

  7. 主流JS库一览

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

  8. 同一页面中引入多个JS库产生的冲突解决方案&lpar;转&rpar;

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

  9. 【转载】写一个js库需要怎样的知识储备和技术程度？

    作者:小爝链接:https://www.zhihu.com/question/30274750/answer/118846177来源:知乎著作权归作者所有,转载请联系作者获得授权. 1,如何编写健壮的 ...

随机推荐

  1. Datazen介绍

    Datazen是移动端全平台的图表解决方案,基于HTML5的应用,实现了全平台的整合.此篇主要对其功能进行大体介绍. 这个平台最近刚被微软收购,相信微软看重的是其HTML5在全移动端平台的实现.Dat ...

  2. X3850 Linux 下DSA日志收集办法

    收集工具下载 RHEL 6: 32bit-- [IBM 下载]http://delivery04.dhe.ibm.com/sar/CMA/XSA/03tza/1/ibm_utl_dsa_dsytb7x ...

  3. 可失败构造器（Failable Initializers）

    Xcode6.1中Swift的最新版本是1.1,在该版本中引入了一个新的特性:可失败构造器.通过构造器初始化实际上是给class或struct的每一个存储属性(参数)提供初始值,进行对象实例化的过程. ...

  4. C&num; 中带&commat;字符串中的转义符号

    C#转义字符 c#里 @ 表示的是:1.在C#中,"c:\\temp"表示路径是c:\temp; 而@"c:\temp"就表示c:\temp; 所以,@的作用就 ...

  5. access窗口标签居中

    Private Sub Form_Resize() On Error Resume Next Me.Width = Me.InsideWidth Me.Section(acDetail).Height ...

  6. dubbo初步认识

    dubbo中文网站:http://dubbo.apache.org/zh-cn/ dubbo英文网站:http://dubbo.apache.org/en-us/ 1.Apache Dubbo是一款高 ...

  7. WebForm 【发送邮件】

    C#实现简单的SmtpClient发送邮件 分析 需要什么 发送邮件     --       发送内容         --      接收邮件 流程(各功能都适用) 创建对象    --     ...

  8. MT【239】离心率最大

    已知点$A$为椭圆$\dfrac{x^2}{a^2}+\dfrac{y^2}{b^2}=1(a>b>0)$的左顶点,$O$为坐标原点,过椭圆的右焦点$F$作垂直于$x$轴的直线$l$.若直 ...

  9. Qt&period;常用代码整理

    窗口全屏化(此方法只对*窗口有效,对子窗口无效) window.showFullScreen() 字符串处理 Qt还提供了一种方便的字符串组合方式,使用QString::arg()函数,此函数的重载 ...

  10. 20165326 java实验二

    2017-2018-2 20165326实验二<Java面向对象程序设计>实验报告 课程:Java程序设计 班级:1653班 姓名:陈卓 学号:20165326 成绩:指导教师:娄嘉鹏 实 ...

相关文章