程序问答   发布时间:2022-06-02  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了非常简单,非常流畅的JavaScript字幕大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

如何解决非常简单,非常流畅的JavaScript字幕?

开发过程中遇到非常简单,非常流畅的JavaScript字幕的问题如何解决?下面主要结合日常开发的经验,给出你关于非常简单,非常流畅的JavaScript字幕的解决方法建议,希望对你解决非常简单,非常流畅的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,请注明来意。