컨트롤이 포커스를 가져올 때 하이라이트 애니메이션을 만드는 방법

-6

CSS와 자바 스크립트를 사용하여 포커스를 얻을 때 hightlight html 입력을 만들고 싶습니다. 입력을 통해 점을 강조 표시합니다.컨트롤이 포커스를 가져올 때 하이라이트 애니메이션을 만드는 방법

텍스트 입력에 초점이 맞춰지고 각 모서리에 4 분의 1 프레임 (L)이 놓이면 다른 입력에 초점이 맞춰지면 해당 포커스 (L)가 새 포커스가있는 컨트롤에서 찾을 양식으로 이동합니다.

이미지를 게시하고 싶지만 충분한 평판 포인트를 얻지 못했습니다.

나를 어떻게 안내 할 수 있습니까?

감사

출처

2013-07-06 Mauricio Arias

http://google.com – iConnor

$ ('element'). focus (function() {// Your Code}); - 작동 안함 ? –

왜 작동할까요? jQuery에 관해서는 여기서 아무런 논의가 없었다. – iConnor

직접 할 수 있습니다.

먼저 당신이 HTML에있는 네 개의 corner's 하이라이트를 그릴 수 있습니다

<img id="clt" src="img/clt.png" border="0" style="position:absolute;visibility:hidden"></span> 
<img id="crt" src="img/crt.png" border="0" style="position:absolute;visibility:hidden"></span> 
<img id="crb" src="img/crb.png" border="0" style="position:absolute;visibility:hidden"></span> 
<img id="clb" src="img/clb.png" border="0" style="position:absolute;visibility:hidden"></span>

후, 자바 스크립트 함수를 만들 :

function getFocusFunct(){ 
    $("input[type=text], input[type=password], textarea").focus(function(){ 
     var ctl=$(this); 
     var offset=ctl.offset(); 

     var clt=$("#clt"); 
     var crt=$("#crt"); 
     var crb=$("#crb"); 
     var clb=$("#clb"); 

     clt.css('visibility','visible'); 
     crt.css('visibility','visible'); 
     crb.css('visibility','visible'); 
     clb.css('visibility','visible'); 

     clt.animate({top:offset.top-3, left:offset.left-3}, 150); 
     crt.animate({top:offset.top-3, left:offset.left+ctl.outerWidth()-4}, 150); 
     crb.animate({top:offset.top+ctl.outerHeight()-4,left:offset.left+ctl.outerWidth()-4}, 150); 
     clb.animate({top:offset.top+ctl.outerHeight()-4,left:offset.left-3}, 150); 
    }); 
    $("input[type=text], input[type=password], textarea").blur(function(){ 
     clt.css('visibility','hidden'); 
     crt.css('visibility','hidden'); 
     crb.css('visibility','hidden'); 
     clb.css('visibility','hidden'); 
    }); 
}

오기 '슈퍼 멋진 효과를! 사용해보기 :)

출처

2013-07-07 04:00:29

어떤 이유로 자바 스크립트를 사용하는 경우 나도 몰라,하지만 당신은 그냥 평범한 CSS로 강조 중점을 처리 할 수 있습니다.

input[type="text"]:focus, 
textarea:focus, 
select:focus 
{ 
    border-color:#0cf; 
    /* etc... */ 
}

간단한 입력의 경계를 강조/색상 것

, 깨끗한

편집 :

enter image description here

나는 그것을 할 수있는 상상하지만 더 내 CSS 기술보다.

내 유일한 CSS 생각은 일종의 Gradient이지만 그라데이션 외곽선을 사용할 수 있다고 생각하지 않습니다. 그리고 당신은 브라우저 전체를 다루지 못할 것입니다.

이미지를 왼쪽 및 오른쪽으로 놓아서 :before and :after으로 할 수 있습니다.

자바 스크립트를 사용하면 볼 수있는 Malsup plugin이 있지만 그 이미지와 정확히 일치하는 것은 없습니다.

출처

2013-07-06 18:56:30 Sp3igel

아마 내가 원하는 것을 충분히 설명하지 못했을 것입니다. –

테두리를 강조 표시하지 않으려는 경우 CSS를 통해 다른 장식을 할 수 있습니다. 방금 구문 예제로주었습니다. 하나의 코너에만 영향을 미칠 수 있습니다. 반경 등을 사용하십시오. – Sp3igel

어쩌면 내가 원하는 것을 충분히 설명하지 못했을 것입니다. 내가 원하는 것은 텍스트 입력에 4 분의 1 프레임 (L)을 집중시킬 때 각 모서리에서 찾을 수 있고 다른 입력에 초점이 맞춰지면 양식을 통해 (L)이 움직여 새로운 초점을 맞춘 컨트롤을 찾을 수 있습니다. –

컨트롤이 포커스를 가져올 때 하이라이트 애니메이션을 만드는 방법

답변

관련 문제