我试图找到一个非常简单、平滑、轻量级的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<\/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;
</脚本>;
</头>;
<;车身>;
<;div id=“ticker”>;
这是一个简单的滚动文本!
</部门>;
</车身>;
</html>;
hiya简单演示来自上述评论中的建议:http://jsfiddle.net/FWWEn/
使用鼠标上方的暂停功能:http://jsfiddle.net/zrW5q/
希望这有帮助,祝你玩得愉快,干杯
html
<;h1>;你好,世界</h1>;
<;h2>;我会选两次字幕</h2>;
<;h3>;我跑得很快</h3>;
<;h4>;从左到右</h4>;
<;h5>;我将推迟这个问题</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');})