STDIO
Tìm kiếm gần đây
    • Nội dung
    • QR Code
    • 0
    • 0
    • Sao chép

    Di Chuyển Đối Tượng Trên Web Con Trỏ Chuột trong JavaScript

    Hướng dẫn sử dụng code JavaScript di chuyển các đối tượng trên web theo sự di chuyển của chuột.
    17/09/2014
    29/07/2020
    1 phút đọc
    Di Chuyển Đối Tượng Trên Web Con Trỏ Chuột trong JavaScript

    Cho 1 biểu tượng vui nhộn có thể di chuyển theo chuột máy tính, từ ý tưởng này điều cần thực hiện là sử dụng thẻ <img> hoặc thẻ <div> có chứa hình ảnh cần thiết và di chuyển thẻ đó theo con trỏ chuột.

    Hướng dẫn hiện thực

    HTML

    <!DOCTYPE html>
    <html>
    	<body>
    		<div id="id-object" class="object">POINTER</div>
    	</body>
    </html>

    CSS

    <style>
    	.object{
    		width:50px;
    		height:20px;
    		line-height:20px;
    		background:#f80;
    		color:#fff;
    		text-align:center;
    		font-size:1rem;
    		cursor:context-menu;
    		
    		position:absolute;
    		top:0;
    		left:0;
    	}
    </style>

    Từ đoạn position: fixed cho phép đối tượng nằm ở vị trí bất kỳ theo định nghĩa top: 0, left: 0

    JavaScript

    Điều khiển việc thay đổi topleft của thẻ thay đổi theo tọa độ đang di chuyển của con trỏ chuột.

    <script>
      function init() {
       window.addEventListener("mousemove", function (e) {
         const x = window.Event
           ? e.pageX
           : event.clientX +
             (document.documentElement.scrollLeft
               ? document.documentElement.scrollLeft
               : document.body.scrollLeft);
         const y = window.Event
           ? e.pageY
           : event.clientY +
             (document.documentElement.scrollTop
               ? document.documentElement.scrollTop
               : document.body.scrollTop);

         let node = document.getElementById("id-object");
         node.style.top = y - 10 + "px";
         node.style.left = x - 25 + "px";
       });
     }

      window.onload = init;
    </script>

    Đăng ký sự kiện theo dõi di chuyển chuột, khi phát sinh sự kiện này, tiến hành lấy tọa độ chuột và gán lại tọa độ cho đối tượng.

    Codes hoàn chỉnh

    Tạo file index.htm và sao chép toàn bộ code bên dưới vào và mở bằng trình duyệt web.

    <!DOCTYPE html>
    <html>
     <head>
       <style>
         .object {
           width: 70px;
           height: 20px;
           line-height: 20px;
           background: #f80;
           color: #fff;
           text-align: center;
           font-size: 14px;
           cursor: context-menu;

            position: fixed;
           top: 0;
           left: 0;
         }
       </style>

        <script>
         function init() {
           window.addEventListener("mousemove", function (e) {
             const x = window.Event
               ? e.pageX
               : event.clientX +
                 (document.documentElement.scrollLeft
                   ? document.documentElement.scrollLeft
                   : document.body.scrollLeft);
             const y = window.Event
               ? e.pageY
               : event.clientY +
                 (document.documentElement.scrollTop
                   ? document.documentElement.scrollTop
                   : document.body.scrollTop);

              let node = document.getElementById("id-object");
             node.style.top = y - 10 + "px";
             node.style.left = x - 35 + "px";
           });
         }

          window.onload = init;
       </script>
     </head>
    <body>
       <div id="id-object" class="object">POINTER</div>
     </body>
    </html>
     
    0
    JavaScript

    JavaScript

    STDIO Training - Đào tạo lập trình Frontend - Backend.

    Khi bạn nhấn vào liên kết sản phẩm do STDIO đề xuất và mua hàng, STDIO có thể nhận được hoa hồng. Điều này hỗ trợ STDIO tạo thêm nhiều nội dung hữu ích.. Tìm hiểu thêm.

    Đề xuất

    SOLID trong Lập Trình Hướng Đối Tượng
    SOLID trong lập trình hướng đối tượng có giá trị như thế nào trong việc ...
    Đôi Mắt Dõi Theo Con Trỏ Chuột với Thuần JavaScript
    Tạo đôi mắt có thể dõi theo con trỏ chuột với JavaScript thuần (không ...

    Khám phá

    Ruler - Công Cụ Đo Khoảng Cách Trên Windows
    Đối với ngành công nghiệp phần mềm, đặc biệt là trong kiến trúc, thiết ...
    Con Trỏ trong C++ - Pointer
    Tìm hiểu và hướng dẫn cách sử dụng con trỏ trong C/C++.
    28/07/2015
    Xử Lý Sự Kiện Trong Cocos2d-x 3.x.x
    Bài viết nằm trong loạt bài viết chương trình Tự Học Cocos2d-x 3.x.x. ...
    Tạo Menu Trượt Theo Khung Nhìn Trên Web
    Tạo menu hoặc các phần tử có thể trượt theo thanh trượt của trình duyệt ...
    Học Lập Trình Nên Bắt Đầu Từ Đâu?
    Học lập trình nên bắt đầu từ đâu? Lựa chọn học từ nền tảng có phải luôn ...
    Vector Trong Unity
    Giới thiệu và hướng dẫn sử dụng các đối tượng cơ bản thuộc lớp Vector3 ...
    Lược Sử ECMAScript
    Quá trình hình thành, lịch sử ra đời của JavaScript qua các giai đoạn ...
    Phân Biệt Tham Chiếu và Con Trỏ trong C++
    Phân biệt tham chiếu và con trỏ trong C++ theo phương pháp đơn giản.
    STDIO
    Trang chính
    Công ty TNHH STDIO

    30, Trịnh Đình Thảo, Hòa Thạnh, Tân Phú, Hồ Chí Minh
    +84 28.36205514 - +84 942.111912
    developer@stdio.vn

    383/1 Quang Trung, Phường 10, Quận Gò Vấp, Hồ Chí Minh
    Số giấy phép ĐKKD: 0311563559 do sở Kế hoạch và Đầu Tư TPHCM cấp ngày 23/02/2012

    ©STDIO, 2013 - 2020