Javascript Marquee 取代标签

发布于 2024-07-09 21:36:12 字数 605 浏览 9 评论 0原文

我对 Javascript 已经绝望了。 这就是我所拥有的:

<script type="text/javascript">
    function beginrefresh(){

        //set the id of the target object
        var marquee = document.getElementById("marquee_text");

        if(marquee.scrollLeft >= marquee.scrollWidth - parseInt(marquee.style.width)) {
            marquee.scrollLeft = 0;
        }

        marquee.scrollLeft += 1;

        // set the delay (ms), bigger delay, slower movement
        setTimeout("beginrefresh()", 10);

    }
</script>

它向左滚动,但我需要它相对无缝地重复。 目前它只是跳回到开头。 我的方法可能不行,如果不行的话谁有更好的方法?

I'm hopeless at Javascript. This is what I have:

<script type="text/javascript">
    function beginrefresh(){

        //set the id of the target object
        var marquee = document.getElementById("marquee_text");

        if(marquee.scrollLeft >= marquee.scrollWidth - parseInt(marquee.style.width)) {
            marquee.scrollLeft = 0;
        }

        marquee.scrollLeft += 1;

        // set the delay (ms), bigger delay, slower movement
        setTimeout("beginrefresh()", 10);

    }
</script>

It scrolls to the left but I need it to repeat relatively seamlessly. At the moment it just jumps back to the beginning. It might not be possible the way I've done it, if not, anyone have a better method?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(7

野の 2024-07-16 21:36:12

简单的 JavaScript 解决方案:

window.addEventListener('load', function () {
	function go() {
		i = i < width ? i + step : 1;
		m.style.marginLeft = -i + 'px';
	}
	var i = 0,
		step = 3,
		space = '     ';
	var m = document.getElementById('marquee');
	var t = m.innerHTML; //text
	m.innerHTML = t + space;
	m.style.position = 'absolute'; // http://stackoverflow.com/questions/2057682/determine-pixel-length-of-string-in-javascript-jquery/2057789#2057789
	var width = (m.clientWidth + 1);
	m.style.position = '';
	m.innerHTML = t + space + t + space + t + space + t + space + t + space + t + space + t + space;
	m.addEventListener('mouseenter', function () {
		step = 0;
	}, true);
	m.addEventListener('mouseleave', function () {
		step = 3;
	}, true);
	var x = setInterval(go, 50);
}, true);
#marquee {
   background:#eee;
   overflow:hidden;
   white-space: nowrap;
 }
<div id="marquee">
	1 Hello world! 2 Hello world! <a href="#">3 Hello world!</a>
</div>

JSFiddle

Simple javascript solution:

window.addEventListener('load', function () {
	function go() {
		i = i < width ? i + step : 1;
		m.style.marginLeft = -i + 'px';
	}
	var i = 0,
		step = 3,
		space = '     ';
	var m = document.getElementById('marquee');
	var t = m.innerHTML; //text
	m.innerHTML = t + space;
	m.style.position = 'absolute'; // http://stackoverflow.com/questions/2057682/determine-pixel-length-of-string-in-javascript-jquery/2057789#2057789
	var width = (m.clientWidth + 1);
	m.style.position = '';
	m.innerHTML = t + space + t + space + t + space + t + space + t + space + t + space + t + space;
	m.addEventListener('mouseenter', function () {
		step = 0;
	}, true);
	m.addEventListener('mouseleave', function () {
		step = 3;
	}, true);
	var x = setInterval(go, 50);
}, true);
#marquee {
   background:#eee;
   overflow:hidden;
   white-space: nowrap;
 }
<div id="marquee">
	1 Hello world! 2 Hello world! <a href="#">3 Hello world!</a>
</div>

JSFiddle

阳光的暖冬 2024-07-16 21:36:12

我最近使用 Cycle 2 Jquery 插件在 HTML 中实现了一个选框:
http://jquery.malsup.com/cycle2/demo/non-image.php

