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

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

本实现借助于自己实现的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. nginx不支持pathinfo函数

    server { listen ; server_name www.domain.com domain.com; error_page /.html; error_page /50x.html; lo ...

  2. PHP 错误与异常 笔记与总结（7）将错误日志以邮件方式发送

    当系统发生了很严重的问题,需要立刻发送给管理员.可以通过 error_log() 将错误以邮件形式发送到邮箱. 在 php.ini 中设置: sendmail_from = 472323087@qq. ...

  3. PHP 防止表单重复提交

    原理是:首先在表单页生成一个 随机不重复的 token(可以利用时间戳),把 token 的值分别存入 session 和 表单的隐藏域:当提交表单的时候,在接收页对比传递过来的 token 和ses ...

  4. Windows与Linux/Mac系统时间不一致的解决方法

    Windows与Linux/Mac系统时间不一致的解决方法 分类: linux2012-02-12 14:25 1691人阅读 评论(1) 收藏 举报 windowsubuntusystemlinux ...

  5. DirectX基础学习系列2

    补充第一章矩阵内容 向量 1 3D空间向量,包含浮点数类型坐标 D3DXVECTOR-->D3DXVECTOR3 2向量的长度 D3DXVector3Length(const D3DXVECTO ...

  6. JNDI学习总结(一)——JNDI数据源的配置

    一.数据源的由来 在Java开发中,使用JDBC操作数据库的四个步骤如下:   ①加载数据库驱动程序(Class.forName("数据库驱动类");) ②连接数据库(Connec ...

  7. TCP协议中的三次握手和四次挥手(图解)（转载http://blog.csdn.net/whuslei/article/details/6667471）

    建立TCP需要三次握手才能建立,而断开连接则需要四次握手.整个过程如下图所示: 先来看看如何建立连接的 首先Client端发送连接请求报文,Server段接受连接后回复ACK报文,并为这次连接分配资源 ...

  8. nginx gzip 模块配置

    #gzip模块设置 gzip on; #开启gzip压缩输出 gzip_min_length 1k; #最小压缩文件大小 gzip_buffers 4 16k; #压缩缓冲区 gzip_http_ve ...

  9. 【转】【DP_树形DP专辑】【9月9最新更新】【from zeroclock's blog】

    树,一种十分优美的数据结构,因为它本身就具有的递归性,所以它和子树见能相互传递很多信息,还因为它作为被限制的图在上面可进行的操作更多,所以各种用于不同地方的树都出现了,二叉树.三叉树.静态搜索树.AV ...

  10. 蓝牙BLE 架构剖析

    一.BLE架构概述: 二.各个层