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'

},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文字无缝滚动代码全部内容，希望文章能够帮你解决html文字无缝滚动代码所遇到的程序开发问题。

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。

小编个人微信号 jb51ccc

喜欢与人分享编程技术与工作经验，欢迎加入编程之家官方交流群！