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

    • 效果图
    • 实现原理
    • 代码

效果图

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

实现原理:

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

代码


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <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;">内容1p>
            <p style="height:45px;overflow:hidden;">内容2p>
            <p style="height:45px;overflow:hidden;">内容3p>
            <p style="height:45px;overflow:hidden;">内容4p>
            <p style="height:45px;overflow:hidden;">内容5p>
            <p style="height:45px;overflow:hidden;">内容6p>
        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>

你可能感兴趣的:(工作积累)