今天操作的是一个,百叶窗效果的一个页面特效,好,现在直接上最终效果吧。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="/UploadFiles/2021-04-02/move.min.js">
导入这个,这个插件怎么用呢?具体的我就不讲了,可以看这里 ,这篇文章讲的挺好的。关键就是,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,百叶窗
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“用move.js库实现百叶窗特效”评论...
更新动态
2024年11月13日
2024年11月13日
- 群星《唱给女人的歌》24K德国HD金碟[WAV+CUE]
- 孙燕姿.2011-是时候【美妙音乐】【WAV+CUE】
- 苏芮.2003-回首·时代全经典2CD【华纳】【WAV+CUE】
- 梁咏琪.1996-爱自己【EEI】【WAV+CUE】
- IGN经典逆天骚操作名著——《墙头草修炼手册》
- 突然爆火的“网红游戏”,真的有那么多人玩吗?
- 何老师客串《浪人崛起》了?盘点与明星撞脸的角色!
- 【原神】关于星鹫赤羽对珐芙琴班配队下珐露珊主C的适配度分析
- 【原神】V5.1攻略 | 迪西雅角色简评
- 【原神】大日御舆顶端怎么上去
- 胥拉齐《感谢有你》DTS-WAV
- 罗海英《金牌歌后》【WAV+CUE】
- 林叶《林叶·夜》【WAV/分轨】
- 群星《国语经典名曲01》音乐磁场系列[WAV+CUE][1G]
- 齐豫《滚石24K》24K金碟珍藏版系列[低速原抓WAV+分轨][1G]