Ắt hẳn là bạn đã từng nhìn thấy rất nhiều trang web sử dụng hiệu ứng phóng to và thu ảnh nhỏ ảnh mỗi khi chúng ta click chuột vào ảnh đó. Thực ra hiệu ứng đó rất đơn giản và chỉ cần vài đoạn code là các bạn có thể làm được điều đó.
Đầu tiên các bạn chèn hình như sau :
<h1>Click image to Zoom In and Zoom Out</h1> <img src="Images/smile.png" alt="Smile" id="imgSmile" />
Sau đó chèn đoạn script sau :
$(document).ready(function(){ $('#imgSmile').width(200); $('#imgSmile').mouseover(function() { $(this).css("cursor","pointer"); }); $("#imgSmile").toggle(function() {$(this).animate({width: "500px"}, 'slow');}, function() {$(this).animate({width: "200px"}, 'slow'); }); });
Đầu tiên chúng ta ấn định hình sẽ có kích thước là 200px, và khi chúng ta rê chuột vào hình, thì con trỏ sẽ chuyển sang dạng bấm (pointer). Kế tiếp phương thức toogle sẽ nối 2 hay nhiều hiệu ứng lại với nhau, điều này cho phép chúng ta chỉ định với lần click đầu tiên, hình sẽ được phóng to, và lần click kế tiếp , hiệu ứng thu nhỏ sẽ được tiến hành. Rất đơn giản và dễ thực hiện phải không các bạn. Chúc các bạn thành công !
Tin tức nổi bật
Thiết kế web theo mẫu
Thiết kế web theo mẫu là gì? Thiết kế web theo mẫu là dịch vụ website được xây dựng...
Tổng hợp 20+ cách kiếm tiền từ website trong năm 2020
Thời kỳ 4.0, Internet trở thành một phần không thể thiếu trong cuộc sống của chúng ta. Người...
10 bước xây dựng kế hoạch marketing online
Thị trường luôn thay đổi và chính vì thế các chiến lược marketing online của bạn cũng cần...
Ý tưởng đặt tên thương hiệu – Cách chọn tên miền website – Lời khuyên vàng từ ITC Việt
Cách chọn tên miền website. Chúng tôi là ITC Việt. Chúng tôi là công ty thiết kế website...
Thiết kế website theo yêu cầu
Hiện nay Dịch vụ Thiết kế website theo yêu cầu đã không còn xa lạ đối với các doanh...
Thiết kế trang web, lập trang web, dựng trang web bán hàng
Nội dung bài viết Thiết kế trang web Thiết kế trang web là điều mà các công...
E-commerce là gì? E-business là gì? So sánh E-commerce và E-business
E-Commerce (tiếng Việt là thương mại điện tử) đang là một trong những vấn đề đáng quan tâm của...
Để thiết kế web đẹp bạn không thể bỏ qua 8 lưu ý sau
Việc thiết kế web ngày nay không còn dừng lại ở việc cung cấp thông tin đủ hay...