Moving text circularly on web page

2018-06-03 07:45:56

I am designing web page where I need to move text from left side of monitor screen to right side of screen. I have tried with <marquee> tag. It is working without any error.

My requirement is whenever text is about to disappear inside right side of web page it should start coming out from left side of page. It should not wait for all text to disappear and then start from left side.

Till now I have been doing it using <html> only. Please suggest other ways also.

It is possible using Javascript:

Have two copies of the text being scrolled separated by the width of the container. Animate from (left copy visible) to (right copy visible), then jump back and repeat.

Something along the lines of (untested, using jQuery):

<div class="outer">
  <div class="inner">
     some text
  </div>
</div>

css:

.outer, .inner {
  width: 100%;
}
.outer {
  position: relative;
  overflow: hidden;
}
.inner {
  position: absolute;
}

js:

(function rerun(){
  var time = 10000 //ms

  $(".inner").slice(0,-1).remove()
  $i1=$(".inner")
  $i2=$i1.clone()

  $i1.css({left:0}).animate({left:"-100%"}, time)
  $i2.insertAfter($i1).css({left:"100%"}).animate({left:0}, time, rerun)
})()

This way the text should start appearing on the right side as soon as it starts disappearing on the right side. Modify the relative widths to achieve a different effect.

链接地址: http://www.djcxy.com/p/11386.html

上一篇: XML到SQL的转换

下一篇: 在网页上循环移动文本