Tôi đang chia sẻ một đoạn mã jQuery đơn giản ở đây cho thấy bạn có thể di chuyển một phần tử một cách dễ dàng và hiệu quả như thế nào tại vị trí nhấp chuột.

Bạn đang xem : jquery khi di chuyển chuột

Hãy để chúng tôi giả sử, bạn có phần tử DIV trên trang web của mình và bạn muốn hiển thị phần tử này tại vị trí nhấp chuột. Làm thế nào để bạn làm điều này? Tôi đang chia sẻ một đoạn mã jQuery đơn giản ở đây cho biết bạn có thể di chuyển một phần tử một cách dễ dàng và hiệu quả như thế nào tại vị trí nhấp chuột.

Di chuyển DIV tại Vị trí Chuột khi Sự kiện Nhấp chuột

Trong ví dụ này, tôi đang sử dụng hàm jQuery .click () để di chuyển & amp; ltdiv & gt; tại vị trí nhấp chuột ở bất kỳ đâu trên trang web.

& amp; lthtml & gt;
& amp; lthead & gt;
    & amp; lttitle & gt; Di chuyển DIV đến Vị trí Nhấp chuột bằng jQuery & amp; lt / title & gt;
    & amp; ltscript src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" & gt; & amp; lt / script & gt;
    & amp; ltscript src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" & gt; & amp; lt / script & gt;
& amp; lt / head & gt;
& amp; ltbody & gt;
    & amp; ltp & gt;
        Nhấp vào bất kỳ đâu trên trang!
    & amp; lt / p & gt;

    & amp; ltdiv id = "divContainer"
        style = "width: 100px;
            chiều cao: 100px;
            line-height: 100px;
            bán kính biên giới: 50%;
            background-color: xanh lá cây;
            

display: none;

"& gt; & amp; lt / div & gt; & amp; lt / body & gt; & amp; ltscript & gt; $ (tài liệu).

đã sẵn sàng

(function () { $ ('body').

nhấp vào

(function (

e

) { $ ("# divContainer") .

css

({ vị trí: 'tuyệt đối', left: e.pageX, đầu trang: e.pageY, display: 'block' }) .hide ('bùng nổ', {miếng: 150}, 700); }); }); & amp; lt / script & gt; & amp; lt / html & gt;

Hãy thử

Bí quyết hay tôi nên nói, phương pháp, rất đơn giản. Tôi đang sử dụng phương thức jQuery

.css ()

trong mã của mình, để gán một

vị trí mới

cho & amp; ltdiv & gt; yếu tố. Phương thức có ít giá trị (hoặc thuộc tính) như, vị trí, bên trái, trên cùng và hiển thị (tùy chọn).

Xem Thêm  Cách nhận giá trị của trường nhập văn bản bằng JavaScript - html nhận giá trị đầu vào

Tôi đã đặt vị trí

tuyệt đối . Hàm

$ (‘body’). Click ()

có một tham số

e

(hoặc sự kiện). Do đó, khi bạn nhấp vào (bất kỳ đâu) trên trang web của mình, nó sẽ trả về tất cả các sự kiện

được liên kết với nó. Bạn có thể kiểm tra

danh sách sự kiện

trong cửa sổ bảng điều khiển của trình duyệt.

$ ('body'). click (function (e) {
    console.log (e);
}); 

Trong danh sách, bạn sẽ tìm thấy các thuộc tính pageX và pageX. Sử dụng các thuộc tính này, tôi đang chỉ định lại các thuộc tính bên trái và trên cùng của & amp; ltdiv & gt; phần tử.

.css ({
    vị trí: 'tuyệt đối',
    trái: 

e.pageX

, đầu trang:

e.pageY

, display: 'block' })

Thực hiện theo Con trỏ chuột và Định vị DIV bằng jQuery

Làm thế nào về việc theo dõi con trỏ, nơi con trỏ di chuyển trên trang web của bạn. Bây giờ, chúng ta hãy tạo & amp; ltdiv & gt; phần tử theo con trỏ chuột. Mã giống như ví dụ trên. Ngoại trừ, tôi sẽ viết mã bên trong hàm $ (body) .mousemove ().

Lưu ý : Mặc dù, tiêu đề của bài đăng này nói rằng Nhấp chuột, đây chỉ là một ví dụ khác mà tôi nghĩ sẽ hữu ích cho người mới bắt đầu.

& amp; lthtml & gt;
& amp; lthead & gt;
    & amp; ltscript src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" & gt; & amp; lt / script & gt;
& amp; lt / head & gt;
& amp; ltbody & gt;
    & amp; ltp & gt; Di chuyển con trỏ trên phần này của trang! Phần tử DIV sẽ theo sau con trỏ. & Amp; lt / p & gt;

    & amp; ltdiv id = "divContainer"
        style = "width: 100px;
        chiều cao: 100px;
        line-height: 100px;
        bán kính biên giới: 50%;
        text-align: center;
        background-color: màu vàng;
        display: none; "& gt;
    & amp; lt / div & gt;
& amp; lt / body & gt;
& amp; ltscript & gt;
    $ (tài liệu). 

đã sẵn sàng

(function () { $ ('body'). mousemove (function (e) { $ ("# divContainer") .

css

({ vị trí: 'tuyệt đối', trái:

e.pageX

, đầu trang:

e.pageY

, display: 'block' }) .

html

('x:' + e.pageX + ', y:' + e.pageY); }); }); & amp; lt / script & gt; & amp; lt / html & gt;

Hãy thử

