html纵向字幕无缝滚动,html文字无缝滚动代码
这篇文章主要为大家详细介绍了html文字无缝滚动代码,具有一定的参考价值,可以用来参考一下。
实例一:
经测试代码如下:
滚动板
body { font: 12px/1 "宋体", SimSun, serif; background:#fff; color:#000; }
.scrollUl { overflow:hidden; position:relative; }
#scrollUlTest1 {height:80px;}
#scrollUlTest2 {height:120px;}
.scrollUl ul, .scrollUl li { margin:0; padding:0; list-style:none outside; }
.scrollUl ul { position:absolute; }
.scrollUl li { height:20px; }
// containerId 滚动板外层节点的 ID
// numViews 分几屏滚动,需要滚动显示的总行数应该是分屏数的整倍数。
// showTime 每屏固定住时显示的时间,单位毫秒
// scrollTime 每次滚动一屏用的时间,单位毫秒
var ScrollUl=function(containerId, numViews, showTime, scrollTime) {
//定时器变量,因为有移到层上时停止滚动的事件处理,而那时可能还没开始定时器呢,所以先把这个变量声明出来。
this.timer=null;
this.numViews = numViews;
this.showTime = showTime;
this.scrollTime = scrollTime;
this.container = document.getElementById(containerId);
var ulChild = this.container.getElementsByTagName('ul');
var ul = ulChild[0];
//ul 是未使用 CSS 明确指定高度的,IE 中用 realstyle 取不到高度,只能得到 auto,而 getBoundingClientRect() 是 IE 和 FF 都支持的方式。
var rect = ul.getBoundingClientRect();
var heightAll = rect.bottom - rect.top;
var heightView = heightAll / this.numViews;
var msPerPx = this.scrollTime / heightView;
//复制出一份来,接在原块的后面,用于头接尾的显示
var ulCopy = ul.cloneNode(true);
ulCopy.style.top = heightAll+'px';
this.container.appendChild(ulCopy);
var itself = this;
//向上滚动的函数
var scrollView = function() {
var oldTop = (''==ul.style.top) ? 0: parseInt(ul.style.top) ;
//移动到顶后,把位置复原,两个块继续从 0 开始向上移。
if (oldTop < -heightAll)
{
oldTop = 0;
}
ul.style.top = (oldTop - 1) +'px';
ulCopy.style.top = (oldTop + heightAll- 1) +'px';
//每滚一整屏多停一会。oldTop-1 是为了让其停在整数位置。
var duration = (0 == ((oldTop-1) % heightView)) ? itself.showTime:msPerPx;
itself.timer = setTimeout(scrollView, duration);
};
//把 slide 定义为 prototype 的方法时,似乎这样 setTimeout(itself.slide, itself.showTime); 定时操作不灵,而只能是局部函数才能定时操作,如果带参数,还得封装成匿名函数:
itself.timer = setTimeout(scrollView, itself.showTime);
//鼠标移上时停止滚动
this.container.onmouseover = function() {
window.clearTimeout(itself.timer);
};
//鼠标移开时继续滚动,不用区分当时是在整屏停止还是滚动中了,全都按静止时间来延时就得了。
this.container.onmouseout = function() {
itself.timer = setTimeout(scrollView, itself.showTime);
};
};
window.onload = function() {
//第一个总共 20 行,每次显示 2行,分 10 屏
var s1 = new ScrollUl('scrollUlTest1', 10, 2000, 1000);
//第二个总共 18 行,每次显示 6 行,分 3 屏
var s2 = new ScrollUl('scrollUlTest2', 3, 3000, 2000);
};
通用滚动板演示
第1组
- 第 1 条内容
- 第 2 条内容
- 第 3 条内容
- 第 4 条内容
- 第 5 条内容
- 第 6 条内容
- 第 7 条内容
- 第 8 条内容
- 第 9 条内容
- 第 10 条内容
- 第 11 条内容
- 第 12 条内容
- 第 13 条内容
- 第 14 条内容
- 第 15 条内容
- 第 16 条内容
- 第 17 条内容
- 第 18 条内容
- 第 19 条内容
- 第 20 条内容
第2组
- 第 1 条内容
- 第 2 条内容
- 第 3 条内容
- 第 4 条内容
- 第 5 条内容
- 第 6 条内容
- 第 7 条内容
- 第 8 条内容
- 第 9 条内容
- 第 10 条内容
- 第 11 条内容
- 第 12 条内容
- 第 13 条内容
- 第 14 条内容
- 第 15 条内容
- 第 16 条内容
- 第 17 条内容
- 第 18 条内容
实例二,经测试代码如下:
jQuery文字无缝滚动效果代码
li{list-style: none;}
.buy-list {height: 100px;overflow: hidden;line-height: 20px;}
// JavaScript Document
(function($){
$.fn.myScroll = function(options){
//默认配置
var defaults = {
speed:40, //滚动速度,值越大速度越慢
rowHeight:24 //每行的高度
};
var opts = $.extend({}, defaults, options),intId = [];
function marquee(obj, step){
obj.find("ul").animate({
marginTop: '-=1'
},0,function(){
var s = Math.abs(parseInt($(this).css("margin-top")));
if(s >= step){
$(this).find("li").slice(0, 1).appendTo($(this));
$(this).css("margin-top", 0);
}
});
}
this.each(function(i){
var sh = opts["rowHeight"],speed = opts["speed"],_this = $(this);
intId[i] = setInterval(function(){
if(_this.find("ul").height()<=_this.height()){
clearInterval(intId[i]);
}else{
marquee(_this, sh);
}
}, speed);
_this.hover(function(){
clearInterval(intId[i]);
},function(){
intId[i] = setInterval(function(){
if(_this.find("ul").height()<=_this.height()){
clearInterval(intId[i]);
}else{
marquee(_this, sh);
}
}, speed);
});
});
}
})(jQuery);
$(document).ready(function(){
$('.buy-list li:even').addClass('lieven');
})
$(function(){
$(".buy-list").myScroll({
speed:200, //数值越大,速度越慢
rowHeight:20 //li的高度
});
});
- 1、蓝瘦香菇
- 2、蓝瘦香菇
- 3、蓝瘦香菇
- 4、蓝瘦香菇
- 5、蓝瘦香菇
- 6、蓝瘦香菇
- 7、蓝瘦香菇
- 8、蓝瘦香菇
实例三,经测试代码如下:
左右无间断滚动效果
.d1 {margin:10px auto;width:200px;height:auto;overflow:hidden;white-space:nowrap;}
.d2 {margin:0px auto;background-color:#FF9933;}
.div2 {width:auto;height:auto;font-size:12px;float:left;overflow:hidden;}
ul{margin:0px;padding:9px;list-style:none;line-height:19px;font-size:12px;}
a:link,a:visited{color:#3F78CF;text-decoration:none;}
a:hover{color:#FF00CC;text-decoration:underline;}
var s,s2,s3,s4,timer;
function init(){
s=getid("div1");
s2=getid("div2");
s3=getid("div3");
s4=getid("scroll");
s4.style.width=(s2.offsetWidth*2+100)+"px";
s3.innerHTML=s2.innerHTML;
timer=setInterval(mar,30)
}
function mar(){
if(s2.offsetWidth<=s.scrollLeft){
s.scrollLeft-=s2.offsetWidth;
}else{s.scrollLeft++;}
}
function getid(id){
return document.getElementById(id);
}
window.οnlοad=init;
- 蓝瘦香菇蓝瘦香菇蓝瘦香菇蓝瘦香菇蓝瘦香菇蓝瘦香菇
注:关于html文字无缝滚动代码的内容就先介绍到这里,更多相关文章的可以留意512笔记的其他信息。
关键词:滚动
html纵向字幕无缝滚动,html文字无缝滚动代码相关推荐
- python 滚动字幕_Python pygame绘制文字制作滚动文字过程解析
这篇文章主要介绍了Python pygame绘制文字制作滚动文字过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 字体常用的不是很多,在pyg ...
- html滚动字幕循环,H5 div文字循环滚动
实际上也叫跑马灯.说起跑马灯这个词,还是去年或前年写iOS时候用到的呢,不知道是哪位前辈兴得这个词儿.在h5里俗点儿说就是,使用一个div做容器,让里面的文字水平轮番播放. 之前在oc内都是使用第三方 ...
- vue内容横向循环滚动_vue文字横向滚动公告
需求 最新项目需要一个文字横向滚动效果, vue 文字横向无缝走马灯组件 写的很详细,记录下来,广播出去. 解决方案 1. HTML 先建一个div层作为公告显示区,里面包裹一个公告列表(ul); 2 ...
- msclass 文字滚动_文字无缝循环滚动(标题向上滚动)
要写一个标题滚动的效果,开始以为挺简单用marquee就行了呢.用了才知道,它总是要等一次滚动后再循环,所以很不好看.才知道只有用js了. 在网上找了一个js感觉挺好的. ============== ...
- 实现文字左右滚动 javascript
参考链接:http://www.86y.org/art_detail.aspx?id=587 代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...
- 原生js实现文字无缝向上滚动效果
在网上查找到了一个实现文字无缝向上滚动效果的源码,结果发现运行有问题,于是就稍加改动,实现了js无缝向上滚动的效果. <script>window.onload = roll(50); f ...
- php无缝滚动文字,JQuery文字无缝滚动效果实现方法
本文主要介绍了JQuery实现文字无缝滚动效果示例代码(Marquee插件),具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家. 推荐一个JQuery的无缝文字滚动效果,同时也可以滚 ...
- html自动滚动代码,html文字无缝滚动代码
实例一: 经测试代码如下: 滚动板 body { font: 12px/1 "宋体",SimSun,serif; background:#fff; color:#000; } .s ...
- jq文字无缝滚动代码(鼠标悬停停止滚动)
jq实现文字无缝滚动代码(鼠标悬停停止滚动) 效果图 直接copy就能运行 <!DOCTYPE html> <html lang="en"> <hea ...
最新文章
- iPhonexr安兔兔html5测试,给大家科普下iphonexr苹果手机安兔兔跑分多少分
- 安卓html可以删除吗,如何删除android中的html标签
- 安卓收藏功能怎么实现_从电源芯片的内部设计,看各个功能是怎么实现的
- 领域驱动设计理论基础
- Ant Design Pro引入Echarts 报错Unexpected token
- 连载丨《极简设计:苹果崛起之道》——硅谷伊甸园(三)
- 如果Service有多个实现类,Spring怎么知道该注入哪个实现类
- 蓝桥杯官网题库【简单题解析】持续更新
- 如何自学软件编程?零基础自学编程入门指南
- 第二章:JAVA编程基础
- winform直接控制云台_这款达到广播级机器 功能需求的 轻量级云台!真香!
- 中山大学非全日制计算机考研,中山大学社会工作非全日制考研经验贴
- 什么是Alpha通道?
- 360众测靶场云文件服务器,360 政企安全官网_帮助应对高级威胁攻击
- 使用Xamarin实现跨平台移动应用开发(转载)
- 移动IP技术概述(转)
- 简单粗暴的移动端图片浏览插件demo
- 2022年云南最新建筑八大员(市政)模拟考试题库及答案
- 【机器学习课程-华盛顿大学】:4 聚类和检索 4.4 MoG混合高斯模型编程测试
- jQuery unload事件
热门文章
- 解决联想电脑网络连接后网页出现“未连接到互联网”的问题
- cs231n作业-assignment1
- Unknown tag (c:forEach) 未知的标签 解决方法
- 认识微型计算机的硬件课件,微型计算机系统硬件组成及外设认识.docx
- 物联卡中心:怎么判断是不是物联卡?
- 使用Email Receive端口上传文件至EDI系统
- Node.js到底是什么?为什么要使用它?
- uni-app:实现H5的录音功能,并上传到服务器
- C# 条码打印的几种方式
- Odoo 8.0深入浅出开发教程(十) 附录