div+css不间断上下滚动模板
div+css不间断上下滚动模板
这里会用到js,这里直接拷贝使用即可。
常常我们会看见别人网页上使用上下不间断文字特效来展示公告、广告等内容,接下来我们将此css模板给大家。
效果图如下
不间断滚动代码效果图
CSS 代码如下:
<style type="text/css"> /* CSS代码如下 www.divcss5.com */ body{ margin:0; padding:0; text-align:center; font-size:12px;}/* 设置网页内容居中及字体大小 */ .modu{ margin:10px auto; height:15px; text-align:left; line-height:15px; width:400px;}/* 设置居中的“modu”宽度、高度文字局左等CSS属性选择器 这里的高度要与JS里的高度一致,以免滚动就会造成因高度不一致而使网页错位 */ .modu img{ vertical-align:middle;} .lf{ float:left; width:80px;}/* 设置局左浮动 */ .rt{ float:right; width:315px; overflow:hidden;}/* 设置局右浮动 */ </style> |
说明以上CSS代码设置了一个box“modu”,然后内部分为左右结构,左边是“滚动消息”标题(lf),右边是滚动内容(rt),直接放入html网页里的头部标签“head”即可。
Html代码:
- <p> </p>
- <p>divcss5模板-上下不间断滚动<a href="http://www.divcss5.com/">DIV+CSS</a></p>
- <div class="modu">
- <div class="lf"><img src="images/news.gif" alt="" width="11" height="11" /> 滚动消息:</div>
- <div class="rt">
- <script type="text/javascript">
- var marqueeContent=new Array(); //滚动主题
- marqueeContent[0]='<a href="http://www.divcss5.com/" target="_blank">
- + CSS学习网,DIV+CSS基础系统掌握CSS</a>';
- marqueeContent[1]='<a href="http://www.divcss5.com/" target="_blank">
- + 显而易见,最高的效率就是对现有材料的最佳利用。</a>';
- marqueeContent[2]='<a href="http://www.divcss5.com/" target="_blank">
- + 自己能解决的事,别花钱,花钱能解决的事,别求人。</a>';
- marqueeContent[3]='<a href="http://www.divcss5.com/" target="_blank">
- + 旅行是需要一种心情,更重要的是,需要一种冲动。</a>';
- marqueeContent[4]='<a href="http://www.divcss5.com/" target="_blank">
- + 随时用零碎的时间(如等人、排队等)做零碎的事情。</a>';
- var marqueeInterval=new Array(); //定义一些常用而且要经常用到的变量
- var marqueeId=0;
- var marqueeDelay=4000;
- var marqueeHeight=15;//注意这里设置每次滚动高度
- function initMarquee() {
- var str=marqueeContent[0];
- document.write('<div id=marqueeBox style="overflow:hidden;height:'+marqueeHeight+'px"
- onmouseover="clearInterval(marqueeInterval[0])"
- onmouseout="marqueeInterval[0]=setInterval(\'startMarquee()\',marqueeDelay)"><div>
- '+str+'</div></div>');
- marqueeId++;
- marqueeInterval[0]=setInterval("startMarquee()",marqueeDelay);
- }
- function startMarquee() {
- var str=marqueeContent[marqueeId];
- marqueeId++;
- if(marqueeId>=marqueeContent.length) marqueeId=0;
- if(marqueeBox.childNodes.length==1) {
- var nextLine=document.createElement('DIV');
- nextLine.innerHTML=str;
- marqueeBox.appendChild(nextLine);
- }
- else {
- marqueeBox.childNodes[0].innerHTML=str;
- marqueeBox.appendChild(marqueeBox.childNodes[0]);
- marqueeBox.scrollTop=0;
- }
- clearInterval(marqueeInterval[1]);
- marqueeInterval[1]=setInterval("scrollMarquee()",10);
- }
- function scrollMarquee() {
- marqueeBox.scrollTop++;
- if(marqueeBox.scrollTop%marqueeHeight==marqueeHeight){
- clearInterval(marqueeInterval[1]);
- }
- }
- initMarquee();
- </script>
- </div>
- </div>
说明:以上内容放置在html的body内的div代码及JS,这里不介绍JS,直接按位置拷贝即可使用。
最后综合完整的div+css滚动模板网页源代码如下:
- <!DOCTYPE html>
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- <meta content="" name="keywords" />
- <title>文字滚动消息广告代码,广告代码下载-www.divcss5.com</title>
- <style type="text/css">
- /* CSS代码如下 www.divcss5.com */
- body{ margin:0; padding:0; text-align:center; font-size:12px;}
- .modu{ margin:10px auto; height:15px; text-align:left;
- line-height:15px; width:400px;}
- .modu img{ vertical-align:middle;}
- .lf{ float:left; width:80px;}
- .rt{ float:right; width:315px; overflow:hidden;}
- </style>
- </head>
- <body>
- <p> </p>
- <p>divcss5模板-上下不间断滚动<a href="http://www.divcss5.com/">DIV+CSS</a></p>
- <div class="modu">
- <div class="lf"><img src="images/news.gif" alt="" width="11" height="11" /> 滚动消息:</div>
- <div class="rt">
- <script type="text/javascript">
- var marqueeContent=new Array(); //滚动主题
- marqueeContent[0]='<a href="http://www.divcss5.com/" target="_blank">
+ CSS学习网,DIV+CSS基础系统掌握CSS</a>';- marqueeContent[1]='<a href="http://www.divcss5.com/" target="_blank">
+ 显而易见,最高的效率就是对现有材料的最佳利用。</a>';- marqueeContent[2]='<a href="http://www.divcss5.com/" target="_blank">
+ 自己能解决的事,别花钱,花钱能解决的事,别求人。</a>';- marqueeContent[3]='<a href="http://www.divcss5.com/" target="_blank">
+ 旅行是需要一种心情,更重要的是,需要一种冲动。</a>';- marqueeContent[4]='<a href="http://www.divcss5.com/" target="_blank">
+ 随时用零碎的时间(如等人、排队等)做零碎的事情。</a>';- var marqueeInterval=new Array(); //定义一些常用而且要经常用到的变量
- var marqueeId=0;
- var marqueeDelay=4000;
- var marqueeHeight=15;
- function initMarquee() {
- var str=marqueeContent[0];
- document.write('<div id=marqueeBox style="overflow:hidden;height:'+marqueeHeight+'px"
onmouseover="clearInterval(marqueeInterval[0])"
onmouseout="marqueeInterval[0]=setInterval(\'startMarquee()\',marqueeDelay)">
<div>'+str+'</div></div>');- marqueeId++;
- marqueeInterval[0]=setInterval("startMarquee()",marqueeDelay);
- }
- function startMarquee() {
- var str=marqueeContent[marqueeId];
- marqueeId++;
- if(marqueeId>=marqueeContent.length) marqueeId=0;
- if(marqueeBox.childNodes.length==1) {
- var nextLine=document.createElement('DIV');
- nextLine.innerHTML=str;
- marqueeBox.appendChild(nextLine);
- }
- else {
- marqueeBox.childNodes[0].innerHTML=str;
- marqueeBox.appendChild(marqueeBox.childNodes[0]);
- marqueeBox.scrollTop=0;
- }
- clearInterval(marqueeInterval[1]);
- marqueeInterval[1]=setInterval("scrollMarquee()",10);
- }
- function scrollMarquee() {
- marqueeBox.scrollTop++;
- if(marqueeBox.scrollTop%marqueeHeight==marqueeHeight){
- clearInterval(marqueeInterval[1]);
- }
- }
- initMarquee();
- </script>
- </div>
- </div>
- </body>
- </html>
说明这里CSS是直接放置到网页里<head>内style标签引入css,没有从外部引用CSS代码。
更简便CSS不间断模板:http://www.divcss5.com/rumen/r1.shtml
以上为DIV+CSS模板中的纯CSS滚动消息布局代码及说明。
查看CSS滚动网页演示:http://www.divcss5.com/fanli/gdxx/
点击另存为下载此DIV+CSS向上无间断滚动代码打包下载:
如需转载,请注明文章出处和来源网址:http://www.divcss5.com/template/m105.shtml
我要分享到:
必备CSS教程 Essential CSS Tutorials
- • css height
- • css line-height
- • css width
- • css min-width
- • css max-width
- • css min-height
- • css max-height
- • css border
- • css background
- • css float
- • css clear
- • css display
- • css font
- • css text-transform
- • css英文首字母大写
- • css font-variant
- • css font-weight
- • css font-style
- • css text-decoration
- • css 删除线
- • div css 虚线
- • css 注释
- • html 注释
- • css padding
- • css margin
- • css 文本
- • css font-size
- • css font-family
- • css color
- • css text-align
- • css text-indent
- • css 超链接(css a)
- • css 优化压缩
- • css id(css #)
- • css class(css .)
- • css ul li列表
- • css 圆角圆边
- • css 父级子级
- • css 指针概念
- • css cursor
- • css overflow
- • html px em pt网页单位
- • CSS important
- • CSS position
- • css z-index
- • css white-space
- • css img图片
- • css class id
- • css link与@import区别
- • css 选择器
- • css引入html
必备HTML基础教程 Essential HTML Tutorials
- • html img图片标签
- • html em标签(EM强调标签)
- • html strong加粗(strong标签)
- • html B加粗(b加粗标签)
- • strong与B加粗区别
- • h1 h2 h3 h4标签(html标题标签)
- • html A超链接锚文本
- • html注释
- • html head头部标签
- • html title标题标签
- • html meta标签
- • html link标签
- • html i斜体标签
- • html u下划线标签
- • html s删除线标签
- • html换行br标签
- • html p段落标签
- • p标签与br标签区别
- • html div标签元素
- • html span标签
- • html font标签
- • html script标签
- • html px em pt网页单位
- • html ul li列表
- • ol li列表
- • dl dt dd标签组
- • table tr td表格
- • table tr th表格
- • html form表单
- • html form input
- • html form textarea文本区域
- • html select下拉与跳转(Html select)
- • html iframe框架
- • html网页结构
- • htm html shtml区别用法
- • 网页编码charset
- • UTF-8 GBK UTF8 GB2312区别联系
- • 先写html还是先写CSS
- • 显示扩展名
- • html标签大全集合
- • html常用标签
- • 网页源代码是什么
如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2010-04-28 09:13 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。
最新文章NEWS
- • 虚拟主机相关知识
- • DIV CSS加载失败
- • DIV+CSS规范命名大全集合
- • CSS margin属性与用法教程
- • padding_css padding用法详解
- • DIV+CSS中让布局居中_背景图片居中_文字内容居中
- • html与xhtml的区别规范是什么
- • DIV+CSS与TABLE的网页优势何在?
- • 浅谈DIV+CSS设计开发的Xhtml网页对SEO优化的影响
- • 开发DIV+CSS的工具集合
CSS 特效CSS EFFECTS
纯DIV+CSS下拉菜单模块模板
DIV+CSS分页_CSS翻页代码模板
css form实例 用CSS实现表单form布局实例
经典DIV+CSS下拉菜单
div+css不间断上下滚动模板
向上不间断滚动div+css+js模板
相关文章RELATED
- • Web前端开发技术之Div+Css基础
- • 用DIV+CSS代码设计网站有哪些好处
- • 有利于SEO的DIV+CSS的命名规则
- • CSS 模块化
- • DIV+CSS布局流程小结
- • 那些精彩的JavaScript代码片段
- • JavaScript中localStorage对象存储方式实例
- • 利用VUE框架,实现列表分页功能示例
- • 使用div+css制作网站
- • 365娱乐:中国新型大扭矩静音电机达世界先进水平