可控的文字列表上下滚动效果

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<html>
<head>
<title>可控制文字列表上下滚动效果</title>
<meta http-equiv="content-type" content="text/html; charset=gbk" />
<style>
    body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td {margin:0;padding:0; font-size:12px;}
    li{ list-style:none;}
    ul{ margin:0;}
    a{ color:#0066CC; text-decoration:none;}
    a:hover{ color:#FF0000; text-decoration: underline;}
    .breakNewsblock {
    margin:0 auto;
    position:relative;
    width:276px;
    overflow:hidden;
    }
    .breakNewsblock h2 {
    background:transparent url(//ku.shouce.ren/files/images/201601/56a3217038e18.gif) no-repeat scroll 7px -307px;
    color:#8F1D21;
    float:left;
    font-size:12px;
    padding-left:25px;
    }
    .breakNewsblock h2 span{ float:right; padding-right:10px;}
    #breakNews {
    background:transparent url(//ku.shouce.ren/files/images/201601/56a32170a130a.gif) no-repeat scroll center top;float:left;height:138px;
    margin-top:5px;
    padding:0 0 3px 2px;
    width:275px;
    }
    #breakNews .list6 {color:#333333;float:left;height:115px;margin-top:11px;overflow:hidden;width:240px; padding-left:10px;
    }
    #breakNews .list6 li{ padding:3px 0;}
    #breakNews .hit {float:right;height:24px; margin-top:23px; width:17px;}
    #breakNews .hit span { display:block;float:left;height:13px; margin-bottom:6px;width:13px;}
    </style>
<script language="javascript" type="text/javascript">
function ScrollText(content,btnPrevious,btnNext,autoStart,timeout,isSmoothScroll)
{
    this.Speed = 10;
    this.Timeout = timeout;
	this.stopscroll =false;//是否停止滚动的标志位
	this.isSmoothScroll= isSmoothScroll;//是否平滑连续滚动
    this.LineHeight = 20;//默认高度。可以在外部根据需要设置
    this.NextButton = this.$(btnNext);
    this.PreviousButton = this.$(btnPrevious);
    this.ScrollContent = this.$(content);
    this.ScrollContent.innerHTML += this.ScrollContent.innerHTML;//为了平滑滚动再加一遍

if(this.PreviousButton)

{
		this.PreviousButton.onclick = this.GetFunction(this,"Previous"); 
		this.PreviousButton.onmouseover = this.GetFunction(this,"MouseOver");
		this.PreviousButton.onmouseout = this.GetFunction(this,"MouseOut");
	}
	if(this.NextButton){
		this.NextButton.onclick = this.GetFunction(this,"Next");
		this.NextButton.onmouseover = this.GetFunction(this,"MouseOver");
		this.NextButton.onmouseout = this.GetFunction(this,"MouseOut");
    }
    this.ScrollContent.onmouseover = this.GetFunction(this,"MouseOver");
    this.ScrollContent.onmouseout = this.GetFunction(this,"MouseOut");

if(autoStart)
    {
        this.Start();
    }
}

ScrollText.prototype = {

$:function(element)
	{
		return document.getElementById(element);
	},
	Previous:function()
	{
		this.stopscroll = true;
		this.Scroll("up");
	},
	Next:function()
	{
		this.stopscroll = true;
		this.Scroll("down");
	},
	Start:function()
	{
		if(this.isSmoothScroll)
		{
			this.AutoScrollTimer = setInterval(this.GetFunction(this,"SmoothScroll"), this.Timeout);
		}
		else
		{		
			this.AutoScrollTimer = setInterval(this.GetFunction(this,"AutoScroll"), this.Timeout);
		}
	},
	Stop:function()
	{
		clearTimeout(this.AutoScrollTimer);
		this.DelayTimerStop = 0;
	},
	MouseOver:function()
	{	
		this.stopscroll = true;
	},
	MouseOut:function()
	{
		this.stopscroll = false;
	},
	AutoScroll:function()
	{
		if(this.stopscroll) 
		{
			return;
		}
		this.ScrollContent.scrollTop++;
		if(parseInt(this.ScrollContent.scrollTop) % this.LineHeight != 0)
		{
			this.ScrollTimer = setTimeout(this.GetFunction(this,"AutoScroll"), this.Speed);
		}
		else
		{
			if(parseInt(this.ScrollContent.scrollTop) >= parseInt(this.ScrollContent.scrollHeight) / 2)
			{
				this.ScrollContent.scrollTop = 0;
			}
			clearTimeout(this.ScrollTimer);
			//this.AutoScrollTimer = setTimeout(this.GetFunction(this,"AutoScroll"), this.Timeout);
		}
	},
	SmoothScroll:function()
	{
		if(this.stopscroll) 
		{
			return;
		}
		this.ScrollContent.scrollTop++;
		if(parseInt(this.ScrollContent.scrollTop) >= parseInt(this.ScrollContent.scrollHeight) / 2)
		{
			this.ScrollContent.scrollTop = 0;
		}
	},
	Scroll:function(direction)
	{

if(direction=="up")
		{
			this.ScrollContent.scrollTop--;
		}
		else
		{
			this.ScrollContent.scrollTop++;
		}
		if(parseInt(this.ScrollContent.scrollTop) >= parseInt(this.ScrollContent.scrollHeight) / 2)
		{
			this.ScrollContent.scrollTop = 0;
		}
		else if(parseInt(this.ScrollContent.scrollTop)<=0)
		{
			this.ScrollContent.scrollTop = parseInt(this.ScrollContent.scrollHeight) / 2;
		}
		
		if(parseInt(this.ScrollContent.scrollTop) % this.LineHeight != 0)
		{
			this.ScrollTimer = setTimeout(this.GetFunction(this,"Scroll",direction), this.Speed);
		}
	},
	GetFunction:function(variable,method,param)
	{
		return function()
		{
			variable[method](param);
		}
	}
}

function ignoreError() {
  return true;
}
window.onerror = ignoreError; 
</script>
    </head>
    <body>
    <div class="breakNewsblock">
    <h2><a target="_blank" href="#">即时新闻</a></h2>
    <div id="breakNews">
    <ul id="breakNewsList" class="list6">
<li><a href=""/></a></span>
    <span><a style="cursor: pointer;"><img width="11" height="10" id="next2" alt="下一条" src="//ku.shouce.ren/files/images/201601/56a3217102821.gif"/></a></span>
    </div>
    </div>
    </div>
<script language="javascript" type="text/javascript">
var scroll2 = new ScrollText("breakNewsList","pre2","next2",true,70,true);
scroll2.LineHeight = 24;
</script>
</body>
</html>

​x
 
<html>
<head>
<title>可控制文字列表上下滚动效果</title>
<meta http-equiv="content-type" content="text/html; charset=gbk" />
<style>
    body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td {margin:0;padding:0; font-size:12px;}
    li{ list-style:none;}
    ul{ margin:0;}
    a{ color:#0066CC; text-decoration:none;}
    a:hover{ color:#FF0000; text-decoration: underline;}
    .breakNewsblock {
    margin:0 auto;
    position:relative;
    width:276px;
    overflow:hidden;

CSS代码

复制格式化注释注释颜色清空

放大

CSS代码...xxxxxxxxxx
 
​

JS代码

复制格式化注释注释清空

放大

JS代码...xxxxxxxxxx
 
​

运行代码

简介

请输入代码名称！

名称

可控的文字列表上下滚动效果

分类

网站常用

描述

可控制文字列表上下滚动效果，这里要注意一下，使用了一个修改用的背景图外框，如果修改CSS的值，可能文字列表会改变宽度，这时候图片外框也要重新修改一下，要不然背景与文字容易变形，导致效果变差，而修改背景图片相信不是什么难办的...