一、要结合布局才能形成百叶窗的效果

二、开启两个定时器,第一个定时器控制的是百叶窗整体一次上翻,一次下翻;另一个控制百叶窗中的各页逐次翻转,形成层次效果。否则就成了普通的滚动广告的效果了

本实现借助于自己实现的base.js和tool.js 。重点是利用了其中的animate函数

1.页面布局代码

<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>测试页面</title>
<style>
*{margin:; padding:; }
ul{width:300px;}
ul>li{list-style: none;height:30px; overflow: hidden;border-bottom: 1px dashed #;}
li>div{margin:; padding:;position:relative;top:;}
ul p{height:30px;line-height: 30px;} </style>
</head> <body>
<ul >
<li>
<div>
<p></p>
<p></p>
</div>
</li>
<li>
<div>
<p></p>
<p></p>
</div>
</li>
<li>
<div>
<p></p>
<p></p>
</div>
</li>
<li>
<div>
<p></p>
<p></p>
</div>
</li>
<li>
<div>
<p></p>
<p></p>
</div>
</li>
</ul>
<script src="./commonJs/tool.js"></script>
<script src="./commonJs/base.js"></script>
<script src="./usualEffects/js/baiyechuang.js"></script> </body> </html>

百叶窗html布局

2.相关js代码

/*
* 尝试实现百叶窗效果
*/
//需要两个定时器
$(function() {
var oUl = document.getElementsByTagName('ul')[];
showBaiye(oUl); function showBaiye(oUl) {
var divs = oUl.getElementsByTagName('div');
var flag = true;
var iNow = ;
var timer;
//每4s百叶窗整体翻动一次,一次上翻,一次下凡
setInterval(function() { //如果不开定时器的话,就没有层次的效果了,就是普通轮播图的效果
// for (var i = 0; i < divs.length; i++) {
// $(divs[i]).animate({ 'top': '-30px' }, null, 100);
// };
//每隔300ms每一个百叶逐个翻动,形成层次效果
timer = setInterval(changeItem, );
flag=!flag;
}, ); function changeItem() {
var endValue = flag ? '-30px' : '';
$(divs[iNow]).animate({ 'top': endValue }, null, );
iNow++;
if (iNow == divs.length) {
iNow = ;
clearInterval(timer); }
}
} });

javascript实例学习之六—百叶窗效果的更多相关文章

  1. javascript实例学习之六—自定义日历控件

    基于之前上篇博客轻量级jquery,tool.js和base.js.自定义开发的base_datePicker插件,效果类似于jquery_ui的datePicker插件 //基于Base.js以及t ...

  2. JS实现百叶窗效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. 用Javascript实现回到顶部效果

    用Javascript实现回到顶部效果 经常看到网页中有回到顶部的效果,今天也研究一下回到顶部有哪些方法.众所周知,用锚链接是实现回到最简单的方法,但是从用户体验效果来说,并不是最好的.(锚链接回到顶 ...

  4. JavaScript Table行定位效果

    作者:cloudgamer 时间: 2009-09-17 文档类型:原创 来自:蓝色理想 第 1 页 JavaScript Table行定位效果 [1] 第 2 页 JavaScript Table行 ...

  5. javascript - 图片的幻灯片效果

    javascript 代码: <script type="text/javascript"> function select_play() { var select_p ...

  6. JavaScript实现的购物车效果-效果好友列表

    JavaScript实现的购物车效果.当然,可以在许多地方使用这种效果.朋友的.例如,在选择.人力资源模块,工资的计算,人才选拔等..下面来看一下班似有些车效果图: watermark/2/text/ ...

  7. WPF编游戏系列 之六 动画效果(1)

    原文:WPF编游戏系列 之六 动画效果(1)        本篇主要针对界面进行动画效果处理.首先在打开或关闭界面时,使其产生动态效果而不是生硬的显示或消失(如下图).其次在鼠标放到关闭窗口图标上时, ...

  8. pixijs shader 制作百叶窗效果

    pixijs shader 制作百叶窗效果 直接贴代码了 const app = new PIXI.Application({ transparent: true }); document.body. ...

  9. JavaScript封装一个函数效果类似内置方法concat()

    JavaScript封装一个函数效果类似内置方法concat() 首先回忆concat()的作用: concat() 方法用于连接两个或多个数组.该方法不会改变现有的数组,而仅仅会返回被连接数组的一个 ...

随机推荐

  1. 如何用Apache POI操作Excel文件-----如何对一个单元格加注解?

    有的时候,我们需要通过操作Apache POI,在生成Cell数据的同时,能对其生成的Cell,加上注解(comments),类似于下面的. 那么对于这种情况,我们的代码应该如何写呢? 借花献佛,我就 ...

  2. [ZZ] D3D中的模板缓存(3)

    http://www.cppblog.com/lovedday/archive/2008/03/25/45334.html http://www.cppblog.com/lovedday/ D3D中的 ...

  3. PHP 二维数组根据相同的值进行合并

    例如有一个二维数组 $arr: $arr = array( array( 'review_id' =>102 , 'url'=>'a.jpg', ), array( 'review_id' ...

  4. apache的prefork的详解

    apache的prefork的参数详解:ServerLimit 2000 这是最大进程数的阀值StartServers 25  启动时建立的子进程MinSpareServers 25 最小空闲进程Ma ...

  5. rsync安装及配置

    一.Server端 CentOS 6下安装yum -y install xinetd1.配置:vi /etc/xinetd.d/rsyncservice rsync{    disable = yes ...

  6. 1.PHP内核探索:从SAPI接口开始

    SAPI:Server Application Programming Interface 服务器端应用编程端口.研究过PHP架构的同学应该知道这个东东的重要性,它提供了一个接口,使得PHP可以和其他 ...

  7. Stationary point

    https://en.wikipedia.org/wiki/Stationary_point https://zh.wikipedia.org/wiki/驻点

  8. [qemu] 挂载qcow2文件,qcow2里边还有个lvm

    环境:archlinux 背景:在虚拟机里玩dpdk,把挂载HugePage(hugetlbfs)的命令写入fstab的时候,写错了,无法启动,需要把qcow2挂起来改一下. 方法:使用qemu-nb ...

  9. 蓝牙—GAP(Generic Access Profile)

    1.简介 下图可见GAP在蓝牙协议中的位置和关系 LE中GAP共有四个角色: <1> Boradcaster:发送advertising 事件的设备 <2>Observer:接 ...

  10. Bulk Insert & BCP执行效率对比(续)

    上回由于磁盘空间(约70G)不足,导致Bulk Insert和BCP导入中途失败:今次统一一些操作,以得到Bulk insert与BCP分别执行效率: 1. 15435390笔数据,21.7G csv ...