post image

jQuery Image Hover

Với CSS bạn cũng có thể tạo ra được hiệu ứng tương tự như sau, nhưng nó không được sexy như thêm một chút jQuery vào. Về nguyên lý trong bài này, chúng ta sẽ sử dụng dạng Sprite Image như tôi đã giới thiệu trước đây với CSS. Nhưng chúng ta thay vì chỉ để nó hiển thị phần dưới của tấm hình ngay tức khắc, chúng ta thêm jQuery để nó có thể hiển thị kiểu Huế “con hộ chầm chậm xuống hang” hay tiếng Bắc là “câu hỏi chấm chấm xuống hàng”.

Trong bài này bạn sẽ phải tự chuẩn bị hình trong Photoshop trước. Tôi sử dụng tính năng Colorize trong Photoshop để thay đổi màu cho hình. Bạn có thể làm thế nào tùy thích. Miễn sao có hình như ví dụ là được. Hơn nữa, đây là lần đầu tiên tôi thử sử dụng dịch vụ Vimeo để host video. Tôi cũng thấy nhiều trang sử dụng dịch vụ này rồi và thấy chất lượng cũng được. Các bạn hay cho tôi biết tốc độ load, chất lượng của video như thế nào nhé. Nếu được từ giờ tôi sẽ sử dụng dịch vụ này để san sẻ bớt bandwidth và dung lượng của host hiện tại.

Thời lượng: 21:05

Download định dạng .avi chất lượng cao: MediaFire

Dung lượng: 197MB

«

»

19 Comments

( Comment bài này )
  1. học hỏi says:

    Cái này như là làm flash ý nhỉ
    thích thật đó
    thank anh

  2. nhtera says:

    Vimeo này dùng cũng rất tốt , có thể nói chỉ thua youtube về mặt tốc độ tí thôi .
    Youtube giới hạn có 10 phút nên hạn chế quá.Vimeo là ứng cử xứng đáng đó anh DW , em cũng dùng dịch vụ này rồi :D

  3. Aboutme says:

    Mình thích câu: “Bố khỉ, khó tính thế hở giời” của DW =))
    Nice tuts, thankz

  4. levishoang says:

    Chu oi lam gium 1 tutorial about Xml dc ko ah.

  5. Trần says:

    Có vẻ anh DW đang bị giới hạn băng thông :) )

  6. Giới hạn thì không nhưng nếu sử dụng Vimeo được thì đây là kế lâu dài đó mà. Sau này khi nhiều người xem hơn, nhiều người download hơn thì host cũng đỡ bị quá tải hơn.

  7. unlimited says:

    bác DW cho em hỏi cái.Sao cái PHP designer của em không có autocomplete mã Jquery nhỉ??? em thấy tt của anh có hỗ trợ mã mà .Cảm ơn bác nhiều ạ!

  8. ^^. Không có chương trình nào complete mã Jquery cả. Đó đơn giản là code của JS, bạn nên xem kỹ nhé. Jquery là một thư viện không phải là một ngôn ngữ, bản thân nó vẫn phải dựa trên môi trường JS để thực thi các tập lệnh. ^^

  9. unlimited says:

    cảm ơn bác Clackken Smith đã trả lời giúp.Nhưng em thắc mắc là làm thế nào để chuơng trình editor của mình bật mã js giống như trong các tt của các bác ạ! Vì em mới nhập môn JQ nên khi viết mã rất cần tính năng này. Em đang dùng PHP designer 6.2.5.2 để viết code ạ. ~:>!!

  10. hầu như chương trình nào cũng có các mã code hind để hỗ trợ các lập trình viên trong quá trình làm việc cả, tất cả các mã code bạn nên xem trong các mục config của nó. Hầu như đều có.

    • unlimited says:

      bác Clackken smith có thể nói dõ hơn không ạ.Em đang dùng php designer 6.2.5.Có cách nào để cấu hình cho phép sử dụng autocompele mã jquery không ạ.Tại em thấy trong tt của bác DW dùng php designer có hỗ trợ autocomlete mã jquery nên em nghĩ chắc là làm được.Có bạn nào biết comment giúp mình nhé.Thank trước ~:>

  11. bựa ! nói vậy vẫn ko hiểu sao trời. Code mà chương trình hiển thị đó chỉ là hỗ trợ cho Javascript. Jquery bản thân nó là viết trên nền Javascript. Đó không phải là Jquery. Các mã JS thì bạn chẳng cần chỉnh, phần mềm Php Design đã hỗ trợ sẵn cho bạn rồi.

  12. unlimited says:

    bác Clackken ơi cái php designer của em còn không bật mã hỗ trợ khi viết code Javascript cơ.Thế em mới thắc mắc chứ ạ.???Còn Jquery là thư viện được viết bằng Javascript thì em hiểu rồi ạ.Thực chất cũng là javascript thôi .Em thắc mắc là tại sao cái PHP designer của em nó không hỗ trợ giống như bản mà bác DW sử dụng trong các tt cơ.

  13. Nếu nó không tự động hiện lên, bạn có thể kích hoạt nó bằng tổ hợp phím Ctrl + Space. Nếu vẫn không có thì có lẽ bạn nên tải phiên bản mới nhất mà sài, phiên bản hiện tại tôi đang sài là PHP Designer 7.1

  14. hk------- says:

    bựa ! nói vậy vẫn ko hiểu sao trời. :D

  15. unlimited says:

    thank you bác clackken Smith. Vấn đề của em đã được giải quyết rồi ạ.

  16. kaka says:

    đội ơn izwebz

  17. pham duy says:

    anh DW la so 1

  18. Thanks, nhưng sao em thấy tiếng trong mấy clip của a hơi nhỏ nhiều lúc phải cố gắng lắm mới nghe dc. Mong a để vol lớn thêm 1 chút nữa.

  1. BB
  2. BB
  3. BB

arrow

Lưu ý khi post comment:

  • Không "bóc tem" topic
  • Dùng lời lẽ có văn hoá và lịch sự
  • Xem trang FAQs trước khi hỏi
  • Bạn có thể dùng thẻ HTML như:<strong>, <em>, <a>
  • Wrap code trong dấu `backtick` (dấu trên phím Tab)

Chọn kiểu gõ: Tự động TELEX VNI Tắt