非常简单，非常流畅的JavaScript字幕 [英] Very Simple, Very Smooth, JavaScript Marquee
本文介绍了非常简单，非常流畅的JavaScript字幕的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图找到一个非常简单，流畅，轻量级的javascript或jquery选框。我已经尝试过丝绸字幕等，但它不适用于应用程序我正在使用。所以越简单越好，越容易调试。有人知道一个容易实现的字幕替换的JavaScript？
代码
DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Transitional // ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">< html xmlns =http://www.w3.org/1999/xhtmlxml：lang =enlang =en>
< head>
< script type =text / javascript>
var tWidth ='300px'; //宽度（以像素为单位）
var tHeight ='25px'; //高度（以像素为单位）
var tcolour ='＃ffffcc'; //背景颜色：
var moStop = true; //在mouseover上暂停（true或false）
var fontfamily ='arial，sans-serif'; //字体为内容
var tSpeed = 3; //滚动速度（1 =慢速，5 =快速）
//在此处输入您的股票代码内容（分别使用\ /和\代替/和）
var content ='您是否正在寻找大量有用的信息< a href =http：\ / \ / javascript.about.com\ />关于Javascript< \ / a> ;?那么现在你已经找到了它。
var cps = -tSpeed; var aw，mq; var fsz = parseInt（tHeight） - 4;函数startticker（）{if（document.getElementById）{var tick ='< div style =position：relative; width：'+ tWidth +'; height：'+ tHeight +'; overflow：hidden; background-color：'+ tcolour + ''; if（moStop）tick + ='onmouseover =cps = 0onmouseout =cps = -tSpeed'; tick + ='>< div id =mqstyle =position：absolute; right：0px; top：0px; font-family：'+ fontfamily +'; font-size：'+ fsz +'px; white-空间：NOWRAP;>< \ / DIV>< \ / DIV>'; document.getElementById（'ticker'）。innerHTML = tick; mq = document.getElementById（mq）; mq.style.right =（10 + parseInt函数（tWidth））+ PX; mq.innerHTML ='< span id =tx>'+ content +'< \ span>'; aw = document.getElementById（tx）。offsetWidth; lefttime = setInterval（scrollticker（），50）;}} function scrollticker（）{mq.style.right =（parseInt（mq.style.right）>（ - 10 - aw））？
mq.style.right = parseInt（mq.style.right）+ cps +px：parseInt（tWidth）+10+px;} window.onload = startticker;
< / script>
< / head>
< body>
< div id =ticker>
这是一个简单的滚动文本！
< / div>
< / body>
< / html>
解决方案
hiya 简单演示自以上评论中的建议： http://jsfiddle.net/FWWEn/
在mouseover上使用暂停功能： http://jsfiddle.net/zrW5q/
希望这会有所帮助，祝您有个愉快的祝福！
html
< h1> Hello World！< / h1>
< h2>我会选取两次< / h2>
< h3>我快走了！< / h3>
< h4>从左到右< / h4>
< h5>我会推迟那个问题< / h5>
jquery code
（function（$）{
$ .fn.textWidth = function（） {
var calc ='< span style =display：none>'+ $（this）.text（）+'< / span>';
$（'body'） .append（calc）;
var width = $（'body'）。find（'span：last'）。width（）;
$（'body'）。find（'span：last '）.remove（）;
返回宽度;
};
$ .fn.marquee = function（args）{
var that = $（this） ;
var textWidth = that.textWidth（），
offset = that.width（），
width = offset，
css = {
'text-indent' ：that.css（'text-indent'），
'overflow'：that.css（'overflow'），
'white-space'：that.css（'white-s步骤'）
}，
marqueeCss = {
'text-indent'：width，
'overflow'：'hidden'，
'white-space'： 'nowrap'
}，
args = $ .extend（true，{count：-1，speed：1e1，leftToRight：false}，args），
i = 0，
stop = textWidth * -1，
dfd = $ .Deferred（）;
函数go（）{
if（！that.length）return dfd.reject（）;
if（width == stop）{
i ++;
if（i == args.count）{
that.css（css）;
return dfd.resolve（）;
}
if（args.leftToRight）{
width = textWidth * -1;
} else {
width = offset;
}
}
that.css（'text-indent'，width +'px'）;
if（args.leftToRight）{
width ++;
} else {
width--;
}
setTimeout（go，args.speed）;
};
if（args.leftToRight）{
width = textWidth * -1;
width ++;
stop = offset;
} else {
width--;
}
that.css（marqueeCss）;
go（）;
return dfd.promise（）;
};
}）（jQuery）;
$（'h1'）。marquee（）;
$（'h2'）。marquee（{count：2}）;
$（'h3'）。marquee（{speed：5}）;
$（'h4'）。marquee（{leftToRight：true}）;
$（'h5'）。marquee（{count：1，speed：2}）。done（function（）{$（'h5'）。css（'color'，'＃f00'）;} ）
I'm trying to find a very simple and smooth, lightweight javascript or jquery marquee. I already tried silk marquee or something, but it wouldn't work with the application I was using. So the simpler and shorter, the better - and easier to debug. Does anybody know of a easy to implement javascript replacement for the marquee?
Code
<!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" xml:lang="en" lang="en">
<head>
<script type="text/javascript">
var tWidth='300px'; // width (in pixels)
var tHeight='25px'; // height (in pixels)
var tcolour='#ffffcc'; // background colour:
var moStop=true; // pause on mouseover (true or false)
var fontfamily = 'arial,sans-serif'; // font for content
var tSpeed=3; // scroll speed (1 = slow, 5 = fast)
// enter your ticker content here (use \/ and \' in place of / and ' respectively)
var content='Are you looking for loads of useful information <a href="http:\/\/javascript.about.com\/">About Javascript<\/a>? Well now you\'ve found it.';
var cps=-tSpeed; var aw, mq; var fsz = parseInt(tHeight) - 4; function startticker(){if (document.getElementById) {var tick = '<div style="position:relative;width:'+tWidth+';height:'+tHeight+';overflow:hidden;background-color:'+tcolour+'"'; if (moStop) tick += ' onmouseover="cps=0" onmouseout="cps=-tSpeed"'; tick +='><div id="mq" style="position:absolute;right:0px;top:0px;font-family:'+fontfamily+';font-size:'+fsz+'px;white-space:nowrap;"><\/div><\/div>'; document.getElementById('ticker').innerHTML = tick; mq = document.getElementById("mq"); mq.style.right=(10+parseInt(tWidth))+"px"; mq.innerHTML='<span id="tx">'+content+'<\/span>'; aw = document.getElementById("tx").offsetWidth; lefttime=setInterval("scrollticker()",50);}} function scrollticker(){mq.style.right = (parseInt(mq.style.right)>(-10 - aw)) ?
mq.style.right = parseInt(mq.style.right)+cps+"px": parseInt(tWidth)+10+"px";} window.onload=startticker;
</script>
</head>
<body>
<div id="ticker">
this is a simple scrolling text!
</div>
</body>
</html>
解决方案
hiya simple demo from recommendations in above comments: http://jsfiddle.net/FWWEn/
with pause functionality on mouseover: http://jsfiddle.net/zrW5q/
hope this helps, have a nice one, cheers!
html
<h1>Hello World!</h1>
<h2>I'll marquee twice</h2>
<h3>I go fast!</h3>
<h4>Left to right</h4>
<h5>I'll defer that question</h5>
Jquery code
(function($) {
$.fn.textWidth = function(){
var calc = '<span style="display:none">' + $(this).text() + '</span>';
$('body').append(calc);
var width = $('body').find('span:last').width();
$('body').find('span:last').remove();
return width;
};
$.fn.marquee = function(args) {
var that = $(this);
var textWidth = that.textWidth(),
offset = that.width(),
width = offset,
css = {
'text-indent' : that.css('text-indent'),
'overflow' : that.css('overflow'),
'white-space' : that.css('white-space')
},
marqueeCss = {
'text-indent' : width,
'overflow' : 'hidden',
'white-space' : 'nowrap'
},
args = $.extend(true, { count: -1, speed: 1e1, leftToRight: false }, args),
i = 0,
stop = textWidth*-1,
dfd = $.Deferred();
function go() {
if(!that.length) return dfd.reject();
if(width == stop) {
i++;
if(i == args.count) {
that.css(css);
return dfd.resolve();
}
if(args.leftToRight) {
width = textWidth*-1;
} else {
width = offset;
}
}
that.css('text-indent', width + 'px');
if(args.leftToRight) {
width++;
} else {
width--;
}
setTimeout(go, args.speed);
};
if(args.leftToRight) {
width = textWidth*-1;
width++;
stop = offset;
} else {
width--;
}
that.css(marqueeCss);
go();
return dfd.promise();
};
})(jQuery);
$('h1').marquee();
$('h2').marquee({ count: 2 });
$('h3').marquee({ speed: 5 });
$('h4').marquee({ leftToRight: true });
$('h5').marquee({ count: 1, speed: 2 }).done(function() { $('h5').css('color', '#f00'); })
这篇关于非常简单，非常流畅的JavaScript字幕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
