简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
집> 웹 프론트엔드> JS 튜토리얼> 본문

jQuery/Vue的鼠标移入移出效果

不言
풀어 주다： 2018-07-09 15:04:14
원래의
3013명이 탐색했습니다.

这篇文章主要介绍了关于jQuery/Vue的鼠标移入移出效果 ，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

实现思路

1、根据鼠标的位置定位在元素内出现的方向
2、根据方向动态设置遮罩层样式
3、设置动画移动遮罩层

jQuery版

jQuery插件可以通过$.fn.extend方法进行拓展。

html

 
 
 
mouse hover
 
 
 
 
 
mouse hover
 
 
 
 
 
mouse hover
 
 
 
 
 
mouse hover
 
 
 
 
 
mouse hover
 
 
 
 
 
mouse hover
로그인 후 복사

css

.container { width: 600px; margin: auto; margin-top: 100px; } .content { float: left; position: relative; height: 150px; width: 150px; margin: 20px; overflow: hidden; background: #ccc; } .content .shade { position: absolute; top: 0; display: none; width: 100%; height: 100%; line-height: 100px; color: #fff; background: rgba(0, 0, 0, 0.7); }
로그인 후 복사

js

로그인 후 복사

Vue版

通用Vue的组件实现判断元素内鼠标的位置，利用插槽的方式显示遮罩层内容。

html

  
mouse hover
   
mouse hover
   
mouse hover
   
mouse hover
   
mouse hover
   
mouse hover
로그인 후 복사

css

로그인 후 복사

js
로그인 후 복사

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

JS字符串转数字的方法

위 내용은 jQuery/Vue的鼠标移入移出效果의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
jquery 제이쿼리 플러그인 vue.js
원천：php.cn
이전 기사：jQuery中css()和attr()方法的区别 다음 기사：jquery源码的基本介绍
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
경로에 액세스하기 전에 경로 데이터를 미리 로드하는 가장 좋은 방법입니다. 특정 경로에 대한 페이지를 렌더링하기 전에 먼저 필요한 데이터를 동기식으로 가져오고 싶습니다. 이상적으로는 페이지 구성 요소에서 데이터를 가져오고 싶지만 라우터 ...
에서 2023-11-17 14:54:42
0
2
379
Guzzle 예외 잡기 개발 중인 API에서 실행되는 일련의 테스트에서 예외를 포착하려고 하며 Guzzle을 사용하여 API 메서드를 사용하고 있습니다. 테스트를 try/catch 블록...
에서 2023-11-16 14:36:03
0
12
290
AJAX, PHP 및 서버 전송 이벤트를 사용하여 OpenAI API에서 데이터 스트리밍 SSE(Server Sent Events)를 사용하여 JavaScript 및 PHP를 사용하는 위 API의 데이터를 브라우저 클라이언트로 스트리밍하려면 어떻게 해...
에서 2023-11-11 12:03:23
0
1
497
Vue 개발 도구의 구성 요소 옆에 있는 성능 수치는 무엇입니까? Vue 개발 도구의 특정 기능에 대한 통찰력이나 리소스를 갖고 있는 사람이 있나요? 구성 요소 창에는 구성 요소가 표시되고 작은 빨간색과 노란색 사각형이 표시되며...
에서 2023-11-09 14:46:48
0
1
305
PHP 버전 8.1로 롤백하는 방법: Docker phpdockerio/php:8.1-fpm 빌드는 PHP 버전 8.2를 사용합니다. 저는 PHP-FPM 도커 컨테이너에서 프로젝트를 실행하고 있습니다(아래 구성 파일에 대한 세부정보 참조). 컨테이너를 빌드하고 Composer를 실행하려고 하면 ...
에서 2023-11-05 09:52:26
0
1
282
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！