마우스 움직임을 따르도록 div를 구현하는 jQuery의 코드 예
이전 글에서는 JavaScript로 마우스 따라가기 구현 예를 자세히 분석했는데, 오늘은 마우스 움직임을 따라가기 위해 jQuery를 DIV로 구현한 사례를 소개해드리겠습니다.
핵심은! 마우스의 현재 위치와 이동 후의 위치, p의 현재 위치와 이동 후의 위치를 얻으려면:
jQuery를 사용하여 p가 마우스 자체의 위치가 아니라 마우스의 움직임에 따라 움직인다는 것을 알아보세요! ! 하지만 이전 위치를 기준으로 p의 움직임
코드는 다음과 같습니다. (녹색 부분의 설명에 주의하세요)
더 많은 특수 효과 리소스를 보려면 php 특수 효과 다운로드 채널을 방문하세요: 마우스 특수 효과
<!DOCTYPE html>
<html>
<head>
<meta charset="{utf-8}">
<title></title>
<script src="../jquery-3.2.0.js"></script>
<style>
.aa{
height: 100px;
width: 200px;
position: absolute;
background-color: green;
}
</style>
</head>
<body>
<p class="aa"></p>
</body>
</html>
<script>
$(".aa").mousedown(function(e){
//设置移动后的默认位置
var endx=0;
var endy=0;
//获取p的初始位置，要注意的是需要转整型，因为获取到值带px
var left= parseInt($(".aa").css("left"));
var top = parseInt($(".aa").css("top"));
//获取鼠标按下时的坐标，区别于下面的es.pageX,es.pageY
var downx=e.pageX;
var downy=e.pageY; //pageY的y要大写，必须大写！！
// 鼠标按下时给p挂事件
$(".aa").bind("mousemove",function(es){
//es.pageX,es.pageY:获取鼠标移动后的坐标
var endx= es.pageX-downx+left; //计算p的最终位置
var endy=es.pageY-downy+top;
//带上单位
$(".aa").css("left",endx+"px").css("top",endy+"px")
});
})
$(".aa").mouseup(function(){
//鼠标弹起时给p取消事件
$(".aa").unbind("mousemove")
})
</script>는 다음 코드 조각과 다릅니다. (최종 효과는 p가 마우스 위치에 따라 이동한다는 것입니다. 특정 효과를 보려면 붙여넣기, 복사 및 비교를 통해 차이점을 확인할 수 있습니다. )
<script>
$(".aa").mousedown(function(e){
$(document).bind("mousemove",function(e){
$(".aa").css("left",e.pageX).css("top",e.pageY)
});
})
$(".aa").mouseup(function(){
$(document).unbind("mousemove")
})
</script>요약:
이 기사는 샘플 코드를 사용하여 모든 사람에게 jQuery 구현을 소개합니다. 내 친구들은 마우스 움직임에 따른 DIV 사례에 대해 어느 정도 이해하고 있다고 믿습니다. 작업에 도움이 되기를 바랍니다~
관련 권장사항:
JQuery 효과를 기반으로 한 간단한 마우스 따라가는 프롬프트 효과
위 내용은 마우스 움직임을 따르도록 div를 구현하는 jQuery의 코드 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7675
15
1393
52
1207
24
91
11
73
19
Win11에서 작업 표시줄 축소판 미리 보기를 비활성화하는 방법은 마우스를 움직여 작업 표시줄 아이콘 표시 축소판 기술입니다.
Feb 29, 2024 pm 03:20 PM
이번 글에서는 Win11 시스템에서 작업 표시줄 아이콘을 마우스로 움직일 때 표시되는 썸네일 기능을 끄는 방법을 소개하겠습니다. 이 기능은 기본적으로 켜져 있으며 사용자가 작업 표시줄의 응용 프로그램 아이콘 위에 마우스 포인터를 올리면 응용 프로그램의 현재 창 축소판이 표시됩니다. 그러나 일부 사용자는 이 기능이 덜 유용하거나 경험에 지장을 준다고 생각하여 이 기능을 끄고 싶어할 수도 있습니다. 작업 표시줄 축소판은 재미있을 수도 있지만 주의를 산만하게 하거나 짜증나게 할 수도 있습니다. 이 영역 위로 마우스를 가져가는 빈도를 고려하면 실수로 중요한 창을 몇 번 닫았을 수도 있습니다. 또 다른 단점은 더 많은 시스템 리소스를 사용한다는 것입니다. 따라서 리소스 효율성을 높일 수 있는 방법을 찾고 있다면 비활성화하는 방법을 알려드리겠습니다. 하지만
HP, Professor 1 3가지 모드 소프트 마우스 출시: 4000DPI, Blue Shadow RAW3220, 초기 가격 99위안
Apr 01, 2024 am 09:11 AM
3월 31일 이 웹사이트의 소식에 따르면 HP는 최근 JD.com에서 검은색과 흰색 밀크티 색상으로 제공되는 Professor1 3모드 블루투스 마우스를 출시했으며 초기 가격은 99위안, 보증금 10위안이 필요합니다. . 보도에 따르면 이 마우스는 무게가 106g, 인체공학적 디자인을 채택하고 크기가 127.02x79.59x51.15mm이며 7가지 옵션 4000DPI 레벨을 갖추고 있으며 Blue Shadow RAW3220 센서가 장착되어 있으며 650mAh 배터리를 사용할 수 있다고 합니다. 한 번 충전으로 2개월 동안 사용할 수 있습니다. 본 사이트에 첨부된 마우스 매개변수 정보는 다음과 같습니다.
Razer | Pokémon Gengar 무선 마우스 및 마우스 패드가 현재 1,549위안의 가격으로 출시되었습니다.
Jul 19, 2024 am 04:17 AM
7월 12일 이 사이트의 뉴스에 따르면 Razer는 오늘 Razer|Pokémon Gengar 무선 마우스 및 마우스 패드 출시를 발표했습니다. 단일 제품 가격은 각각 1,299위안, 299위안이며, 두 제품을 포함한 패키지 가격은 1,549위안이다. Razer가 Gengar 공동 브랜드 주변 장치 제품을 출시한 것은 이번이 처음이 아닙니다. 2023년 Razer는 Gengar 스타일 Yamata Orochi V2 게임 마우스를 출시했습니다. 이번에 출시된 두 가지 신제품은 모두 고스트, 고스트, 젠가 계열의 외형과 유사한 진한 보라색 배경을 사용하며, 중간에 젠가라는 캐릭터를 중심으로 이 세 가지 포켓몬과 몬스터볼의 윤곽이 인쇄되어 있습니다. 고전적인 유령형 포켓몬의 크고 화려한 이미지. 이 사이트에서는 Razer|Pokémon Gengar 무선 마우스가 이전에 출시된 Viper V3 Professional Edition을 기반으로 한다는 사실을 발견했습니다. 전체 무게는 55g이며 Razer의 2세대 FOC가 탑재되어 있습니다.
VGN 공동 브랜드 'Elden's Circle' 키보드 및 마우스 시리즈 제품이 이제 출시되었습니다: Lani / Faded One 맞춤형 테마, 99위안부터 시작
Aug 12, 2024 pm 10:45 PM
8월 12일 이 웹사이트의 소식에 따르면 VGN은 8월 6일 Lani/Faded One의 맞춤형 테마로 디자인된 키보드, 마우스 및 마우스 패드를 포함하는 공동 "Elden Ring" 키보드 및 마우스 시리즈를 출시했습니다. 가격은 99위안부터 JD.com에 게시되었습니다. 이 사이트에 첨부된 공동 브랜드 신제품 정보는 다음과 같습니다. VGN丨Elden Law Ring S99PRO 키보드 이 키보드는 순수 알루미늄 합금 쉘을 사용하고 5층 소음기 구조로 보완되었으며 GASKET 판 스프링 구조를 사용하고 단일 -키 슬롯형 PCB 및 원래 높이의 PBT 소재 키캡, 알루미늄 합금 맞춤형 백플레인, VHUB에 연결된 SMARTSPEEDX 저지연 기술을 지원하며 가격은 549위안부터 시작됩니다. VGN丨Elden French Ring F1PROMAX 무선 마우스 더 마우스
Razer 마우스 드라이버는 어떤 폴더에 있나요?
Mar 02, 2024 pm 01:28 PM
많은 사용자는 Razer 드라이버로 설치한 파일이 어디에 있는지 모릅니다. 이러한 드라이버 파일은 일반적으로 컴퓨터의 C 드라이브인 시스템 디스크에 설치됩니다. 특정 위치는 프로그램 파일 아래의 RAZE 폴더에 있습니다. Razer 마우스 드라이버는 어떤 폴더에 있습니까? A: 시스템 C 드라이브의 프로그램 파일 아래 RAZE 폴더에 있습니다. 일반적으로 드라이버는 C 드라이브에 설치되며, 위치에 따라 찾으면 됩니다. Razer 마우스 드라이버 설치 방법 소개 1. 공식 홈페이지에서 파일을 다운로드한 후, 다운로드한 EXE 파일을 더블클릭하여 실행하세요. 2. 소프트웨어가 로드될 때까지 기다립니다. 3. 여기에서 설치하려는 드라이버를 선택할 수 있습니다. 4. 선택 후 오른쪽 하단의 "설치"를 클릭하세요.
6000mAh 실리콘 음극 배터리! Xiaomi 15Pro 업그레이드가 다시 유출되었습니다.
Jul 24, 2024 pm 12:45 PM
7월 23일 뉴스에 따르면 블로거 Digital Chat Station은 Xiaomi 15 Pro의 배터리 용량이 6000mAh로 증가하고 90W 유선 플래시 충전을 지원한다는 소식을 전했습니다. 이는 Xiaomi 디지털 시리즈 중 가장 큰 배터리를 탑재한 Pro 모델이 될 것입니다. Digital Chat Station은 이전에 Xiaomi 15Pro의 배터리가 초고에너지 밀도를 가지며 실리콘 함량이 경쟁 제품보다 훨씬 높다고 밝혔습니다. 2023년 실리콘 기반 배터리가 대규모로 테스트된 후, 2세대 실리콘 양극 배터리가 업계의 미래 발전 방향으로 확인되어 올해 직접 경쟁의 정점을 맞이할 것입니다. 1. 실리콘의 이론적인 그램 용량은 4200mAh/g에 도달할 수 있으며 이는 흑연의 그램 용량의 10배 이상입니다(흑연의 이론적인 그램 용량은 372mAh/g입니다). 음극의 경우 리튬이온 삽입량이 최대에 도달했을 때의 용량이 이론 그램 용량으로 동일 중량 하에서
Colourful, M900 Pro 무선 게임 마우스 출시: 오른손잡이용 인체공학적 모양, 8K 나노 수신기, 199위안부터 시작
Mar 23, 2024 pm 05:16 PM
3월 22일 이 웹사이트의 소식에 따르면 Delux는 오른손잡이용 인체공학적 모양의 M900Pro 무선 게이밍 마우스를 출시했습니다. 첫 번째 사전 판매 가격은 199위안부터 시작됩니다. 컬러풀한 M900Pro는 오른손잡이용 인체공학적으로 설계되었으며 중손부터 큰 손을 가진 사용자를 위해 제작되었습니다. 무게는 63g이며 무광택 UV 코팅이 도포되어 있습니다. 마우스는 PAW3395 센서를 사용하고 원래 Nano 수신기는 8000Hz 무선 반환 속도를 지원하며 Huannuo 블루 쉘 핑크 도트 마이크로 무브먼트가 장착되어 있으며 RGB 충전 베이스와 미끄럼 방지 스티커가 표준으로 제공됩니다. 또한 마우스는 LOD 조정, 전체 키 사용자 정의, 사용자 정의 리플 제어 및 직선 교정과 같은 기능도 지원합니다. 이 마우스에는 PTFE 풋 패드, 1.6m 낙하산 코드 및 내장형 수신기 보관함이 장착되어 있습니다. 이 사이트는 이 마우스의 특정 매개변수를 다음과 같이 요약합니다. 색상: 검정색, 흰색, 빨간색
국내 FPS의 새로운 왕! '델타 작전' 전장이 기대치를 뛰어넘는다
Mar 07, 2024 am 09:37 AM
'오퍼레이션 델타'는 오늘(3월 7일) '코드네임: ZERO'라는 대규모 PC 테스트를 시작한다. 지난 주말 이 게임은 상하이에서 오프라인 플래시몹 체험행사를 진행했는데, 17173도 행운을 빌어 참여하게 됐다. 이번 시험은 지난 시험으로부터 불과 4개월여밖에 남지 않은 상황인데, 이 짧은 시간 안에 '델타 작전'이 어떤 새로운 볼거리와 놀라움을 선사할지 궁금증을 자아낸다. 4개월여 전 오프라인 테이스팅 세션과 첫 번째 베타 버전에서 'Operation Delta'를 경험했습니다. 당시 게임은 '위험한 액션' 모드만 열었습니다. 그러나 델타 작전은 당시로서는 이미 인상적이었습니다. 주요 제조사들이 모바일 게임 시장에 몰려드는 상황에서 국제 표준에 버금가는 FPS
