请教：js 实现平滑滚动字幕

Jikycc 2011-09-07 01:46:53
想实现公告文字循环从右滚到左，用HTML自带的标签<marguee>，滚动很闪，看不清，而且鼠标移过去不能停止
...全文
604 10 打赏 收藏 转发到动态 举报
写回复
用AI写文章
10 条回复
切换为时间正序
请发表友善的回复…
发表回复
yangguosheng 2012-10-16
  • 打赏
  • 举报
 回复
[Quote=引用 3 楼 的回复:]
HTML code
<style>
#s{ width:500px; border:1px solid #000; overflow:hidden;}
#s div{ width:1000px;}
#s #i span{ width:500px; display:block; float:left;}
</style>
<div id="s">
<div id="i">
<span……
[/Quote]

可不是可以简单的解说一下呢。呵呵，没看太懂。
Jikycc 2011-09-08
  • 打赏
  • 举报
 回复
[Quote=引用 6 楼 mubeibei 的回复:]

#s div{ width:1000px;}
#s #i span{ width:500px; display:block; float:left;}

改这两个样式的宽度
[/Quote]

多宽才够能？怎么根据文本长度来设置呢，或者自动设置
Exodia 2011-09-08
  • 打赏
  • 举报
 回复
自己做的一个走马灯组件：


window.XX = window.XX || {};

XX.Fx =  XX.Fx || {};





/*

走马灯构造函数；

参数elem:要进行包装的dom元素，即包装后，其内部元素会实现走马灯效果

opts:JSON格式的数据，可传入的参数包括:

	{

       speed //滚动速度，以毫秒为单位，默认为1000

	   step //滚动像素，	默认为5

	   direction //滚动方向，包括'left', 'right', 'top', 'bottom'，默认'left'

	}

*/

XX.Fx.Marquee = function(elem, opts){

	opts = opts || {};

	this.el = elem;

	this.speed = opts.speed || 1000;

	this.step  = opts.step || 5;

	var dir = this.direction = opts.direction || 'left';

	

	if( dir !== 'left' && dir !== 'right' && dir !== 'top' && dir !== 'bottom') {

		throw new Error('Constructor "XX.Fx.Marquee": direction of options must be "left","right","top","bottom"');	

	}

	

	elem.style.overflow = 'hidden';

	elem.style.whiteSpace = 'nowrap';

	if(dir === 'right' || dir === 'bottom'){

		this.step = - this.step ;	

	} 

	this.Offset = (dir === 'left' || dir === 'right') ? 'scrollLeft' : 'scrollTop';

	this.size   = parseInt((dir === 'left' || dir === 'right') ? elem.scrollWidth : elem.scrollHeight);

};



XX.Fx.Marquee.prototype.start = function(){

	if(this.timer){

		clearTimeout(this.timer);	

	}

		

	this.el.innerHTML += this.el.innerHTML;

	var that = this, speed = this.speed, step = this.step, offset = this.Offset, el = this.el, size = this.size, move = null;

	switch (this.direction){

		case 'right':

		case 'bottom':

			move = 	function(){

				if(el[offset] > 0){

					el[offset] += step;

					setTimeout(move, speed)

				} else{

					el[offset] = that.size;

					setTimeout(move, speed)	

				}	

			};	

			break;

		default:

			move = 	function(){

				if(el[offset] < size){

					el[offset] += step;

					setTimeout(move, speed)

				} else{

					el[offset] = 0;

					setTimeout(move, speed)	

				}	

			};	

	}



	this.timer = setTimeout(move, speed);

};



XX.Fx.Marquee.prototype.stop = function(){

	clearTimeout(this.timer);	

};


调用代码：


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">

body{margin:3px auto;text-align:center;}

</style>

<script type="text/javascript" src="xxFxMarquee.js"></script>

<script type="text/javascript">

window.onload = function(){

	var m = new XX.Fx.Marquee(document.getElementById('textdiv'), {direction:'top', speed:20, step:1});

	m.start();

	

};

</script>

<title>无标题文档</title>

</head>



<body>

 <h3>js marquee 滚动效果演示</h3>

<div id="textdiv" style="border:1 solid #c0c0c0;text-align:left;width:650px;height:100px">

<h2>--------------------走马灯演示测试--------------------------</h2><br />

文字滚动测试1<br />

文字滚动测试2<br />

文字滚动测试3<br />

<br />

制作者：Exodia<br />

联系方式:QQ39942816<br />

<a href="http://blog.csdn.net/dxx1988">BLOG地址</a>

</div>

</body>

</html>





文字悬停效果，可以自己添加mouseover函数控制。
Exodia 2011-09-08
  • 打赏
  • 举报
 回复
