位置：广州松河 > 技术支持 > div+css+jquery公告栏垂直(上下)文字单行滚动特效代码（三种样式）_js/jQuery

div+css+jquery公告栏垂直(上下)文字单行滚动特效代码（三种样式）_js/jQuery

来源：网络整理时间：2023/3/4 0:57:12 共 3647 浏览

网站公告栏一般采用滚动形式，随着jquery的出现，特效做起来更加简单，所以目前大多数网站都有自己的公告栏目，采用文字滚动的形式，今天来分享几个垂直公告文字滚动特效，分别是全面版，常用版，以及极简版！

1、jquery，公告垂直滚动，可关闭特效：（全面版）

html

<div id="wenzilunbo">
  <div id="announcement_box">
    <div id="announcement">
      <ul style="margin-top: 0px;">
        <li>公告滚动特效</li><li>公告滚动特效</li><li>公告滚动特效</li>
      </ul>
    </div>
    <div class="announcement_remove"><a title="关闭" href="javascript:void(0)" onClick="$('#announcement_box').slideUp('slow');"><span id="announcement_close">×</span></a></div>
  </div>
</div>

CSS：

#wenzilunbo{width:1100px; margin:-34px auto 30px;overflow: hidden}
#announcement_box {/*position:absolute; top:60px;background-color:rgba(240, 239, 215, 0.5); background-color:#E3DEC0 \9;border:1px dashed #407864;*/border-radius:2px; width:1100px; max-height:24px;}
#announcement { margin-left:10px;background:url(images/notice_icon.png) left center no-repeat scroll; height:24px; line-height:24px; overflow: hidden; padding: 0px 0px 0px 20px; float:left;}
#announcement a {color:#282828;}
#announcement a:hover {color:#94382B;}
.announcement_remove {padding:0px 10px; float:right; font-size:14px;}
.announcement_remove a {height:18px; width:18px; display:block; line-height:16px; margin:4px 0 3px 0; margin:10px 0 3px 0 \9; text-align:center;}
.announcement_remove a:hover {background-color:#cdc8a0; box-shadow:1px 1px 1px #66614c inset; -webkit-box-shadow:1px 1px 1px #666 inset; -moz-box-shadow:1px 1px 1px #666 inset; border-radius:3px;}
#announcement_close {color:#666;}
#announcement span {color:#666;}

jquery：

function AutoScroll(obj){
 $(obj).find("ul:first").animate({ 
  marginTop:"-25px" 
 },100,function(){ 
  $(this).css({marginTop:"0px"}).find("li:first").appendTo(this); 
  }); 
} 
jQuery(function($){
   $(document).ready(function(){ 
   setInterval('AutoScroll("#announcement")',4000) 
   });
});

2、公告垂直滚动特效代码（常用版）

<!DOCTYPE>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>滚动公告栏</title>

<script type="text/javascript" src="
http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script
>

<style type="text/css">

*{margin: 0;padding: 0;}

/*公告栏滚动CSS*/

#callboard {width: 600px;margin: 100px auto 0;height: 24px;line-height: 24px;overflow: hidden;font-size: 12px;background-color: #f5f5f5;}

</style>

</head>

<body>

<div id="callboard">

  <ul>

    <li> <span style="color:red;">公告[2]：前端组上线一个月零八天，PR升为3，BD权重1</span> </li>

    <li> <span style="color:red;">公告[3]：撤下了BloggerAds，原因为收入太少，打开速度慢！</span> </li>

    <li> <a href="
http://www.jb51.net
">公告[1]：前端组主题正在整理中..有需要用的朋友请留个言，以方便及时通知！</a> </li>

  </ul>

</div>

<!--公告板滚动--> 

<script type="text/javascript">

(function (win){

    var callboarTimer;

    var callboard = $('#callboard');

    var callboardUl = callboard.find('ul');

    var callboardLi = callboard.find('li');

    var liLen = callboard.find('li').length;

    var initHeight = callboardLi.first().outerHeight(true);

    win.autoAnimation = function (){

        if (liLen <= 1) return;

        var self = arguments.callee;

        var callboardLiFirst = callboard.find('li').first();

        callboardLiFirst.animate({

            marginTop:-initHeight

        }, 500, function (){

            clearTimeout(callboarTimer);

            callboardLiFirst.appendTo(callboardUl).css({marginTop:0});

            callboarTimer = setTimeout(self, 500);

        });

    }

    callboard.mouseenter(

        function (){

            clearTimeout(callboarTimer);

        }).mouseleave(function (){

            callboarTimer = setTimeout(win.autoAnimation, 5000);

        });

}(window));

setTimeout(window.autoAnimation, 5000);

</script>

</body>

</html>

3、最简单的公告滚动，无动画效果的滚动（极简版本）

<!DOCTYPE> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>无标题文档</title> 
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<style>
*{ padding:0px; margin:0px; } 
ul{ list-style:none; height: 30px;overflow: hidden} 
li{ line-height:30px;} 
</style> 
</head> 
<body> 
<ul><li>1111</li> <li>22222</li> <li>3333</li> <li>44444</li> <li>5555</li> <li>66666</li> </ul> 
<script> 
setInterval(function(){ 
var newList=$('ul :first').clone(true); 
$('ul').append(newList); 
$('ul :first').remove(); 
},2000);
</script> 
</body> 
</html>

版权说明：
本网站凡注明“广州松河原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：css让图片自适应容器（div）大小,超便捷响应式图片自适应_CSS学习 | ·下一条：div+css在固定宽高下显示滚动条(右侧、下方)以及滚动条颜色 - overflow_CSS学习