<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS实现百叶窗</title>
<!--原理：
首先，主要是根据li里的div是保存每一行所有要变化的信息，定时改变div的高度，溢出部分隐藏来实现。
通过2个setInterval来实现，外层setInterval用来控制多长时间改变一次内容，里层setInterval用来控制如何改变。-->
<style>
*{ margin:0; padding:0;}
li{ list-style:none;}
#ul1,#ul2{ width:300px; height:auto; float:left; border-top:1px #000000 solid; margin:20px;}
li{ width:100%; height:30px; overflow:hidden; position:relative; border-bottom:1px #333333 dashed; line-height:30px;}
li div{ position:absolute; top:-30px;}
li div p { height:30px;}
</style>
<script type="text/javascript" src="move.js"></script>
<script>
window.onload = function(){
    var oUl = document.getElementById('ul1');
    var oUl2 = document.getElementById('ul2');

　　//先对左侧UL标签实行百叶窗效果；
    toShow(oUl);

//两秒延迟后，对右侧UL标签实行百叶窗效果；
    setTimeout(function(){
        toShow(oUl2);
    },2000);  ࡣ
    
    //实现百叶窗函数
    function toShow(obj){
        var aDiv = obj.getElementsByTagName('div');
        var iNow = 0;//共有的内容行数；
        var timer = null;//setInterval的返回值，用于clearInterval；
        var bBtn = true;
        //UL定时每4秒变换1次
        setInterval(function(){
        
            toChange();
        
        },4000);
        
        //UL变换1次
        function toChange(){
            //通过setInterval来对每一个li依次改变
            timer = setInterval(function(){
            //如果UL的每个li都变换过了，则停止，等待外层toShow（）再次调用toChange（）函数；
                if(iNow==aDiv.length){
                    clearInterval(timer);
                    iNow = 0;
                    bBtn = !bBtn;//用于从上往下信息滚完了，再从下往上回滚；
                }
                else if(bBtn){
                    startMove(aDiv[iNow],{top:0});
                    iNow++;   //为了下次定时执行时变为操作下一条内容的变换
                }
                else{
                    startMove(aDiv[iNow],{top:-30});
                    iNow++;
                }
                    
            },100);
            
        }
        
    }
    
};
</script>
</head>

<body>
<ul id="ul1">
    <li>
        <div>
            <p>1111111111</p>
            <p>2222222222</p>
        </div>
    </li>
    <li>
        <div>
            <p>3333333333</p>
            <p>4444444444</p>
        </div>
    </li>
    <li>
        <div>
            <p>5555555555</p>
            <p>6666666666</p>
        </div>
    </li>
    <li>
        <div>
            <p>7777777777</p>
            <p>8888888888</p>
        </div>
    </li>
    <li>
        <div>
            <p>9999999999</p>
            <p>aaaaaaaaaa</p>
        </div>
    </li>
    <li>
        <div>
            <p>bbbbbbbbbb</p>
            <p>cccccccccc</p>
        </div>
    </li>
</ul>

<ul id="ul2">
    <li>
        <div>
            <p>1111111111</p>
            <p>2222222222</p>
        </div>
    </li>
    <li>
        <div>
            <p>3333333333</p>
            <p>4444444444</p>
        </div>
    </li>
    <li>
        <div>
            <p>5555555555</p>
            <p>6666666666</p>
        </div>
    </li>
    <li>
        <div>
            <p>7777777777</p>
            <p>8888888888</p>
        </div>
    </li>
    <li>
        <div>
            <p>9999999999</p>
            <p>aaaaaaaaaa</p>
        </div>
    </li>
    <li>
        <div>
            <p>bbbbbbbbbb</p>
            <p>cccccccccc</p>
        </div>
    </li>
</ul>
</body>
</html>

JS实现百叶窗效果的更多相关文章

  1. javascript实例学习之六—百叶窗效果

    一.要结合布局才能形成百叶窗的效果 二.开启两个定时器,第一个定时器控制的是百叶窗整体一次上翻,一次下翻:另一个控制百叶窗中的各页逐次翻转,形成层次效果.否则就成了普通的滚动广告的效果了 本实现借助于 ...

  2. React.js实现原生js拖拽效果及思考

    一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...

  3. 用js实现动画效果核心方式

    为了做好导航菜单,有时候需要在菜单下拉的时候实现动画效果,所以这几天就研究了研究如何用js实现动画效果,实现动画核心要用到两个函数,一个是setTimeOut,另一个是setInterval. 下边我 ...

  4. js拖拽效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 原生JS实现分页效果2.0（新增了上一页和下一页，添加当前元素样式）

    虽然写的很烂,但至少全部都是自己写的,因为这个没有固定的顺序,所以就没有封装,如果你技术好的话,可以你写的分享给我,谢谢. <!DOCTYPE html><html lang=&qu ...

  6. 原生JS实现分页效果1.0

    不太完整,写的太急,等等加上完整注释,写起来还是有些难度的,写的有点水,后面再改进改进. <!DOCTYPE html><html lang="en">&l ...

  7. 使用JS实现手风琴效果

    想要实现简单的手风琴切换效果,需要使用JS实现,如下是使用javascript源码实现,后续会更新使用jQuery实现. 1. 先进行简单的布局:我们可以再ul下添加几个li实现html的简单布局,再 ...

  8. js弹窗登录效果(源码)--web前端

    1.JS弹窗登录效果 <!DOCTYPE html><html lang="en"><head> <meta charset=" ...

  9. 原生JS实现弹幕效果

    纯属无聊写的,可能有很多问题,欢迎批评指教. 效果图:图一是预设的一些弹幕,图二是自己发射的弹幕,效果是一样的.   首先是弹幕的位置,是要从最右滑到最左,为了防止随机高度弹幕会覆盖的问题,设置了通道 ...

随机推荐

  1. 以层的观点思考各个nginx的log位置

    问题 做代理服务器时候,自身的log.被代理的服务器的log 回答 以层的观点思考这个问题 各层的日志落在各层

  2. Bridge Method

    1.java编译器采用Bridge Method 来兼容本该使用泛型的地方使用了非泛型的问题. public class TestBridgeMethod { public static void m ...

  3. 关于like %%的优化思路

    测试数据:2亿行,被筛选出的数据,3KW多行. 众所周知 like %str%无法走索引,但是我们如果实在是有这种需求要达到like '%str%'的筛选目的,怎么优化好一些呢? 以下是我的一些思考: ...

  4. 判断数A和数B中有多少个位不相同

    1. A & B,得到的结果C中的1的位表明了A和B中相同的位都是1的位:2. A | B, 得到的结果D中的1的位表明了A和B在该位至少有一个为1的位,包含了A 与 B 都是1的位数,经过前 ...

  5. boost之智能指针

    内存问题永远是c++中讨论的重要话题 1.c98 auto_ptr的实现,auto_ptr的特点是始终只保持一个指针指向对象,若经过赋值或者拷贝之后原指针失效 #include <iostrea ...

  6. 2.4 使用ARDUINO控制MC20进行GPS数据的获取和解析

    需要准备的硬件 MC20开发板 1个 https://item.taobao.com/item.htm?id=562661881042 GSM/GPRS天线 1根 https://item.taoba ...

  7. SDWebImage浅析

    第一部分 SDWebImage库的作用: 通过对UIImageView的类别扩展来实现异步加载替换图片的工作. 主要用到的对象: 1)UIImageView(WebCache)类别,入口封装,实现读取 ...

  8. 面向对象高级编程——使用@property

    在绑定属性的时候,如过我们直接把属性暴露出去,虽然写起来简单,但是,没办法检查参数,导致可以把成绩随意改: s = Student() s.score = 9999 #不符合常规依然可以更改 这显然不 ...

  9. Oracle查询结果列的加减、求和、连接、列值相乘

    select prod.amount,prod.plansum,(prod.plansum-prod.amount) as borrow,d.enum_value from ----结果集相减(sel ...

  10. Polar 投影c#版本移植

    from:http://hi.baidu.com/sungaoyong/item/0c4584d25873f131e3108f05 ///刘泽军java版本的极坐标投影c#版本的移植 using Sy ...