끝없는 수평 jQuery 시세

끝없는 수평 뉴스 스타일 시세를 찾고 있습니다. SmoothScroll과 SimpleDivScroll을 가지고 놀았습니다.끝없는 수평 jQuery 시세

SmoothScroll은 다양한 너비의 요소와 잘 작동하지 않는 것 같고 SimpleDivScroll은 jQuery 1.4+ 와만 호환되며 jQuery 1.3.2가 붙어 있습니다.

다른 대안이 있습니까?

출처

2010-08-11 digital

끝없이 말하면 표시 할 새 데이터를 계속 가져 오시겠습니까? 또는 이전에 정의 된 한정된 양의 데이터를 표시하여 오른쪽에서 왼쪽으로 계속 스크롤 할 수 있도록 하시겠습니까? – Thomas

이전에 정의 된 한정된 양의 데이터가 다시 랩 어라운드됩니다. – digital

jQuery에서 사용 가능한 모든 시세 플러그인에 대한 개요는 https://plugins.jquery.com/tag/ticker/를 참조하십시오. – koppor

이 시도 :

jQuery Twitter Marquee by Takien

출처

2010-10-08 15:23:56 bangbambang

불행히도,이 링크는 이제 고장났습니다. – HockeyJ

nope. 올바른 페이지로 리디렉션됩니다. :) – Fritz

이 링크는 제작자의 웹 사이트에 고정되었지만 불행히도 모든 코드 예제는 사라졌습니다. –

간단한 시세 표시입니다. 모든 브라우저에서 테스트하지 않았습니다.

<html> 
<head> 
<title>Horizontal scroller</title> 
<style type="text/css"> 
#scroller{height:100%;margin:0;padding:0;line-height:30px;position:relative;} 
#scroller li{float:left;height:30px;padding:0 0 0 10px;list-style-position:inside;} 
#scrollerWrapper{height:30px;margin:30px;overflow:hidden;border:1px #333 solid;background:#F2F2F2;} 
</style> 
<script type="text/javascript" src="jquery-1.3.2.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    var speed = 5; 
    var items, scroller = $('#scroller'); 
    var width = 0; 
    scroller.children().each(function(){ 
     width += $(this).outerWidth(true); 
    }); 
    scroller.css('width', width); 
    scroll(); 
    function scroll(){ 
     items = scroller.children(); 
     var scrollWidth = items.eq(0).outerWidth(); 
     scroller.animate({'left' : 0 - scrollWidth}, scrollWidth * 100/speed, 'linear', changeFirst); 
    } 
    function changeFirst(){ 
     scroller.append(items.eq(0).remove()).css('left', 0); 
     scroll(); 
    } 
}); 
</script> 
</head> 
<body> 
<div id="scrollerWrapper"> 
<ul id="scroller"> 
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> 
<li> Maecenas sollicitudin, ante id ultrices consectetur, ipsum nisl varius ipsum, sit amet congue eros nulla vitae urna.</li> 
<li>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </li> 
</ul> 
</div> 
</body> 
</html>

출처

2010-10-06 10:30:28

당신은 liScroll을 본 적이 있습니까? "무한"이란 의미에 따라 필요한 것을 할 수도 있습니다 (마지막 항목과 둘러 감기 사이에 간격이 있습니다).

출처

2010-10-08 16:27:44

이며 JQuery 1.2.x 이상에서 작동한다고 주장합니다. –

시도해 볼 수 있습니다. jQuery webTicker 전체 목록 완료 후 스크롤을 중지하지 않는 유일한 방법입니다. 그것은 지속적으로 귀하의 항목을 회전합니다. 한 페이지에 여러 페이지를 사용하고 각 페이지를 개별적으로 스타일을 지정할 수 있습니다. CSS 샘플은

이 그것은 jQuery를 1.3 테스트되지 않았습니다 페이지 자체에서 제공하지만 jQuery를 1.4,1.5 및 1.6

출처

2011-12-07 13:25:33