Đang tải dữ liệu...
Thiên đường website
Liên hệ
Chính sách
Khách hàng
Giới thiệu
Trang chủ
 
Dịch vụ
  • Thiết kế website
  • Hosting
  • Thiết kế đồ họa
  • SEO tăng thứ hạng
  • Nâng cấp website
  • Dịch vụ nhập liệu
  • Website cho điện thoại
  • Tích hợp thanh toán trực tuyến
  • Dịch vụ google cloud, ec2 cloud
  • SEO tools
  • Đọc tin Rss
Kiến thức cho bạn
  • Trao đổi - học tập
    • Jquery (2)
    • NoSQL (4)
    • NodeJs (1)
    • Lập trình iOS (3)
    • Thủ thuật - kinh nghiệm (33)
    • Lập trình website (63)
    • Tối ưu hóa (11)
    • Mã nguồn (20)
    • SEO (35)
    • Bảo mật (9)
    • htaccess (5)
    • Ebook - tài liệu (4)
    • WYSIWYG (3)
    • Phần mềm (11)
    • Photoshop (5)
  • Thư giản - giải trí
    • Sáng tạo (5)
    • Địa điểm vui chơi (5)
    • Quà tặng (2)
    • Truyện -hình vui (9)
    • Video clip (9)
    • Game (3)
Hỗ trợ trực tuyến
Kỹ thuật : 098 7277 329
vfa.hoangnn - Mr. Hoàng
Tư vấn : 090 282 4547
vfa.hoangnn - Mr. Hoàng
Đối tác
New day TravalReview CompanyMua sắm cả ngày


Mỹ phẩm The Face Shop
Mã giảm giá - Code khuyến mãi
Ốp lưng, Bao da Đẹp
Giá vàng, giá USD
Ốp lưng tự thiết kế
Dec
14

Cloud Zoom: jQuery Plugin giúp phóng to hình ảnh với nhiều tính năng

09:28 am GMT +7 Hanoi |
Trang chủ ›
Trao đổi - học tập ›
Mã nguồn

Thêm vào trang Google +

Cloud Zoom một plugin jQuery tương đối nhẹ, độ tùy chỉnh cao giúp bạn dễ dàng thêm các hình ảnh có thể được phóng to vào trong trang web. Một số tính năng Cloud Zoom hỗ trợ như thêm màu, phóng to ngay trong ảnh, làm mềm mại ảnh.


Cloud Zoom rất dễ dàng thực hiện. Bạn dễ dàng có thể tùy chỉnh các ảnh nhỏ , ống kính và cửa sổ ảnh phóng to bằng CSS. Ngoài ra Cloud Zoom còn hỗ trợ một số cấu hình như chiều cao, chiều rộng của cửa sổ zoom, pha màu, độ trong suốt, độ mềm mại khi di chuyển, bật tắt tiêu đề.

Cách sử dụng :

Trước tiên, bạn cần download jQuery và jQuery UI và Cloud Zoom. Sau đó thêm vào trong thẻ <head> của trang web:

CODE

<link rel="stylesheet" type="text/css" href="css/jquery-ui-1.7.2.custom"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/cloud-zoom.css"/>
<script type="text/javascript" src="js/cloud-zoom.1.0.2.min.js"></script>



Mã Html :

CODE

<a href='images/bigimage00.jpg' class ='cloud-zoom' rel="tint: '#ff0000',tintOpacity:0.5 ,smoothMove:5,zoomWidth:480, adjustY:-4, adjustX:10">
<img  src="images/smallimage.jpg" title="Optional title display" alt=''/>
</a>



Demo

Chi tiết hơn về các tùy biến tại trang chủ Cloud Zoom

Thêm vào trang Google +
Số lần xem : 9503
Đánh giá
Facebook

Bài viết liên quan
  • 08/12/2014 11:05 Mã nguồn website bán hàng bằng cakephp
  • 14/05/2012 10:11 Tạo bàn phím ảo trên ứng dụng web, Jquery virtual keyboard
  • 30/12/2010 21:00 Code lấy thông tin chứng khoán
  • 12/12/2010 13:24 Flash noel , trang chủ giáng sinh
  • 04/12/2010 00:30 Ajax autosuggest , ajax auto complete text field
Bài viết mới hơn

<< Trang trước


Thienduongweb.com - Thiết kế website, tạo gian hàng miễn phí
Địa chỉ trụ sở chính: 241/45 Tân Hòa Đông, F14, Quận 6, TP.HCM
Email: info@thienduong.com
Điện thoại: 098 7277329