html语言字体上下滚动代码,div+css+jquery公告栏垂直(上下)文字单行滚动特效代码（三种样式）...

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

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

html

• 公告滚动特效
• 公告滚动特效
• 公告滚动特效

×

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、公告垂直滚动特效代码(常用版)

滚动公告栏

>

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

•  公告[2]：前端组上线一个月零八天，PR升为3，BD权重1 
•  公告[3]：撤下了BloggerAds，原因为收入太少，打开速度慢！ 
•  

  http://www.jb51.net

  ">公告[1]：前端组主题正在整理中..有需要用的朋友请留个言，以方便及时通知！

   

(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);

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

 

无标题文档

*{ padding:0px; margin:0px; }

ul{ list-style:none; height: 30px;overflow: hidden}

li{ line-height:30px;}

• 1111 
• 22222 
• 3333 
• 44444 
• 5555 
• 66666 

setInterval(function(){

var newList=$('ul :first').clone(true);

$('ul').append(newList);

$('ul :first').remove();

},2000);