Nội dung bài viết
Đăng ký học lập trình C++
Tại STDIO bạn được dạy nền tảng lập trình tốt nhất.
Đăng ký học
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.

Giới thiệu

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, trong bài viết này, tôi đã tạo sẵn file JavaScript có sẵn code để xử lý đôi mắt. Bạn chỉ cần 3 bước để tích hợp vào website của riêng bạn. Đô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 JQuery hay sử dụng các code phức tạp khác.

Tại thời điểm viết bài này, tôi đã tích hợp nó vào phần STDIO?, bạn có thể tham khảo tại: http://www.stdio.vn/about

stdio_eyes_demo

Tiền đề bài viết

Dù muốn hay không, ai cũng sẽ có một tuổi thơ của riêng họ. Với tôi, tuổi thơ tôi gắn liền với những tưởng tượng, những bay bổng Fujiko Fujio đã mang lại thông qua mèo ú Doraemon. Với các câu truyện xoay quanh các nhân vật quen thuộc dẫn đến tận thời điểm này, tôi vẫn tin tưởng rằng, tôi có thể làm được bất kỳ điều gì trong cuộc đời này nếu tôi nỗ lực.

Công việc đưa đẩy ta quên đi nhiều thứ, kể cả quá khứ. Cách đây không lâu, bộ phim hoạt hình STAND BY ME đã nhắc tôi nhớ đến người bạn của mình, người đã tạo cho tôi những ước mơ như ngày hôm nay. Thôi thúc tôi làm 1 điều gì đó và tôi tạo ra đôi mắt của cậu ta, xem như món quà cho người bạn thuở ấu thơ của mình.

ss_3

Đối tượng hướng đến

Dành cho bản thân tôi, cho các nhà phát triển website tìm kiếm một gadget nhỏ cho website bạn.

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.

ss_1

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>

Lưu ý chỉnh sửa đường dẫn đến file stdio_doraemon_eyes.js là nơi bạn lưu trữ trên web-host của bạn cho phù hợp. Sau khi chèn xong sẽ có dạng như sau.

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

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. Ta sẽ 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ụ ta có thể gọi

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

Kết quả

stdio_doi_mat_doremon

Tuổi thơ của tôi là như thế. Còn bạn thì sao?

ss_2

THẢO LUẬN