나는 내가 운영하는 웹 사이트에 트위터 피드를 가지고 있습니다. 그러나 작은 화면에서는 잘립니다. 최신 줄 바꿈이있는 1 줄의 텍스트를 표시 할 수있는 막대가 있습니다. 너무 길면 짹짹이 줄임표가되거나 끝이 희미 해지기를 바란다. 그러나 마우스를 올리면 텍스트가 왼쪽으로 천천히 슬라이드되어 숨겨진 부분이 노출됩니다.CSS/JQuery에서 옆쪽으로 마우스를 가져 가면 텍스트가 스크롤됩니다.
이 효과는 화면보다 넓은 제목이있는 노래를 강조 표시 할 때 iPod classic에서 사용됩니다. (나는 당신이 내가 무엇을 할 것인지 이해하기를 바랍니다.)
나는 이런 식으로 구현하는 방법에 대해 궁금한가요? 어떻게 텍스트를 한 줄에 머물게 할 수 있습니까?
그것을 할 수있는 매우 간단한 방법입니다에 왼쪽에서 오른쪽으로 스크롤 항목을 이동하는 .animate()를 사용할 수 있습니다. 그런 다음 내용의 기본, untruncated 폭을 결정하는 경우
div#container {
/* among other settings: see fiddle */
width: 200px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
: 당신은 자동으로 절단과 생략을 처리하기 위해 일부 CSS를 사용할 수 있습니다
<div id="container">
Here is the long content, long long content. So long. Too long.
</div>
: 첫째, 긴 텍스트를 포함하는 사업부를 설정 jQuery의 .animate()을 사용하여 런타임까지 텍스트의 길이를 알지 못하는 경우에도 일관된 속도로 해당 컨텐츠를 이동할 수 있습니다 (트위터 피드의 경우처럼).
var true_width = (function(){
var $tempobj = $('#container') // starting with truncated text div container
.clone().contents() // duplicate the text
.wrap('<div id="content"/>') // wrap it in a container
.parent().appendTo('body') // add this to the dom
.css('left','-1000px'); // but put it far off-screen
var result = $tempobj.width(); // measure it
$tempobj.remove(); // clean up
return result;
})();
마지막으로, 일부 애니메이션 : 여기 측정 점점 다소 기계적인 방법 텍스트의 길이에 관계없이
$('#container').one('mouseenter', function(){ // perhaps trigger once only
var shift_distance = true_width - $(this).width(); // how far to move
var time_normalized = parseInt(shift_distance/100, 10) * 1000; // speed
$(this).contents().wrap('<div id="content">').parent() // wrap in div
.animate({
left: -shift_distance,
right: 0
}, time_normalized, 'linear'); // and move the div within its "viewport"
});
, 당신은 약 1 초에 100 개의 일관된 속도를 얻을 수 있습니다 픽셀 (원하는대로 조정). 마우스를 놓은 상태에서 콘텐츠를 다시 설정하거나 되감기하는 것은 연습 과제로 남겨 둡니다. 이 접근 방식은 약간의 순진한 비트가 있지만 몇 가지 아이디어를 줄 수 있습니다.여기
가 작동 예제 : 지난 http://jsfiddle.net/redler/zdvyj/
Steffen Rusitschka는 이렇게하기 위해 jQuery 스크립트 인 RUZEE.Ellipsis을 작성했습니다. 처음부터 구축 된 경우 만 : (예를 들어 http://remysharp.com/demo/marquee.html 레미 샤프)가이 어떻게 거기에 몇 가지 플러그인이
"공백 : 파라미터 nowrap를;" "position : absolute"(왼쪽과 오른쪽으로 스크롤 할 수 있도록) 및 "overflow : hidden"이있는 상대적으로 위치가 지정된 요소로 래핑됩니다 (표시하려는 폭과 같이 보이게 만듭니다) .
jQuery를 사용하면 가져가 이벤트 여기
, 여기 내 항목의 : http://jsfiddle.net/sdleihssirhc/AYYQe/3/
쿨 물건 :
text-overflow:ellipsis을 사용합니다.아주 예쁘다! jquery없이! – Purefan
그건 아주 멋진 :) 공유 주셔서 감사합니다! – BeesonBison
@sdleihssirhc : 데모 링크가 다운되었습니다. – NewCod3r
당신은 막대를 사용자 정의 코드 생성기를 사용하여 결과를 미리 jRollingNews
에 모양을 제공 할 수 있습니다.
면책 조항 : 작성했습니다.
내 솔루션 jsfiddle 또는 내 마지막에는 CSS3 애니메이션을 사용합니다. here 및 here에서 아이디어를 빌 렸습니다.
.s {
display: inline-block;
}
.t:hover, .s:hover {
width: auto;
}
: 내 생각, 그것은 따라서 @keyframes 규칙에 left 속성에 대한 비율의 사용을 가능하게하는 모든 텍스트를 포함 할 수 있도록 충분히 넓은 성장 즉, div.s을 컨테이너 div을 수 있도록 따라서이었다 바이올린을위한
.t {
white-space: nowrap;
position: relative;
overflow: hidden;
text-overflow: ellipsis;
display: block;
width: 100%;
}
.s {
display: inline-block;
width: 100%;
}
.t:hover, .s:hover {
width: auto;
}
.s:hover .t {
animation: scroll 15s;
}
.f {
width: 100px;
background: red;
overflow: hidden;
}
@keyframes scroll {
0% {left: 0px;}
100% {left: -100%;}
}<div class="f">
<div class="s">
<div class="t">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id impedit accusamus nulla facilis unde sed ipsum maiores adipisci, eius excepturi saepe perspiciatis sequi optio ipsam odio quibusdam quo libero repudiandae.
</div>
</div>
</div>
감사 : 위대한 폭발물 : 여기에 코드입니다 anatory comments – Purefan