<div class="cycle-slideshow"  data-cycle-fx="scrollHorz" data-cycle-speed="9000" data-cycle-timeout="1"  data-cycle-easing="linear" data-cycle-pause-on-hover="true" data-cycle-slides="> div" >
  <div>  Text 1  </div>
  <div>  Text 2  </div>
</div>    

I recently implemented a marquee in HTML using Cycle 2 Jquery plugin :
http://jquery.malsup.com/cycle2/demo/non-image.php

<div class="cycle-slideshow"  data-cycle-fx="scrollHorz" data-cycle-speed="9000" data-cycle-timeout="1"  data-cycle-easing="linear" data-cycle-pause-on-hover="true" data-cycle-slides="> div" >
  <div>  Text 1  </div>
  <div>  Text 2  </div>
</div>    
淡莣 2024-07-16 21:36:12

HTML5 不支持该标记,但是许多浏览器仍会“正确”显示文本,但您的代码将无法验证。 如果这对您来说不是问题,那么这可能是一个选择。

据推测,CSS3 具有字幕文本的能力,但是因为任何知道如何做到这一点的人都认为这对于 CSS 来说是一个“坏主意”,所以我在网上找到的信息非常有限。 即使是 W3 文档也没有提供足够的细节供业余爱好者或自学人员实施。

PHP 和 Perl 也可以复制这种效果。 为此所需的脚本将非常复杂,并且比任何其他选项占用更多的资源。 还有一种可能是脚本在某些浏览器上运行得太快,导致效果完全无效。

回到 JavaScript - 你的代码 (OP) 似乎是我发现的最干净、最简单、最有效的代码。 我会尝试这个。 对于无缝的事情,我将寻找一种方法来限制结束和开始之间的空白,可能通过执行 while 循环(或类似的)并实际运行两个脚本,让一个在另一个正在处理时休息。

也可能有一种通过改变单个函数来消除空白的方法。 我是 JS 新手,所以不知道。 - 我知道这不是一个完整的答案,但有时想法可以带来结果,即使只是为了别人。

HTML5 does not support the tag, however a lot of browsers will still display the text "properly" but your code will not validate. If this isn't an issue for you, that may be an option.

CSS3 has the ability, supposedly, to have marquee text, however because anyone that knows how to do it believes it's a "bad idea" for CSS, there is very limited information that I have found online. Even the W3 documents do not go into enough detail for the hobbyist or self-teaching person to implement it.

PHP and Perl can duplicate the effect as well. The script needed for this would be insanely complicated and take up much more resources than any other options. There is also the possibility that the script would run too quickly on some browsers, causing the effect to be completely negated.

So back to JavaScript - Your code (OP) seems to be about the cleanest, simplest, most effective I've found. I will be trying this. For the seamless thing, I will be looking into a way to limit the white space between end and beginning, possibly with doing a while loop (or similar) and actually run two of the script, letting one rest while the other is processing.

There may also be a way with a single function change to eliminate the white space. I'm new to JS, so don't know off the top of my head. - I know this isn't a full-on answer, but sometimes ideas can cause results, if only for someone else.

够运 2024-07-16 21:36:12

该脚本用于替换选取框标签

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
     
         $('.scrollingtext').bind('marquee', function() {
             var ob = $(this);
             var tw = ob.width();
             var ww = ob.parent().width();
             ob.css({ right: -tw });
             ob.animate({ right: ww }, 20000, 'linear', function() {
                 ob.trigger('marquee');
             });
         }).trigger('marquee');
     
     });
     </script>


<div class="scroll">
    <div class="scrollingtext"> Flash message without marquee tag using javascript!  </div>
 </div>

This script used to replace the marquee tag

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
     
         $('.scrollingtext').bind('marquee', function() {
             var ob = $(this);
             var tw = ob.width();
             var ww = ob.parent().width();
             ob.css({ right: -tw });
             ob.animate({ right: ww }, 20000, 'linear', function() {
                 ob.trigger('marquee');
             });
         }).trigger('marquee');
     
     });
     </script>


