STDIO
Tìm kiếm gần đây
    Mục lục
    Thảo luận
    0
    Liên kết
    QR Code

    Đô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 cần JQuery) cho website của bạn. Dễ dàng tích hợp vào các website. Tương thích với các trình duyệt web cơ bản như Internet Explorer, Mozilla Firefox, Google Chrome, Safari.
    12/09/2014
    29/07/2020
    2 phút đọc
    Đôi Mắt Dõi Theo Con Trỏ Chuột Với Thuần JavaScript

    Tích hợp 1 đôi mắt được viết bằng JavaScript vào website bạn sẽ tạo ra một điều thú vị cho khách ghé thăm. Đôi mắt này được hiện thực với thuần JavaScript nên không đòi hỏi bạn sử dụng thêm thư viện ngoài như JQuery.

    Download gadget

    Gadget bao gồm 1 file JavaScript duy nhất STDIO_DORAEMON_EYES_GADGET.zip.

    Sau khi giải nén ra bạn sẽ có 1 thư mục STDIO_DORAEMON_EYES_GADGET, bên trong có thư mục sample, bạn chỉ cần chạy thử file index.html để xem thử gadget có dạng như sau.

    Bên trong thư mục STDIO_DORAEMON_EYES_GADGET còn có file stdio_doraemon_eyes.js và bạn sẽ sử dụng file này cho website mình.

    Các bước tích hợp vào website

    Lưu trữ

    Lưu trữ stdio_doraemon_eyes.js lên web host của bạn.

    Tích hợp

    Chèn vào website

    Chèn vào phần thẻ <head> của website bạn với đoạn mã sau

    <script type="text/javascript" src="stdio_doraemon_eyes.js"></script>

    Chọn nơi sẽ hiển thị đôi mắt và đánh ID vào thẻ đó trong phần body ví dụ như id_parent là id của thẻ sẽ trình diễn đôi mắt.

    <!DOCTYPE html>
    <html>
    <head>
    <script type="text/javascript" src="stdio_doraemon_eyes.js"></script>
    </head>
    <body>
    	<div id="id_parent" style="width:400px;height:200px;margin:100px">
    	</div>
    </body>

    Khởi chạy hàm tạo đôi mắt

    Trong sự kiện onload của body ta sẽ gọi hàm initStdioEyes("id_parent") hoặc như trong sample thì gọi hàm này ở cuối file index.html.

    <!DOCTYPE html>
    <html>
    <head>
    <script type="text/javascript" src="stdio_doraemon_eyes.js"></script>
    </head>
    <body>
    	<div id="id_parent" style="width:400px;height:200px;margin:100px">
    	</div>
    </body>
    
    <script>
    var eyes = new STDIOEyes('id_parent');
    </script>

    Xem thêm file index.html trong thư mục sample để có thêm chi tiết.

    Các tùy chỉnh khác

    Một số tùy chỉnh giúp bạn có thể tạo ra màu sắc, kích thước đôi mắt phù hợp với mong đợi của bạn. Truyền tham số vào hàm tạo thay vì để mặc định.

    // var eyes = new STDIOEyes('id_parent');
    var eyes = new STDIOEyes('id_parent', eye_width, border_width, apple_width, color, color_hover);
    • eye_width: độ lớn 1 con mắt (bao gồm đường viền và và phạm vi bên trong của mắt.
    • border_width: độ lớn đường viền.
    • apple_width: độ lớn "tròng đen" của 1 con mắt.
    • color: màu sắc của mắt.
    • color_hover: màu sắc của mắt khi có chuột rê bên trong (hover).

    Ví dụ:

    var eyes = new STDIOEyes('id_parent', 100, 4, 40, '#00aadd', '#ff8800');

    Kết quả

    stdio_doi_mat_doremon
    JavaScript

    JavaScript

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

    Đề xuất

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

    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 ...

    JavaScriptJavaScript Nâng Cao

    17/09/2014

    Tổng Quan Về Ngôn Ngữ Lập Trình JavaScript

    Tổng Quan Về Ngôn Ngữ Lập Trình JavaScript

    Tìm hiểu tổng quan ngôn ngữ lập trình JavaScript và tầm quan trọng của ...

    Nguyễn Nghĩa

    14/11/2015

    Khám phá thêm

    10 Thứ Bạn Có Thể Làm Với JavaScript

    10 Thứ Bạn Có Thể Làm Với JavaScript

    Giới thiệu 10 ứng dụng mà JavaScript với sự mạnh mẽ của nó có thể tạo ...

    JavaScriptKiến Thức

    06/04/2016

    Quản Lý Vị Trí Các Đối Tượng Trong Game

    Quản Lý Vị Trí Các Đối Tượng Trong Game

    Thông thường khi khởi tạo một đối tượng trong game, các lập trình viên ...

    Lập Trình GameKiến Thức Nâng Cao

    30/03/2015

    Lược Sử ECMAScript

    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 ...

    JavaScriptKiến Thức

    05/07/2020

    Thỏa Thuận Sử Dụng Dịch Vụ STDIO

    Thỏa Thuận Sử Dụng Dịch Vụ STDIO

    Thỏa thuận này quy định về điều kiện giao kết hợp đồng, quyền lợi, nghĩa ...

    STDIOChính sách

    07/04/2014

    Học SEO Trong 1 Ngày - Phần 4 (Hết)

    Học SEO Trong 1 Ngày - Phần 4 (Hết)

    SEO nâng cao với cấu trúc web, các vấn đề về robots.txt, nofollow, liên ...

    STDIO SolutionsSEO

    11/07/2020

    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?

    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 ...

    STDIO TrainingGóc nhìn

    30/06/2020

    Hiện Thực Menu Select Level Với Scroll Rect

    Hiện Thực Menu Select Level Với Scroll Rect

    Đối với các thể loại game giải đố (puzzle), luôn luôn có một hệ thống ...

    Lập Trình GameKiến Thức Nâng Cao

    08/08/2015

    Hướng Dẫn Dùng Charles Proxy Để Theo Dõi Network Traffic

    Hướng Dẫn Dùng Charles Proxy Để Theo Dõi Network Traffic

    Đã có bao giờ bạn băn khoăn, không biết ứng dụng của mình nó sẽ gọi API ...

    Cyber Security

    03/08/2016

    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