Bài viết này tôi sẽ hướng dẫn sơ qua cho các bạn cách di chuyển phần tử theo con trỏ với method .offset() và event .pageX, .pageY , .mousemove() trong jQuery.
Trước hết chúng ta tìm hiểu qua một chút về các giá trị trên :
| Giá trị | Định nghĩa |
|---|---|
| document | Là toàn bộ khung trình duyệt chứa trang web (tính cả phần dưới thanh cuộn). |
| .offset() | Trả lại giá trị vị trí của phần tử tham chiểu theo document, offset().left và offset().top . |
| event.pageX | Trả lại giá trị vị trí của con trỏ tham chiểu theo chiều ngang của document. |
| event.pageY | Trả lại giá trị vị trí của con trỏ tham chiểu theo chiều dọc của document. |
| .mousemove() | Thi hành hàm bên trong nó khi di chuột vào phần tử. |
Bây giờ giả sử ta có 2 phần tử như sau :
1 2 3 | <div class="main"> <div class="box"></div></div> |
Bây giờ ta muốn khi di chuột vào main thì box sẽ di chuyển theo con chuột trong phạm vi bên trong giới hạn của main giống như ở đây. Trước tiên ta xem hình dưới đây:
Ta có mã css sau :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | .main{ position:relative; width:800px; height:800px; margin:100px auto; background-color:#e1e1e1;}.box{ background-color:red; width:100px; height:100px; position:absolute; display:none;} |
Chú ý ẩn box đi với display:none. Sau đây ta sẽ sử dụng jquery để khi di chuột vào main thì box sẽ xuất hiện và di chuyển theo con trỏ khi ta di chuột.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | $('.main').mousemove(function(e){ el = $(this); $('.box').css({ 'display':'block', 'left': e.pageX - el.offset().left, 'top': e.pageY - el.offset().top, })});$('.main').mouseleave(function(){ $('.box').css({ 'display':'none' })}) |
Bên trong nguồn còn có một demo ứng dụng nhỏ về di chuyển phần tử khi di chuột. Hi vọng bài viết giúp ích được cho các bạn!
nguồn:zlatanblog.com
Không có nhận xét nào:
Đăng nhận xét