百叶窗特效(用move.js库)

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

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

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

  

转载于:https://www.cnblogs.com/xsk-style/p/6375995.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
百叶窗切换特效是一种比较常见的UI界面特效,可以在C语言中通过图形来实现。下面是一个简单的示例代码: ```c #include <graphics.h> #include <conio.h> #include <stdio.h> #include <stdlib.h> #include <dos.h> #define DELAY 30 // 定义延迟时间,单位为毫秒 int main() { int gd = DETECT, gm, i, j, k, m, n; initgraph(&gd, &gm, ""); setbkcolor(WHITE); // 设置背景颜色为白色 cleardevice(); // 清屏 // 读取第一张图片 readimagefile("image1.jpg", 0, 0, getmaxx(), getmaxy()); // 循环切换图片 for (i = 0; i < getmaxx(); i += 10) { for (j = 0; j < getmaxy(); j += 10) { for (k = 0; k < 10; k++) { // 绘制百叶窗效果 setfillstyle(SOLID_FILL, BLACK); bar(i, j + k * 10, i + 10, j + k * 10 + 5); delay(DELAY); } // 读取下一张图片 m = rand() % 5 + 1; char filename[10]; sprintf(filename, "image%d.jpg", m); readimagefile(filename, 0, 0, getmaxx(), getmaxy()); for (n = 10; n >= 0; n--) { // 恢复百叶窗效果 setfillstyle(SOLID_FILL, WHITE); bar(i, j + n * 10, i + 10, j + n * 10 + 5); delay(DELAY); } } } getch(); closegraph(); return 0; } ``` 这个示例代码中,我们使用了 `graphics.h` 图形来实现图形绘制和读取图片,使用了 `conio.h` 来等待用户按下任意键退出程序。具体实现方法是在循环中绘制一系列黑色的矩形,形成百叶窗效果,然后读取下一张图片,并恢复百叶窗效果,最终形成百叶窗切换的特效。其中 `DELAY` 常量定义了延迟时间,可以根据需要自行调整。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值