<div class="scroll">
    <div class="scrollingtext"> Flash message without marquee tag using javascript!  </div>
 </div>
风苍溪 2024-07-16 21:36:12

使用 @Stano 代码和一些 jQuery,我创建了一个脚本,它将用标准 div 替换旧的 marquee 标签。 该代码还将解析 marquee 属性,例如 directionscrolldelayscrollmount

这是代码:

jQuery(function ($) {

    if ($('marquee').length == 0) {
        return;
    }

    $('marquee').each(function () {

        let direction = $(this).attr('direction');
        let scrollamount = $(this).attr('scrollamount');
        let scrolldelay = $(this).attr('scrolldelay');

        let newMarquee = $('<div class="new-marquee"></div>');
        $(newMarquee).html($(this).html());
        $(newMarquee).attr('direction',direction);
        $(newMarquee).attr('scrollamount',scrollamount);
        $(newMarquee).attr('scrolldelay',scrolldelay);
        $(newMarquee).css('white-space', 'nowrap');

        let wrapper = $('<div style="overflow:hidden"></div>').append(newMarquee);
        $(this).replaceWith(wrapper);

    });

    function start_marquee() {

        let marqueeElements = document.getElementsByClassName('new-marquee');
        let marqueLen = marqueeElements.length
        for (let k = 0; k < marqueLen; k++) {


            let space = '     ';
            let marqueeEl = marqueeElements[k];

            let direction = marqueeEl.getAttribute('direction');
            let scrolldelay = marqueeEl.getAttribute('scrolldelay') * 100;
            let scrollamount = marqueeEl.getAttribute('scrollamount');

            let marqueeText = marqueeEl.innerHTML;

            marqueeEl.innerHTML = marqueeText + space;
            marqueeEl.style.position = 'absolute'; 

            let width = (marqueeEl.clientWidth + 1);
            let i = (direction == 'rigth') ? width : 0;
            let step = (scrollamount !== undefined) ? parseInt(scrollamount) : 3;

            marqueeEl.style.position = '';
            marqueeEl.innerHTML = marqueeText + space + marqueeText + space;



            let x = setInterval( function () {

                if ( direction.toLowerCase() == 'left') {

                    i = i < width ? i + step : 1;
                    marqueeEl.style.marginLeft = -i + 'px';

                } else {

                    i = i > -width ? i - step : width;
                    marqueeEl.style.marginLeft = -i + 'px';

                }

            }, scrolldelay);

        }
    }

    start_marquee ();
});

这是一个有效的 codepen

Working with @Stano code and some jQuery I have created a script that will replace the old marquee tag with standard div. The code will also parse the marquee attributes like direction, scrolldelay and scrollamount.

Here is the code:

