13

我对 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>

它向左滚动，但我需要它相对无缝地重复。此刻它只是跳回到开头。我的做法可能不可能，如果没有，有人有更好的方法吗？

这是一个具有很多功能的 jQuery 插件：

http://jscroller2.markusbordihn.de/example/image-scroller-windiv/

而这一款“丝般顺滑”

http://remysharp.com/2008/09/10/the-silky-smooth-marquee/

4

7 回答 7

16

这是一个具有很多功能的 jQuery 插件：

http://jscroller2.markusbordihn.de/example/image-scroller-windiv/

而这一款“丝般顺滑”

http://remysharp.com/2008/09/10/the-silky-smooth-marquee/

于 2008-12-03T15:01:00.263 回答
8

简单的javascript解决方案：

window.addEventListener('load', function () {
	function go() {
		i = i < width ? i + step : 1;
		m.style.marginLeft = -i + 'px';
	}
	var i = 0,
		step = 3,
		space = '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';
	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

于 2014-10-15T00:15:36.540 回答
2

我最近使用 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>
于 2014-10-17T22:04:22.173 回答
1

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

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.

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

也可能有一种方法可以通过单个函数更改来消除空白。我是 JS 的新手，所以我不知道。- 我知道这不是一个完整的答案，但有时想法可能会导致结果，即使只是对其他人而言。

于 2011-07-04T11:13:44.500 回答
1

此脚本用于替换选框标记

<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>
于 2017-01-09T06:22:02.443 回答
0

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

这是代码：

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 = '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';
            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

于 2018-10-16T10:24:51.767 回答
0

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

<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;
}
于 2021-08-04T18:11:16.363 回答