키보드 이벤트로 효과가 커집니다.

마우스를 놓으면 점차적으로 이미지가 커지는 응용 프로그램이 있습니다. mouseover/mouseout 대신 키보드 이벤트 즉, 포커스/흐림 효과를 사용하여 비슷한 종류의 이미지가 커지고 싶습니다./ demo 키보드 이벤트로 효과가 커집니다.

내가 키보드 이벤트와 함께 할 수 같은 그래서 난 버튼 내부에 이미지를 배치하고 초점을 마우스 오버 /로 마우스를 교체하려면이 작업을 수행 흐리게 :

여기 이미지의 내 코드는 마우스 오버 /로 마우스와 함께 성장하다 mouseover/mouseout와 버튼 안에 이미지가 작동합니다. 나는 혼란스러워 도움을주십시오. demo1

출처

2011-01-06 rashmi

당신이 해결 방법을 생각하지 않는 경우 (이후 할 수 있습니다 직접적으로 focus 이미지 요소) : 다음과 같은 CSS와

<a href="#" class="foci"><img src="something.png" /></a>

a.foci { 
    cursor: default; 
} 
img { 
    display: block; 
    width: 100px; 
    height: 100px; 
    border: 1px solid #ccc; 
    background-color: #ffa; 
} 
a:focus img { 
    width: 200px; 
    height: 200px; 
}

JS Fiddle demo.

$('a:has(img)').focus(
    function(){ 
     $(this).find('img').animate(
      { 
       'width': '200px', 
       'height': '200px' 
      }, 1500); 
    }); 
$('a:has(img)').blur(
    function(){ 
     $(this).find('img').animate(
      { 
       'width': '100px', 
       'height': '100px' 
      }, 1500); 
    });

JS Fiddle demo :

편집

JQuery와 애니메이션 효과를 제공한다.

출처

2011-01-06 08:59:06

답장을 보내 주신 David 께 감사드립니다. :) – rashmi

@rashmi, 전혀 문제 없음. jQuery 관련 애니메이션 효과에 대한 편집 참조 =) –

네 도움에 감사드립니다. David 당신이 마음을 모르면 jsfiddle 자체의 html 섹션에 완전한 코드를 붙여 넣을 수 있습니까? 너를 괴롭히지 않아서 미안해. – rashmi

이미지에 "초점"을 설정할 수 없습니다. 입력이있는 양식 요소 만 키보드의 포커스가 될 수 있으므로 이미지는 포커스 또는 흐림 이벤트의 원인이 될 수 없습니다.

출처

2011-01-06 08:32:45

답변에 동의하므로 버튼 안에 이미지 만 넣습니다. 지금 버튼이 바로 포커스를 얻습니다. 심지어 버튼은 포커스/흐림 속성을 사용하여 크기가 증가하지 않지만 mouseover/mouseout을 사용하여 버튼의 크기가 커지면 커집니다. 당신이 내 포인트를 지금 가지고 있기를 바랍니다. – rashmi

당신의 하드 드라이브가 내 컴퓨터에 마운트되어 있지 않다는 것을 알기 때문에'F : \ rashmi \ icons_tv \ Help_Normal.png'는 당신의 데모에서 볼 수있는 이미지가 아닙니다. 그 외에도 사람들은 이미지에 집중할 수 있다고 기대하지 않습니다. 그렇다면 왜 이것을 요구합니까? –

키보드 이벤트만으로 응용 프로그램을 만들고 싶습니다. 내 응용 프로그램의 일부로 이미지를 점차적으로 지정된 크기까지 성장 싶어요. – rashmi

키보드 이벤트로 효과가 커집니다.

답변

관련 문제