jQuery(function ($) {

    if ($('marquee').length == 0) {
        return;
    }

    $('marquee').each(function () {

        let direction = $(this).attr('direction');
        let scrollamount = $(this).attr('scrollamount');
        let scrolldelay = $(this).attr('scrolldelay');

        let newMarquee = $('<div class="new-marquee"></div>');
        $(newMarquee).html($(this).html());
        $(newMarquee).attr('direction',direction);
        $(newMarquee).attr('scrollamount',scrollamount);
        $(newMarquee).attr('scrolldelay',scrolldelay);
        $(newMarquee).css('white-space', 'nowrap');

        let wrapper = $('<div style="overflow:hidden"></div>').append(newMarquee);
        $(this).replaceWith(wrapper);

    });

    function start_marquee() {

        let marqueeElements = document.getElementsByClassName('new-marquee');
        let marqueLen = marqueeElements.length
        for (let k = 0; k < marqueLen; k++) {


            let space = '     ';
            let marqueeEl = marqueeElements[k];

            let direction = marqueeEl.getAttribute('direction');
            let scrolldelay = marqueeEl.getAttribute('scrolldelay') * 100;
            let scrollamount = marqueeEl.getAttribute('scrollamount');

            let marqueeText = marqueeEl.innerHTML;

            marqueeEl.innerHTML = marqueeText + space;
            marqueeEl.style.position = 'absolute'; 

            let width = (marqueeEl.clientWidth + 1);
            let i = (direction == 'rigth') ? width : 0;
            let step = (scrollamount !== undefined) ? parseInt(scrollamount) : 3;

            marqueeEl.style.position = '';
            marqueeEl.innerHTML = marqueeText + space + marqueeText + space;



            let x = setInterval( function () {

                if ( direction.toLowerCase() == 'left') {

                    i = i < width ? i + step : 1;
                    marqueeEl.style.marginLeft = -i + 'px';

                } else {

                    i = i > -width ? i - step : width;
                    marqueeEl.style.marginLeft = -i + 'px';

                }

            }, scrolldelay);

        }
    }

    start_marquee ();
});

And here is a working codepen

蹲墙角沉默 2024-07-16 21:36:12

我最近在一个需要字幕的网站上工作,最初使用了 动态字幕 ,效果很好,但我无法让文本从屏幕上开始。 环顾四周,但找不到任何像我想要的那么简单的东西,所以我自己做了:

<div id="marquee">

<script type="text/javascript">

  let marquee = $('#marquee p');
  const appendToMarquee = (content) => {
    marquee.append(content);
  }
  
  const fillMarquee = (itemsToAppend, content) => {
    for (let i = 0; i < itemsToAppend; i++) {
      appendToMarquee(content);
    }
  }
  
  const animateMarquee = (itemsToAppend, content, width) => {
    fillMarquee(itemsToAppend, content);
    marquee.animate({left: `-=${width}`,}, width*10, 'linear', function() {
      animateMarquee(itemsToAppend, content, width);
    })
  }


  const initMarquee = () => {
    let width = $(window).width(),
    marqueeContent = "YOUR TEXT",
    itemsToAppend = width / marqueeContent.split("").length / 2;
    animateMarquee(itemsToAppend, marqueeContent, width);
  }

  initMarquee();
</script>

还有CSS:

#marquee {
  overflow: hidden;
  margin: 0;
  padding: 0.5em 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #000;
  color: #fff;
}

#marquee p {
  white-space: nowrap;
  margin: 0;
  overflow: visible;
  position: relative;
  left: 0;
}

I was recently working on a site that needed a marquee and had initially used the dynamic marquee, which worked well but I couldn't have the text begin off the screen. Took a look around but couldn't find anything quite as simple as I wanted so I made my own:

<div id="marquee">

<script type="text/javascript">

  let marquee = $('#marquee p');
  const appendToMarquee = (content) => {
    marquee.append(content);
  }
  
  const fillMarquee = (itemsToAppend, content) => {
    for (let i = 0; i < itemsToAppend; i++) {
      appendToMarquee(content);
    }
  }
  
  const animateMarquee = (itemsToAppend, content, width) => {
    fillMarquee(itemsToAppend, content);
    marquee.animate({left: `-=${width}`,}, width*10, 'linear', function() {
      animateMarquee(itemsToAppend, content, width);
    })
  }


  const initMarquee = () => {
    let width = $(window).width(),
    marqueeContent = "YOUR TEXT",
    itemsToAppend = width / marqueeContent.split("").length / 2;
    animateMarquee(itemsToAppend, marqueeContent, width);
  }

  initMarquee();
</script>

And the CSS:

#marquee {
  overflow: hidden;
  margin: 0;
  padding: 0.5em 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #000;
  color: #fff;
}

#marquee p {
  white-space: nowrap;
  margin: 0;
  overflow: visible;
  position: relative;
  left: 0;
}
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文