非常简单,非常平滑,JavaScript字幕

我试图找到一个非常简单、平滑、轻量级的javascript或jquery字幕。我已经试过丝质帐篷之类的东西了,但它不能与我正在使用的应用程序配合使用。因此,越简单、越短越好,也越容易调试。有人知道一种简单易实现的javascript替代品吗

巴斯德宾

代码

<!DOCTYPE html PUBLIC“-//W3C//DTD XHTML1.0//EN”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“xml:lang=“en”lang=“en”>
<头>
<script type=“text/javascript”>
var tWidth='300px';//宽度(以像素为单位)
var tHeight='25px';//高度(以像素为单位)
var tcolour='#ffffcc';//背景色:
var moStop=true;//鼠标悬停(对或错)
var fontfamily='arial,无衬线';//内容字体
var t速度=3;//滚动速度(1=慢,5=快)
//在此处输入您的股票代码内容(分别使用\/和\'代替/和'
var content='您是否在寻找大量有用的信息<a href=“http:\/\/javascript.about.com\/”>关于Javascript&lt\/a>?好吧,现在你已经找到了。”;
var-cps=-t速度;var-aw,mq;var fsz=parseInt(tHeight)-4;函数startticker(){if(document.getElementById){var tick='<div style=“位置:相对;宽度:'+tWidth+”;高度:'+tHeight+”;溢出:隐藏;背景色:'+tcolour+'”;if(moStop)tick+='onmouseover=“cps=0”onmouseout=“cps=-tSpeed”;tick+=><div id=“mq”样式=“position:absolute;right:0px;top:0px;font-family:”+fontfamily+”;font-size:“+fsz+'px;空格:nowrap;”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);}}}函数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;
&lt/脚本>
&lt/头>
<车身>
<div id=“ticker”>
这是一个简单的滚动文本!
&lt/部门>
&lt/车身>
&lt/html>

hiya简单演示来自上述评论中的建议:http://jsfiddle.net/FWWEn/

使用鼠标上方的暂停功能:http://jsfiddle.net/zrW5q/

希望这有帮助,祝你玩得愉快,干杯

html

<h1>你好,世界&lt/h1>
<h2>我会选两次字幕&lt/h2>
<h3>我跑得很快&lt/h3>
<h4>从左到右&lt/h4>
<h5>我将推迟这个问题&lt/h5>​

Jquery代码

(函数($){
$.fn.textWidth=函数(){
var calc='<span style=“display:none”>'+$(this.text()+'</span>';
$('body')。追加(计算);
var width=$('body').find('span:last').width();
$('body').find('span:last').remove();
返回宽度;
};
$.fn.marquee=函数(args){
var,该值=$(此值);
var textWidth=that.textWidth(),
偏移量=该.width(),
宽度=偏移量,
css={
“文本缩进”:that.css('text-indent'),
“溢出”:that.css('overflow'),
“空白”:that.css('white-space')
},
marqueeCss={
“文本缩进”:宽度,
“溢出”:“隐藏”,
“空白”:“nowrap”
},
args=$.extend(true,{count:-1,速度:1e1,leftToRight:false},args),
i=0,
停止=文本宽度*-1,
dfd=$.Deferred();
函数go(){
如果(!that.length)返回dfd.reject();
如果(宽度==停止){
i++;
if(i==args.count){
css(css);
返回dfd.resolve();
}
if(参数leftToRight){
宽度=文本宽度*-1;
}否则{
宽度=偏移量;
}
}
css('text-indent',width+'px');
if(参数leftToRight){
宽度++;
}否则{
宽度--;
}
设置超时(开始,参数速度);
};
if(参数leftToRight){
宽度=文本宽度*-1;
宽度++;
停止=偏移;
}否则{
宽度--;
}
css(marqueeCss);
go();
返回dfd.promise();
};
})(jQuery);
$('h1').marquee();
$('h2')。选框({count:2});
$('h3').marquee({speed:5});
$('h4').marquee({leftToRight:true});
$('h5').marquee({count:1,speed:2}).done(function(){$('h5').css('color','#f00');})​

发表评论