너비가 HTML 요소를 흡수 중입니다.

임씨는 HTML 요소를 사용하여이를 수행하는 방법을 생각하려고합니다.너비가 HTML 요소를 흡수 중입니다.

alt text

이 색상에 대한 특별한 아무것도 없다, 그래서 나는 그 이미지를 만들 필요가 없습니다. 텍스트가 오른쪽 정렬됨을 유의하십시오. 또한 색상 막대는 왼쪽에서 텍스트까지 올라갑니다.

그래서이 텍스트는 배경색이 흰색으로 바뀌고 배경색이 바로 옆에 설정되어있는 div로 표시되어 구현 될 수 있습니다.

또는 수레 대신 오른쪽 맞춤을하고 비슷한 효과를 얻을 수 있습니다.

다음은 키커입니다.

저는 애니메이션을 만드는 데 자바 스크립트 라이브러리 (어느 것이 든 상관 없습니다)를 사용하고 있습니다.

alt text

플로트 또는 텍스트 정렬 방법에 대한 문제는 너무 많은 값들이 두 상태 사이에서 전환하도록 변경되어야한다는 같습니다 애니메이션 바는 좌측으로 수축 등 꼴이며 . 자바 스크립트 애니메이션 효과는 너비 또는 글꼴 크기와 같은 미리 정의 된 값을 변경하려는 경향이 있습니다. float 또는 text-align 메서드를 사용하여 그림 1에서 그림 2로 전송하려면 플로팅/텍스트 정렬을 제거한 다음 막대 색의 너비를 설정해야합니다. 그러나 자바 스크립트를 유지하려는 경우에는 작동하지 않습니다. 이러한 간단한 작업에 최소한의 오버 헤드가 있습니다.

절대 위치 지정/너비를 시도했지만 텍스트를 오른쪽 정렬하고 바가 왼쪽의 같은 지점에서 만나는 것을 얻을 수 없습니다.

단순한 해결책을 알지 못하지만, 내가 보았을 때 텍스트가 오른쪽에 배치 된 요소 하나와 가능한 한 많은 공간을 차지하는 요소가 필요합니다. 그것은 색상을위한 ... 그리고 색상이있는 요소는 폭을 가질 수 있어야하고 텍스트는 그 옆에 따라야합니다.

감사합니다.

출처

2009-05-04 phillc

내 시도입니다. 참고 : 이것은 테이블을 사용하는 일부 반 테이블 열광 자들의 공포에. 수레는 테이블처럼 "사용 가능한 모든 공간을 차지하지"못합니다.

<html> 
<head> 
<style type="text/css"> 
table { width: 300px; background: #DDD; empty-cells: show; } 
th { padding-left: 8px; width: 100%; height: 1em; } 
td { padding-left: 12px; width: auto; } 
div { white-space: nowrap; } 
#row1 th { background: red; } 
#row2 th { background: blue; } 
#row3 th { background: green; } 
#row4 th { background: yellow; } 
#row5 th { background: pink; } 
#row6 th { background: gray; } 
</style> 
<script type="text/javascript" src="http://www.google.com/jsapi"></script> 
<script type="text/javascript"> 
google.load("jquery", "1.3.2"); 
google.setOnLoadCallback(function() { 
    $(function() { 
    $("th").animate({ width: 0 }, 2000); 
    }); 
}); 
</script> 
</head> 
<body> 
<table><tr id="row1"><th></th><td><div>FOO</div></td></tr></table> 
<table><tr id="row2"><th></th><td><div>BAR</div></td></tr></table> 
<table><tr id="row3"><th></th><td><div>THESE PRETZELS ARE</div></td></tr></table> 
<table><tr id="row4"><th></th><td><div>MAKING ME THIRSTY</div></td></tr></table> 
<table><tr id="row5"><th></th><td><div>BLAH</div></td></tr></table> 
<table><tr id="row6"><th></th><td><div>BLAH</div></td></tr></table> 
</body> 
</html>

는 그래서 여기있다, 꽤 잘 작동하는 그 일의 비 - 테이블 방식의 생각 :

<html> 
<head> 
<style type="text/css"> 
div div { height: 1.3em; } 
#wrapper { width: 300px; overflow: hidden; } 
div.text { float: right; white-space: nowrap; clear: both; background: white; padding-left: 12px; text-align: left; } 
#row1, #row2, #row3, #row4, #row5, #row6 { width: 270px; margin-bottom: 4px; } 
#row1 { background: red; } 
#row2 { background: blue; } 
#row3 { background: green; } 
#row4 { background: yellow; } 
#row5 { background: pink; } 
#row6 { background: gray; } 
</style> 
<script type="text/javascript" src="http://www.google.com/jsapi"></script> 
<script type="text/javascript"> 
google.load("jquery", "1.3.2"); 
google.setOnLoadCallback(function() { 
    $(function() { 
    $("div.text").animate({ width: "90%" }, 2000); 
    }); 
}); 
</script> 
</head> 
<body> 
<div id="wrapper"> 
<div class="text">FOO</div><div id="row1"></div> 
<div class="text">BAR</div><div id="row2"></div> 
<div class="text">THESE PRETZELS ARE</div><div id="row3"></div> 
<div class="text">MAKING ME THIRSTY</div><div id="row4"></div> 
<div class="text">BLAH</div><div id="row5"></div> 
<div class="text">BLAH</div><div id="row6"></div> 
</div> 
</body> 
</html>

출처

2009-05-04 15:26:37 cletus

텍스트가 약간 어색하고 중심에 서있는 것처럼 보입니다 ... 나는 당신의 아이디어를 받아서 내 솔루션에 병합 할 수 있는지 보려고합니다. – phillc

어떤 텍스트가 중앙에있는 것처럼 보입니까? – cletus

그는 테이블 버전에 대해 이야기하고 있습니다. CSS 버전이 더 잘 작동합니다. – KyleFarris

색상 막대는 특정 폭, 또는 단지를 작성해야합니까 오른쪽의 단어와 왼쪽의 원점 사이의 간격?

<style> 

#container {width: 50%; 
      margin: 0 auto; 
     } 