[Quote=引用 5 楼 jikycc 的回复:]

楼上：如果要滚动的内容比较长，怎么使它在一行内滚动呢，怎么设置css
[/Quote]

设置属性 white-spacing: nowrap
MuBeiBei 2011-09-07
  • 打赏
  • 举报
 回复
[Quote=引用 5 楼 jikycc 的回复:]
楼上：如果要滚动的内容比较长，怎么使它在一行内滚动呢，怎么设置css
[/Quote]

#s div{ width:1000px;}
#s #i span{ width:500px; display:block; float:left;}

改这两个样式的宽度
Jikycc 2011-09-07
  • 打赏
  • 举报
 回复
楼上：如果要滚动的内容比较长，怎么使它在一行内滚动呢，怎么设置css
挨踢直男 2011-09-07
  • 打赏
  • 举报
 回复 
<style>

#s{ width:500px; border:1px solid #000; overflow:hidden;}

#s div{ width:1000px;}

#s #i span{ width:500px; display:block; float:left;}

</style>

<div id="s">

<div id="i">

<span id="t">要滚动的文字，滚啊滚，滚啊滚</span>

</div>

</div>



<script type="text/javascript">

var speed = 10

var s = document.getElementById("s")

var i = document.getElementById("i")

var t = document.getElementById("t")

var d 

i.appendChild(t.cloneNode(true))

function scroll()

{

     s.scrollLeft += 1

     if(s.scrollLeft >= t.offsetWidth) s.scrollLeft = 0;

}

d = window.setInterval(scroll,speed)

s.onmouseover = function(){window.clearInterval(d)}

s.onmouseout = function(){d = window.setInterval(scroll,speed)}

</script>

这样可以停顿
挨踢直男 2011-09-07
  • 打赏
  • 举报
 回复 
<style>

#s{ width:500px; border:1px solid #000; overflow:hidden;}

#s div{ width:1000px;}

#s #i span{ width:500px; display:block; float:left;}

</style>

<div id="s">

<div id="i">

<span id="t">要滚动的文字，滚啊滚，滚啊滚</span>

</div>

</div>



<script type="text/javascript">

var speed = 10

var s = document.getElementById("s")

var i = document.getElementById("i")

var t = document.getElementById("t")

i.appendChild(t.cloneNode(true))

function scroll()

{

     s.scrollLeft += 1

     if(s.scrollLeft >= t.offsetWidth) s.scrollLeft = 0;

}

window.setInterval(scroll,speed)

</script>
BLUE_LG 2011-09-07
  • 打赏
  • 举报
 回复
3点说明：
1.marquee标签可以设置使得鼠标移过去，停止
如：


<marquee onmouseout="this.start()" onmouseover="this.stop()">用来设置鼠标移出该区域时继续滚动</marquee>

2.scrollamount这个参数可以控制速度
3.还有就只不用marquee通过onmouseover()控制node.style.left属性（前提：节点的position为"absolute"）
最后，希望楼主成功。。。
三石-gary 2011-09-07
  • 打赏
  • 举报
 回复
http://www.jb51.net/article/12587.htm
Python训练营103期开班典礼直播回放
#《5天Python闯关训练营》学习计划#挑战周期：12月16日—12月20日直播安排：开班典礼：12...完成相应的软件安装及环境搭建学习服务：12.16-12.20日为本课正式服务周期期间遇到学习问题可社群请教，群内安排助教老师答疑
linux 权限加号是,请教：drwxrwxr-x   什么权限后面有个加号,代表什么意思
请教：drwxrwxr-x什么权限后面有个加号,代表什么意思(2011-08-29 04:03:20)标签：杂谈请教：drwxrwxr-x+ 什么权限后面有个加号,代表什么意思drwxrwxr-x+什么权限后面有个加号,代表什么意思麻烦告诉一下，谢谢请教：...
转载：请教:c#中实现图像缩放?
转载自：http://topic.csdn.net/t/20060504/12/4729916.html请教:c#中实现图像缩放?楼主asweisun（烟薄荷）2006-05-04 12:43:27 在 .NET技术 / .NET Framework 提问功能: 在pictureBox中点击鼠标后,如何将pictureBox...
请教:如何将网卡由半双工改为全双工.
darry_dai 发表于 2005-03-02 19:40请教:如何将网卡由半双工改为全双工. 尝试着从sam里改这个参数. (Duplex mode), 但是它是灰的,不能更改. 请问有什么方法改掉这个参数.谢谢!!! :twisted: :evil:...
纯js实现鼠标滚轮控制页面元素横向滚动
如何用纯js实现鼠标滚轮控制页面元素横向滚动
JavaScript

87,917

社区成员

224,617

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章