CSS3 및 jQuery는 마우스 방향을 따르는 호버 효과를 구현합니다.

이 글에서는 CSS3와 jQuery를 기반으로 마우스 방향을 따라가는 호버 효과 구현 관련 내용을 주로 소개합니다. 필요하신 분들은 참고하시면 됩니다.

오늘은 CSS3와 jQuery의 특징을 활용하여 마우스 슬라이딩 방향을 감지하는 호버 효과. 마우스가 슬라이드 인되면 마스크 레이어는 마지막 마우스 슬라이드 아웃 방향에서 슬라이드 인됩니다. 마우스가 슬라이드 아웃되면 마스크 레이어는 마우스를 따라 마우스 슬라이드 아웃 방향에서 슬라이드 아웃됩니다. 이것은 매우 흥미로운 효과입니다.
미리 보기를 구성하고 마스크 레이어를 설명하기 위해 순서가 지정되지 않은 목록을 사용합니다.

<ul id="da-thumbs" class="da-thumbs">
<li>
<a href="http://dribbble.com/shots/502538-Natalie-Justin-Cleaning">
<img src="images/7.jpg" />
<p><span>Natalie & Justin Cleaning by Justin Younger</span></p>
</a>
</li>
<li>
<!-- ... -->
</li>
<!-- ... -->
</ul>

설명 마스크 레이어를 절대적으로 배치하기 때문에 이러한 목록 항목은 왼쪽에 떠 있고 상대적으로 배치됩니다.

.da-thumbs li {
float: left;
margin: 5px;
background: #fff;
padding: 8px;
position: relative;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.da-thumbs li a,
.da-thumbs li a img {
display: block;
position: relative;
}
.da-thumbs li a {
overflow: hidden;
}
.da-thumbs li a p {
position: absolute;
background: rgba(75,75,75,0.7);
width: 100%;
height: 100%;
}

다음으로 다음 작업을 수행합니다. 마우스가 들어가는 위치에 따라 "from" 스타일을 마스크 레이어에 적용하여 마스크 레이어의 초기 위치를 설정합니다. 그런 다음 전환을 사용하고 최종 상태에 대한 스타일을 추가하겠습니다. 이렇게 하면 마스크 레이어가 안으로 들어가게 됩니다. 요소를 떠날 때 "from" 스타일을 마스크 레이어에 다시 적용하고(이제 실제로는 슬라이드 아웃되지만) 이전 최종 상태 스타일을 제거합니다.

다음은 이 작은 플러그인의 핵심입니다:

this.$el.on( 'mouseenter.hoverdir, mouseleave.hoverdir', function( event ) {
var $el = $( this ),
$hoverElem = $el.find( 'p' ),
direction = self._getDir( $el, { x : event.pageX, y : event.pageY } ),
styleCSS = self._getStyle( direction );
if( event.type === 'mouseenter' ) {
$hoverElem.hide().css( styleCSS.from );
clearTimeout( self.tmhover );
self.tmhover = setTimeout( function() {
$hoverElem.show( 0, function() {
var $el = $( this );
if( self.support ) {
$el.css( 'transition', self.transitionProp );
}
self._applyAnimation( $el, styleCSS.to, self.options.speed );
} );
}, self.options.hoverDelay );
}
else {
if( self.support ) {
$hoverElem.css( 'transition', self.transitionProp );
}
clearTimeout( self.tmhover );
self._applyAnimation( $hoverElem, styleCSS.from, self.options.speed );
}
} );

우리는 주로 'mouseenter' 및 'mouseleave' 이벤트를 목록 항목에 바인딩합니다. _getDir 함수를 통해 마우스를 가져옵니다. 안쪽 또는 바깥쪽 방향으로 슬라이딩합니다(감지 영역을 4개의 삼각형으로 나누어진 직사각형으로 상상해 보세요).

두 번째 데모에서는 마우스가 한 모서리에서 다른 모서리로 이동할 때 애니메이션이 많이 발생하지 않도록 지연을 추가한 것을 볼 수 있습니다.
이 작은 특수 효과가 마음에 들고 유용하길 바랍니다!

브라우저가 CSS 전환을 지원하지 않으면 jQuery 애니메이션이 사용됩니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

관련 권장 사항:

jQuery 슬라이딩 버튼 스위치를 구현하는 방법

JavaScript는 브라우저가 CSS3 속성을 지원하는지 여부를 어떻게 결정합니까?

위 내용은 CSS3 및 jQuery는 마우스 방향을 따르는 호버 효과를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!