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);
html语言字体上下滚动代码,div+css+jquery公告栏垂直(上下)文字单行滚动特效代码(三种样式)...相关推荐
- html中隔行的代码,js+css 控制表格隔行变色与单行高亮的代码
代码片段: 1,css代码 复制代码 代码示例: table {border-collapse:collapse;border:solid #999;border-width:1px 0 0 1px; ...
- html字体悬浮效果,CSS 3.0文字悬停跳动特效代码
给大家分享一个用CSS 3.0实现的文字悬停跳动特效,效果如下: 以下是代码实现,欢迎大家复制粘贴和收藏. CSS 3.0文字悬停跳动特效 * { margin: 0; padding: 0; } b ...
- 【HTML实现弹幕滚动效果和文字动态发光特效代码】
HTML实现弹幕滚动效果 我们经常会在看电影的时候,打开弹幕,以此来查看网友们对电影的实时评价.面对屏幕上一条一条滚动的弹幕,到底是如何实现的呢? 下面我们来介绍用HTML实现弹幕滚动的方法. 1 ...
- 毕业设计游戏类网站设计静态页面基于html,div+css+jquery(含源码)
首页.游戏简介.游戏资料.单机攻略.手游攻略.网络攻略.登录|注册等相关功能页面 适合商业项目或大学生毕业设计程序,整套静态页面html,div+css+jquery相关技术 更多相关内容,请点击下载 ...
- div+css显示两行或三行文字
div+css显示两行或三行文字 display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; //需要控制的文 ...
- 前端html纯静态网页汽车保养服务类资讯网站可用于商业开发及毕业设计素材含源码(div+css+jquery)
基于html+div+css+jquery开发,可用于毕业设计,商业开发,属于纯静态html网页, 源码下载地址:>>>请点击!
- 【html css】DIV+CSS如何让图片和文字在同一行
[html css]DIV+CSS如何让图片和文字在同一行 前端react项目要写一个图标放在标题后面. 在div+css布局中,如果一行(或一个DIV)内容中有图片和文字的话,图片和文字往往会一个在 ...
- 文字动态发光特效代码简单实现
第一种方法: <html><head><title>文字动态发光特效代码</title></head><body bgcolor=&q ...
- CSS三种样式表:行内样式表、内部样式表、外部样式表
目录 一.CSS三种样式表 1.内部样式表 2.行内式(内联样式) 3.外部样式表(外链式) 二.三种样式表的对比 三.CSS样式表规则 一.CSS三种样式表 1.内部样式表 2.行内样式表(内联式) ...
最新文章
- 鸿蒙操作系统在使用了吗,【图片】华为鸿蒙系统的厉害之处在于 你可能非用不可
!【手机吧】_百度贴吧...
- React-Native Navigator 过渡动画卡顿的解决方案
- ThreadLocal与Synchronized的用法
- java if hasvalue_首选:可为空 .HasValue或Nullable !=空吗?
- 算法设计中的基础常用代码
- vue - rimraf
- linux如何修改文件或目录的权限(chmod)
- 在Javascript中实现类似C#中string.Format的功能
- HTTP 权威指南 第二章 URL 与资源
- 推荐系统专利:一种信息推荐方法、系统及存储介质和终端设备
- k-平均算法(k-means算法)(k均值算法)例题
- JAVA当前时间timestamp_java获取获得Timestamp类型的当前系统时间
- 用 Python MDL 开发时尚的 Material design 的网站
- day68 Django--中间件
- 电脑朋友圈,买了电脑发朋友圈说说
- 王建伟c语言入门,C语言【共43课时】_C/C++/C#课程-51CTO学院
- 网易云课堂Java入门视频课程
- 人生本过客,何必千千结
- 卸载重装tomcat 2021-11-09
- CC2652 OAD升级
热门文章
- 72轨 | 国产外星电子核最全分轨混音教程:呼叫克苏鲁 新单曲 - MZD Studios
- java毕业设计选题基于javaweb实现的政府机关公文|文件收发管理系统
- 递归特征消除和K折交叉验证(以决策树回归为例)
- 日记,我的初次创业bp(商业计划书)
- 当edquota命令不能使用的时候
- 台式机win10关闭fn热键_win10惠普怎么取消fn win10惠普取消fn的简单方法
- Asce‘s Summer Ranking No.11
- java的concurrent用法详解
- 2021年安全员-C证考试内容及安全员-C证实操考试视频
- ER图转关系模型小结