jQuery动态向上滚动

来源：互联网发布：苹果电脑怎么编译c语言编辑：程序博客网时间：2024/06/04 18:57

总结：概括滚动的新闻、字幕、图片：两个最核心功能：
1、”永动“（infinite）
2、循环
js实现”永动“（infinite）的实现方法离不开定时器setInterval()，也就是说每过一段时间都要执行一次某个函数，从而实现无休止滚动；
而循环的实现：appendTo()或者append,三目运算符（或者 if else）,insertBefore()或者prepend()等等好多种方法。

*<!doctype html><html><head><meta charset="utf-8"><title>jQuery动态向上滚动</title><script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script><style>* {    margin:0;    padding:0;}body {    font-family:'microsoft yahei';    background:#fff;    overflow:hidden;}#demo1,#demo2 {    width:1000px;    height:40px;    line-height:30px;    margin:50px auto;    overflow:hidden;    background:#f60;    color:#fff;    padding:10px;    box-sizing:border-box;}#demo2 {    height:90px;}#demo2 a {    display:block;    text-decoration:none;    color:#fff;}#demo3 {    width:1000px;    height:400px;    overflow:hidden;    background:#f60;    color:#fff;    margin:50px auto;    padding:10px;    box-sizing:border-box;}</style></head><body><!-- demo示例一 --><div id="demo1">    <div class="demo">        <div class="con">            向幸福生活致敬111！        </div>        <div class="con">            向幸福生活致敬222！        </div>        <div class="con">            向幸福生活致敬333！        </div>        <div class="con">            向幸福生活致敬111！        </div>    </div></div><!-- demo示例二 --><div id="demo2">    <a href="#">第一条新闻</a>    <a href="#">第二条新闻</a>    <a href="#">第三条动态</a></div><!-- demo示例三 --><div id="demo3" style="overflow:hidden;height:200px;">    <div id="dl">        <p>恭喜133****1062用户获得10元手机话费</p>        <p>恭喜153****0792用户获得50元助学代金券</p>        <p>恭喜153****3890用户获得330元上课大礼包</p>        <p>恭喜189****0883用户获得330元上课大礼包</p>        <p>恭喜133****6823用户获得1500元现金</p>        <p>恭喜153****5050用户获得330元上课大礼包</p>        </div>    </div><script>    //总结：3种方法都离不开定时器setInterval()，也就是说每过一段时间都要执行一次某个函数，从而实现无休止滚动    //而循环的实现：appendTo()或者append,三目运算符（或者 if else）,insertBefore()或者prepend()$(function() {    // demo示例一    setInterval('autoScroll("#demo1")', 1000);// demo示例一函数function autoScroll(obj) {　　　　　　    $(obj).find(".demo:first").animate({　　　　　　　　        marginTop: "-20px"　　　　　　    }, 500, function() {　　　　　　　　        $(this).css({            marginTop: "0px"        }).find(".con:first").appendTo(this);　　//函数appendTo()把第一个挪到最后一个　　　　    });　　　　};    // demo示例二    $('#demo2 a:first').siblings().hide();    setInterval(function() {        $('#demo2 a:visible').slideUp('slow', function() {            $(this).next('a')[0] === undefined ? $('a:first').fadeIn("slow") : $(this).next('a').fadeIn("slow");        });    }, 1000 * 2)});// demo示例三var drawLetters = document.getElementById("demo3");　　　　var dl = document.getElementById("dl");　　　　var speed = 20; //滚动速度值，值越大速度越慢　　　　function Marquee() {　　　　　　    drawLetters.scrollTop++;　　　　　　    var newNode = document.createElement("div");　　　　　　    newNode.innerHTML = dl.innerHTML;　　　　　　    drawLetters.insertBefore(newNode, null);　　　　}　　　　var MyMar = setInterval(Marquee, speed); //设置定时器</script></body></html>*

阅读全文

0 0