Hy vọng bạn thích các ví dụ này. Đây là một số mã thú vị sử dụng jQuery và một chút CSS. Tuy nhiên, tôi chắc chắn rằng bạn có thể làm cho các mã hữu ích hơn. Cảm ơn vì đã đọc☺.

Xem Thêm  snabbdom/snabbdom: A virtual DOM library with focus on simplicity, modularity, powerful features and performance. - virtual dom

← Trước Tiếp theo →



Xem thêm những thông tin liên quan đến chủ đề jquery khi di chuyển chuột

jQuery to detect which mouse button clicked

  • Tác giả: kudvenkat
  • Ngày đăng: 2015-04-26
  • Đánh giá: 4 ⭐ ( 4627 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Link for all dot net and sql server video tutorial playlists
    https://www.youtube.com/user/kudvenkat/playlists?sort=dd&view=1

    Link for slides, code samples and text version of the video
    http://csharp-video-tutorials.blogspot.com/2015/04/jquery-to-detect-which-mouse-button.html

    Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.
    https://www.youtube.com/channel/UC7sEwIXM_YfAMyonQCrGfWA/?sub_confirmation=1

    In this video we will discuss, how to detect which mouse button is clicked using jQuery.

    With raw JavaScript event object : Depending on the browser, event.button or event.which properties of the event object are used to determine which mouse button is clicked.

    IE 8 & earlier versions use event.button property
    Left Button 1
    Middle Button 4
    Right Button 2

    IE 9 & later versions and most other W3C compliant browsers use event.which property
    Left Button 1
    Middle Button 2
    Right Button 3

    If you are using raw JavaScript event object, the following is the amount of code that you have to write to detect which mouse button is clicked. This code works in all browsers.

    <html>
    <head>
    <title></title>
    <script src=”jquery-1.11.2.js”></script>
    <script type=”text/javascript”>
    function whichMouseButtonClicked(event) {
    var whichButton;
    if (event.which) {
    switch (event.which) {
    case 1: whichButton = “Left Button Clicked”; break;
    case 2: whichButton = “Middle Button Clicked”; break;
    case 3: whichButton = “Right Button Clicked”; break;
    default: whichButton = “Invalid Button Clicked”; break;
    }
    }
    else {
    switch (event.button) {
    case 1: whichButton = “Left Button Clicked”; break;
    case 4: whichButton = “Middle Button Clicked”; break;
    case 2: whichButton = “Right Button Clicked”; break;
    default: whichButton = “Invalid Button Clicked”; break;
    }
    }

    document.getElementById(‘divResult’).innerHTML = whichButton;
    }
    </script>
    </head>
    <body style=”font-family:Arial”>
    <input id=”btn” type=”button” value=”Click Me”
    onmouseup=”whichMouseButtonClicked(event)” />
    <br /><br />
    <div id=”divResult”></div>
    </body>
    </html>

    jQuery normalizes which property of the event object so it will work across all browsers. The amount of code you have to write is lot less.

    <html>
    <head>
    <title></title>
    <script src=”jquery-1.11.2.js”></script>
    <script type=”text/javascript”>
    $(document).ready(function () {
    $(‘btn’).mouseup(function (event) {
    switch (event.which) {
    case 1: whichButton = “Left Button Clicked”; break;
    case 2: whichButton = “Middle Button Clicked”; break;
    case 3: whichButton = “Right Button Clicked”; break;
    default: whichButton = “Invalid Button Clicked”; break;
    }
    $(‘divResult’).html(whichButton);
    });
    });
    </script>
    </head>
    <body style=”font-family:Arial”>
    <input id=”btn” type=”button” value=”Click Me” />
    <br /><br />
    <div id=”divResult”></div>
    </body>
    </html>

jQuery event: Sự kiện trong jQuery

  • Tác giả: freetuts.net
  • Đánh giá: 4 ⭐ ( 2029 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Sự kiện trong jQuery là gì? Danh sách tất cả các sự kiện thường dùng trong jQuery, cách thêm sự kiện và cách bỏ sự kiện bàng jQuery cực kì đơn giản

Phương Thức Sự Kiện Trong jQuery

  • Tác giả: www.codehub.com.vn
  • Đánh giá: 3 ⭐ ( 2589 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Chúng ta có khả năng tạo các trang web động bằng cách sử dụng các sự kiện. jQuery được thiết kế riêng để đáp ứng các sự kiện trong một trang HTML.

.mouseenter() trong jQuery

  • Tác giả: hoclaptrinh.vn
  • Đánh giá: 4 ⭐ ( 3838 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: .mouseenter(): Ràng buộc một xử lý tới một sự kiện mouseenter (di chuyển chuột vào thành phần), hoặc kích hoạt sự kiện mouseenter lên một thành phần.

Sự kiện trong jQuery, tìm hiểu Mouse event, Keyboard Event

  • Tác giả: thuthuat.taimienphi.vn
  • Đánh giá: 5 ⭐ ( 7002 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: su kien trong jquery, Sự kiện trong jQuery, tìm hiểu Mouse event, Keyboard Event

Sử dụng sự kiện trong jquery

  • Tác giả: levunguyen.com
  • Đánh giá: 5 ⭐ ( 3031 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Sử dụng Sự kiện trong trong jquery làm các dự án làm web. Hướng dẫn Sử dụng sự kiện trong Jquery vào dự án web.

Đặt tiêu điểm chuột và di chuyển con trỏ đến cuối đầu vào bằng jQuery

  • Tác giả: qastack.vn
  • Đánh giá: 3 ⭐ ( 4437 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Có vẻ như việc xóa giá trị sau khi lấy nét và sau đó đặt lại…

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  css border-top-left-radius - bán kính trên cùng bên trái của đường viền

By ads_php