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ả
