大佬教程收集整理的这篇文章主要介绍了非常简单,非常流畅的JavaScript字幕,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
希望这对您有所帮助,加油!
<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>
(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或jquery字幕。我已经尝试过丝绸选框之类的东西,但不适用于我正在使用的应用程序。因此,越短越好,越好-并且越容易调试。有人知道字幕易于实现的JavaScript替换吗?
码
<!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>
以上是大佬教程为你收集整理的非常简单,非常流畅的JavaScript字幕全部内容,希望文章能够帮你解决非常简单,非常流畅的JavaScript字幕所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。