javascript怎么在网页中控制跑马灯的启动和停止?怎么实现字幕跑马灯?

javascript怎么在网页中控制跑马灯的启动和停止?怎么实现字幕跑马灯?

9个回答

图片说明

dengjiecsdn
dengjiecsdn 这是H5的废弃标签,建议不用了
一年多之前 回复

jquery插件有不少,百度看看

可以使用自定义动画效果 .animate()函数来实现,同时配上setinterval()函数来实现循环

我之前做过这种跑马灯
marquee



阿伦·艾弗森 body{ color:navy; text-align:center; background-image: url(images/背景1.jpg); background-position:center; background-repeat:no-repeat; } table.hovertable { text-align:center; font-family: verdana,arial,sans-serif; font-size:11px; color:#333333; border-width: 1px; border-color: #999999; border-collapse: collapse; margin:auto; } table.hovertable th { background-color:#c3dde0; border-width: 1px; padding: 8px; border-style: solid; border-color: #a9c6c9; } table.hovertable tr { background-color:#d4e3e5; } table.hovertable td { border-width: 1px; padding: 8px; border-style: solid; border-color: #a9c6c9; }

 <EMBED src="music/Amazing.mp3"autostart="true" loop="true" hidden="true">

 <img src="images/艾弗森2.jpg" width="470" height="480" align="right">



 <marquee id="affiche" align="left" behavior="scroll"  direction="up"       
  height="255" width="350" hspace="20" vspace="10" loop="-1" scrollamount="5"
  scrolldelay="100" onMouseOut="this.start()" onMouseOver="this.stop()">
  <p>阿伦·艾弗森,男,前美国NBA著名篮球运动员,
    曾11次入选NBA全明星阵容,曾任美国男篮梦之队队长。</p>

  <p>艾弗森1996年6月26日被费城76人队选中,成为NBA状元秀,
    绰号“答案(The Answer)”。</p>

  <p>艾弗森14年职业生涯先后效力过费城76人队、掘金、灰熊和活塞,
    场均出战41.1分钟,获得26.7分、6.2次助攻和2.2次抢断。</p>

  <p>在整个职业生涯中,艾弗森四次荣膺得分王,11次入选全明星,三次荣膺抢断王。</p>

  <p>2000-2001赛季,艾弗森打出了生涯最好表现,夺得常规赛MVP奖杯,
    并帮助76队打入NBA总决赛。</p>

  <p>2013年10月30日,阿伦·艾弗森在费城正式宣布退役。</p>
  </marquee>
基本资料
姓名 Allen Ezail Iverson 身高 183cm
别名 答案(The Answer),A.I,小艾 体重 74.8公斤/165磅
国籍 美国 生日 1975年6月7日
出生地 弗吉尼亚州汉普顿 毕业院校 贝泽高中
特点 速度快、突破能力强、具备超强得分能力
主要奖项 NBA最佳新秀(1996--1997赛季)、3届NBA抢断王、NBA常规赛mvp、
4届NBA得分王、2届NBA全明星赛mvp
重要事件 状元秀身份加盟费城76人(96-06)、丹佛掘金队(2006-2008)、
底特律活塞队(2008-2009)、孟菲斯灰熊队(2010)、重回费城76人(2010)



阿伦·艾弗森

 <marquee id="affiche" align="left" behavior="scroll"  direction="up"       
  height="255" width="350" hspace="20" vspace="10" loop="-1" scrollamount="5"
  scrolldelay="100" onMouseOut="this.start()" onMouseOver="this.stop()">
  <p>阿伦·艾弗森,男,前美国NBA著名篮球运动员,
    曾11次入选NBA全明星阵容,曾任美国男篮梦之队队长。</p>

  <p>艾弗森1996年6月26日被费城76人队选中,成为NBA状元秀,
    绰号“答案(The Answer)”。</p>

  <p>艾弗森14年职业生涯先后效力过费城76人队、掘金、灰熊和活塞,
    场均出战41.1分钟,获得26.7分、6.2次助攻和2.2次抢断。</p>

  <p>在整个职业生涯中,艾弗森四次荣膺得分王,11次入选全明星,三次荣膺抢断王。</p>

  <p>2000-2001赛季,艾弗森打出了生涯最好表现,夺得常规赛MVP奖杯,
    并帮助76队打入NBA总决赛。</p>

  <p>2013年10月30日,阿伦·艾弗森在费城正式宣布退役。</p>
  </marquee>

建议你使用swiper.js全球都再用,各大门户网站都在用,封装的很好,教程极度详细,初级coder都能很好驾驭!不给分没天理!

原文地址:http://blog.csdn.net/yangsen251024/article/details/8614305

实现跑马灯效果的JS很多,但是很多不好用,下面介绍一个比较好用的。

好用之处在于:

1 支持一个页面多个跑马灯效果
2.支持跑马灯内容的异步加载
关键的实现代码,如果看不懂,可以跑这个列子

  • 文字1
  • 文字2
  • 文字3
  • 文字4
  • 文字5



function test() { $("#RunTopic").find("li:first").appendTo($("#RunTopic")); }

另外,也可以使用HTML的marquee 标签,我刚测试而来下,chrome,IE8,火狐都支持!

如:


纤云弄巧,飞星传恨,银汉迢迢暗度。

金风玉露一相逢,便胜却、人间无数。

柔情似水,佳期如梦。忍顾鹊桥归路!

两情若是久长时,又岂在、朝朝暮暮。

千重劫,百世难,亘古匆匆,弹指间!

不死躯,不灭魂,震古烁今,无人敌!

待到阴阳逆乱时,以我魔血染青天!

########################################################################################

JS代码:
(function($){
$.fn.extend({
RollTitle: function(opt,callback){
if(!opt) var opt={};
var _this = this;
_this.timer = null;
_this.lineH = _this.find("li:first").height();
_this.line=opt.line?parseInt(opt.line,15):parseInt(_this.height()/_this.lineH,10);
_this.speed=opt.speed?parseInt(opt.speed,10):3000, //卷动速度,数值越大,速度越慢(毫秒
_this.timespan=opt.timespan?parseInt(opt.timespan,13):5000; //滚动的时间间隔(毫秒
if(_this.line==0) this.line=1;
_this.upHeight=0-_this.line*_this.lineH;
_this.scrollUp=function(){
_this.animate({
marginTop:_this.upHeight
},_this.speed,function(){
for(i=1;i<=_this.line;i++){
_this.find("li:first").appendTo(_this);
}
_this.css({marginTop:0});
});
}
_this.hover(function(){
clearInterval(_this.timer);
},function(){
_this.timer=setInterval(function(){_this.scrollUp();},_this.timespan);
}).mouseout();
}
})
})(jQuery);
HTML代码:
line:一次卷动的文本行数
speed:卷动动画的时间
timespan:间隔时间

  • 文字1
  • 文字2
  • 文字3
  • 文字4
  • 文字5

$(document.body).ready(function(){ $("#RunTopic").RollTitle({line:1,speed:200,timespan:1500}); });

designhack
designhack 最简单的方法就是换成flash做,呵呵 跑题了,想赚点分数
一年多之前 回复
dabocaiqq
请你们大家多多姿瓷我菠菜菌 不行啊,不行
一年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问

相似问题

9
javascript都来回答,怎么实现下拉选择日期的功能,JQ或者JS怎么实现?
1
如何使用javascript实现一件电脑优化、清理和设置主页的功能,可以远程控制设置主页的内容
3
javascript怎么实现对文本框的判断,在执行以后怎么判断一下,代码的实现怎么写?
7
javascript简单的问题,想要c币的都来回答:怎么在js网页中实现
2
javascript怎么实现调用api的功能,api调用功能的语句的格式是怎么样的?
1
javascript高亮选择网页上所有的某个关键字,关键字从搜索下拉获取的实现思路?
0
javascript+unifia.js+ome怎么实现国标3码的过滤?
3
怎么将html、js、css等一个html网页打包成单一的exe可执行程序文件?
1
在css中写javascript代码的疑问?
3
如何用go 解析含有js函数的html网页
1
网页中用JavaScript中制作跑马灯效果,为啥他不动呢?有人能帮我看看有错吗
2
javascript怎么创建对象?js的对象和java有什么不同?
0
VS CODE调试由batch引导启动的JS文件
1
d3.js流程图怎么控制节点之间的距离?
4
vue 项目中怎么引用js文件
1
vue中video.js的问题,求大佬带飞
2
javascript怎么判断用户是不是使用手机访问的并且跳转到一个新的网页
1
Vue中三个跑马灯页面,怎样实现只有当前显示页面的定时器会执行 ,其他两个处于关闭状态?
1
想问一下js中有没有触发打开控制台的函数
3
js如何直接在网页中打开docx或者psd文件?