jQuery Image Hover
- February 23, 2010
- 31 comments
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
« Căn bản PHP – Bài 4 – Phần 2
Căn bản PHP – Bài 4 – Phần 1 »
Anh ơi. Làm thế nào để hover background body mà cũng có hiệu ứng này ạ?
a DW ơi. sao em viết bằng dreamwearcs5 không có hỗ trợ các hàm như fadeTo(), attr(),… nhỉ. mình có cần import thư viện j vào không anh.
Mình muốn đưa các hiệu ứng kiểu này vô WordPress thì phải làm như thế nào A ? Trả lời E nhé ? Cám ơn A.DW !
những video hướng dẫn của anh đều rất hay và dễ hiểu, cảm ơn anh rất nhiều.
Các Video của anh DW rất hay và dễ hiểu. Nhưng hầu hết là toàn kết nối database sử dụng PHP.
Anh có thể làm 1 Video có kết nối đến DataBase SQL server với hiệu ứng khi người dùng chỉ chuột vào 1 bức ảnh trong Datalist của ASP.NET thì nó sẽ hiển thị được một bức ảnh có zoom to hơn với thông tin của nó mình lấy từ trong Database ra không ạ.
Giống như trang http://www.dacsanque.com đó anh.
Nếu được rất mong anh có thể làm ra Video này sớm
Anh ơi, e rất thích tut của a làm, e mới tham gia website và e đang học hỏi, tiện thể leech it bài của a về share cho a e xài
E thấy a có cái toolbar trên trình duyệt a dùng những toolbar gì vậy a share lên đi :X
Thanks a rất nhiều!
Bạn có thể đọc phần FAQs, đã trả lơipha6n2a6n2 addon dùng cho ff. http://www.izwebz.com/faqs/
Xem Tut của DW mình cười đau hết cả bụng chả học đc zì hehe, nói vậy cho vui chứ mình rất thích cách DW làm tut như thế này rất tự nhiên zí zỏm ” ồ sao bé không lắc ” haha….Cảm ơn Tut hy vọng sẽ được học nhiều hơn từ những Tut của DW
Anh DW ơi! Cảm ơn anh vì những video bổ ích. Em đã học được rất nhiều thứ từ izwebz.com. Em cũng xem rất nhìu video của anh rùi, phần đầu với câu chào quen thuộc “Hey! xin chào các bạn chào mừng các bạn đến với izwebz.com”. Hì Cách mà anh nói lúc đầu làm người nghe chú ý. Nhưng riêng em hễ lần nào mà quên không cho nhỏ volume là y như rằng giật mình thon thót anh ah. Không biết có phải em yếu bóng vía nữa không? :-/ ;;) :d. Em rất thích phong cách của anh. Nhưng nếu anh có thể tạo ra những video tutorial với phần giới thiệu đầu nhẹ nhàng hơn theo phong cách của anh thì em cá là sẽ có nhiều bạn nữ hâm mộ anh hơn. Và nhìu người sẽ biết đến izwebz hơn.
Tết sắp đến, Izwebz sẽ thêm một tuổi.Chúc izweb sẽ trở thành website hàng đầu cho những người học web(khi search google). Chúc anh DW vạn sự như ý, tỷ sự như mơ…:d. Chúc em năm mới sẽ được nghe những video với giọng Hà thành ấm cúng, nhẹ nhàng của anh
Cám ơn anh DW. Em rất thích các bài về Jquery kiểu này của anh.
Bác DW ơi dùng Vimeo để host video chậm lắm em không thể xem ol được.
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.
anh DW la so 1
đội ơn izwebz
thank you bác clackken Smith. Vấn đề của em đã được giải quyết rồi ạ.
bựa ! nói vậy vẫn ko hiểu sao trời.
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
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ơ.
Xin chào izwebz.com , mình sẽ thường xuyên xem izwebz.com , và sẽ chuyển tải trang web này đến nhiều người bạn của minh . DW khỏe thì mới làm video được chứ. bye
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.
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ó.
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 ~:>
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 ạ. ~:>!!
^^. 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. ^^
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 ạ!
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.
Có vẻ anh DW đang bị giới hạn băng thông
)
Chu oi lam gium 1 tutorial about Xml dc ko ah.
Mình thích câu: “Bố khỉ, khó tính thế hở giời” của DW =))
Nice tuts, thankz
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
Cái này như là làm flash ý nhỉ
thích thật đó
thank anh