span {width: 100%; 
     display: block; 
     text-align: right; 
     margin: 0.2em 0; 
     } 

span p {text-align: right; 
     background-color: #fff; 
     color: #333; 
     display: inline-block; 
     padding: 0 0 0 0.4em; 
     line-height: 1.4em; 
     font-weight: bold; 
     } 

span#foo {background-color: #f00; 
     } 
span#bar {background-color: #0f0; 
     } 
span#foobar {background-color: #00f; 
     } 

</style> 



<div id="container"> 
    <span id="foo"> 
     <p>foo</p> 
    </span> 
    <span id="bar"> 
     <p>bar</p> 
    </span> 
    <span id="foobar"> 
     <p>foobar</p> 
    </span> 

</div>

근무 데모 : 내 가정의 올바른가 있다고 가정 http://davidrhysthomas.co.uk/so/colouredfoobars.html

출처

2009-05-04 15:27:57

순간에 시도 할 것입니다. – phillc

아아, 나는 이와 같은 방법을 고쳤다. 1 단계에서는 작동하지만 자바 스크립트를 애니메이션으로 설정하려면 어떻게해야합니까? 단어가 가변 너비이기 때문에 전체 너비가 어떤 너비인지 알 수 없습니다. – phillc

... 질문을 제대로 읽어야합니다 ... JS 부분을 완전히 놓쳤습니다. ... 음, 내 기억 상실증 ... O.o –

이 테스트하고 완벽하게 작동합니다 (더 바보 테이블없는 매우 간단한 CSS/jQuery를)

<style type="text/css"> 
    .crazy_slider { display:block; height:25px; width:500px; clear:both; position:relative; z-index:0; text-decoration:none; } 
    .crazy_slider_text { position:absolute; right:0px; top:0px; height:100%; background-color:white; color:#666; font-size:1em; display:block; text-align:left; z-index:1px; padding-left:10px; } 
    #red { background-color:red; } 
    #blue { background-color:blue; } 
    #green { background-color:green; } 
    #yellow { background-color:yellow; } 
    #pink { background-color:pink; } 
    #grey { background-color:grey; } 
</style> 


<script type="text/javascript"> 
    $(function() { 
     $('.crazy_slider').hover(
      function() { 
       var bar_width = $(this).width(); 
       var $crazy_slider_text = $(this).children('.crazy_slider_text'); 
       if($crazy_slider_text.data('original_width') == null || $crazy_slider_text.data('original_width') == undefined || !$crazy_slider_text.data('original_width')) { 
        var original_width = $crazy_slider_text.width(); 
        $crazy_slider_text.data('original_width',original_width); 
       } 
       $crazy_slider_text.stop().animate({width:95+'%'},500); 
      }, 
      function() { 
       var $crazy_slider_text = $(this).children('.crazy_slider_text'); 
       var text_width = $crazy_slider_text.data('original_width'); 
       $crazy_slider_text.stop().animate({width:text_width+"px"},500); 
      } 
     ); 
    }); 
</script> 


<a href="#" class="crazy_slider" id="red"><div class="crazy_slider_text">FOO</div></a> 
<a href="#" class="crazy_slider" id="blue"><div class="crazy_slider_text">BAR</div></a> 
<a href="#" class="crazy_slider" id="green"><div class="crazy_slider_text">BAZ</div></a> 
<a href="#" class="crazy_slider" id="yellow"><div class="crazy_slider_text">FOOBAR</div></a> 
<a href="#" class="crazy_slider" id="pink"><div class="crazy_slider_text">FOOBARBAZ</div></a> 
<a href="#" class="crazy_slider" id="grey"><div class="crazy_slider_text">BAZAGAIN</div></a>

편집 : 나는 네가 이런 종류의 네비게이션 요소를 만들려고하고 있었으므로 마우스 상호 작용 로직을 추가했다. 어쨌든, 그것은 유용 할 수 있습니다, 하하?

두 번째 편집 : 누군가가 신경 쓰면 코드가 더 효율적이고 예측 가능하도록 변경되었습니다. ;)

출처

2009-05-04 15:43:00 KyleFarris

오, 아주 좋은. 주어진 답변으로, 내 토론은 기본적으로 : 간단한 HTML 대 간단한 자바 스크립트입니다. – phillc

나는 레이아웃을 위해 테이블을 사용하지 않았기 때문에 특히 이것을 좋아한다. 나는 사람들이 아직도 레이아웃을위한 테이블을 사용하는 솔루션을 게시하고 있다는 것을 믿을 수 없다. 또한 DOM 노드에 데이터를 저장하는 대신 jquery 데이터 API를 사용하는 것을 좋아합니다 (다시 말해서 1998-ish). 잘 했어. – Amit

@phillc - 그래, 내 코드는 좀 더 미친 짓이지만 훨씬 더 많은 일을한다. 나는 당신이 무엇을 할 것인지에 대해 확신하지 못한다. 그러나 당신은 단지 상호 작용이 아닌 단순한 애니메이션을 원했던 것처럼 보인다. 멋지다. 그러나 어떤 호버 효과를 추가하고 싶다면 어디를 가야하는지 알 수 있습니다. ;-) – KyleFarris

너비가 HTML 요소를 흡수 중입니다.

답변

관련 문제