jQuery动态向上滚动

最新推荐文章于 2023-10-17 20:45:40 发布

front_end_fan

最新推荐文章于 2023-10-17 20:45:40 发布

阅读量2.3k

点赞数 2

分类专栏： jquery 文章标签： jquery 滚动新闻滚动图片

本文链接：https://blog.csdn.net/qq_39198420/article/details/77062145

版权

jquery 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

总结：概括滚动的新闻、字幕、图片：两个最核心功能：
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>*

front_end_fan

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
jQuery动态向上滚动

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

扫一扫