jQuery动态向上滚动

Html

Css



    
        
            向幸福生活致敬！
        
        
            向幸福生活致敬！
        
        
            向幸福生活致敬！
        
    



    第一条新闻
    第二条新闻
    第三条动态




    
    
        恭喜133****1062用户获得10元手机话费
    
        恭喜153****0792用户获得50元助学代金券
    
        恭喜153****3890用户获得330元上课大礼包
    
        恭喜189****0883用户获得330元上课大礼包
    
        恭喜133****6823用户获得1500元现金
    
        恭喜153****5050用户获得330元上课大礼包

* {
	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;
}

$(function() {
    // demo示例一
    setInterval('autoScroll("#demo1")', 1000);
    // 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示例一函数
function autoScroll(obj) {　　　　　　
    $(obj).find(".demo:first").animate({　　　　　　　　
        marginTop: "-20px"　　　　　　
    }, 500, function() {　　　　　　　　
        $(this).css({
            marginTop: "0px"
        }).find(".con:first").appendTo(this);　　　　　　
    });　　　　
};
// 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); //设置定时器

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

jQuery动态向上滚动



代码描述：数据动态滚动显示，设置一定的时间，向上或向下滚动加载

3

最新

发表评论全部评论

暂时没有评论！

Yes,坎坎坷坷一起走0

2017/9/21 14:31:44

为什么我复制下来的demo3没有效果呢

恬恬~0

2017/9/22 10:37:08

会不会没有复制全，

Yes,坎坎坷坷一起走0

2017/9/25 14:48:19

全复制了，就是第三个不管事

回复

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

恬恬~

相关代码

jQuery动态向上滚动

最新