超级超级超级简单的广告条效果

最新推荐文章于 2023-04-15 18:06:00 发布

Cc_JoJo

最新推荐文章于 2023-04-15 18:06:00 发布

阅读量235

点赞数 1

分类专栏：工作积累文章标签：超级超级超级简单的广告条效果

本文链接：https://blog.csdn.net/caohoucheng/article/details/79052586

版权

工作积累专栏收录该内容

19 篇文章 1 订阅

订阅专栏

效果图

这里写图片描述
图中推荐右侧就是我们想要实现的效果

实现原理:

利用setInterval+animate实现在定时不间断的动态显示我们想要展示的一条条信息

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<style type="text/css">
    *{margin: 0;padding: 0}
</style>
<body>
    <div id="lunbo"  style="height:45px;line-height:45px;font-size:12px;overflow:hidden;background:pink">
        <div id="roundItem" style="position:relative;top:0;">
            <p style="height:45px;overflow:hidden;">内容1</p>
            <p style="height:45px;overflow:hidden;">内容2</p>
            <p style="height:45px;overflow:hidden;">内容3</p>
            <p style="height:45px;overflow:hidden;">内容4</p>
            <p style="height:45px;overflow:hidden;">内容5</p>
            <p style="height:45px;overflow:hidden;">内容6</p>
        </div>
    </div>
</body>
<script type="text/javascript">
    var time=2000;//
    var time=setInterval(function(){
        //添加top动画
        $('#roundItem').animate({top:-45},1000,function(){ //45为元素高
        //将第一个元素放到末尾    
        $('#roundItem').find("p:first").insertAfter($('#roundItem').find("p:last"));
        //top改为0
        $('#roundItem').css({"top":0});
        }); 
    },time) 


</script>
</html>

Cc_JoJo

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
超级超级超级简单的广告条效果

效果图实现原理代码效果图图中推荐右侧就是我们想要实现的效果实现原理:利用setInterval+animate实现在定时不间断的动态显示我们想要展示的一条条信息代码html lang="en">head> meta charset="UTF-8"> title>Documenttitle> script src="
复制链接

扫一扫