Hiệu ứng Javascript làm đậm và mờ hình anh khi di chuột

Oh suy nghĩ của bạn có lẽ không có mã hóa bằng ngôn ngữ khác để tìm hiểu không. Đừng lo lắng của nó thực sự đơn giản, sử dụng và triển khai thực hiện. Nếu bạn thực sự muốn gặp khó khăn vào jquery sau đó nettuts đã viết một loạt các chủ đề về xem liên kết này.

Thứ nhất Hãy jquery? tôi nghe bạn yêu cầu, cũng là một jQuery nhẹ mã JavaScript nhấn mạnh rằng thư viện tương tác giữa JavaScript và HTML.

Tôi có thể làm gì với các mã này của bạn được không? Về cơ bản của nó trong một phai có hiệu lực. Các fades một yếu tố ảnh hưởng đến 30% đến trên các trang web, sau đó khi bạn di chuột qua nó, nó fades đến 100%. Hiệu quả có thể được phân định vào bất cứ một trang web trong thời tiết đó là một hình ảnh, văn bản, một liên kết hoặc thậm chí một div.

Ma trông như thế này.
$(document).ready(function(){
$(“ELEMENT HERE”).fadeTo(“slow”, 0.3);
$(“ELEMENT HERE”).hover(function(){
$(this).fadeTo(“slow”, 1.0);
},function(){
$(this).fadeTo(“slow”, 0.3);
});
});

Hãy để tôi giải thích các mã trên. Dòng 1 về cơ bản có nghĩa là nạp javascript khi các tài liệu đã được nạp đầy đủ, điều này có nghĩa là javascript wont bắt đầu cho đến khi toàn bộ tệp tin HTML được tải trong đó bao gồm các quảng cáo cũng. Khi mọi thứ đã tải tập lệnh sẽ chạy.
Dòng 2 phai có nghĩa là nguyên tố có đến 30%, 0,3 là 30%, ở một tốc độ chậm. Ở đâu đó nói rằng “yếu tố ở đây” mà có thể ID của chúng tôi.
Dong 3 có nghĩa là khi con chuột hovered hơn là “các yếu tố” phai để 1,0 tại một tốc độ chậm 1,0 bằng 100% hình ảnh sau đó sẽ dừng lại ở 100% cho đến khi con chuột được di chuyển ra ngoài yếu tố. Sau đó, cuối cùng của mã bit, có nghĩa là khi con chuột được di chuyển ra ngoài yếu tố phai quay lại 30%, 0,3 ở một tốc độ chậm.

Bây giờ im đi để cho bạn thấy làm thế nào để thêm này vào tất cả các trang web của bạn. Ive đặt cùng một tải nhỏ, trong đó có một ví dụ đơn giản. Tải về tại đây.

Trích xuất nội dung của “example_one.zip” vào máy tính của bạn, ví dụ bên trong một thư mục tạo ra một thư mục mới được gọi là “js” Bên trong thư mục này để các jquery tập tin này có thể được tìm thấy ở đây. Sau đó, tạo ra một trống notepad và lưu các tập tin bên trong “js” thư mục gọi là “custom.js” Vì vậy, bên trong các thư mục Cổ phần, cần có 2 tác phẩm. “jquery1.3.min.js” và “custom.js”. Mở ra các tùy chỉnh. Js tập tin trong dreamweaver sau đó sao chép và dán mã jquery hiệu quả trong, sau đó lưu.

Bạn phải được tất cả các thiết lập để đi, chỉ cần một vài điều cần lưu ý về mất. Nếu bạn nhìn vào bên trong mã HTML của các ví dụ, bạn sẽ nhận thấy bên trong các HEAD tages có một số dòng javascript.
<script type=”text/javascript” src=”js/jquery.js”> </ script>
<script type=”text/javascript” src=”js/custom.js”> </ script>

Cơ bản của nó giống như một liên kết. CSS chỉ các tập tin javascript. Này mà không có chút mã HTML jquery wont work. Đảm bảo rằng tên tập tin của các. Cổ phần phù hợp với các tập tin của bạn, tôi không tin rằng bạn cần phải thay đổi 1. Một trong những từ “jquery” để “jquery-1.3.min.js”.

Bây giờ để có hiệu lực, như tôi đã nói trước khi bạn có thể sử dụng hiệu quả trên hầu như bất cứ điều gì bên trong mã HTML của một tài liệu, hiện nay chúng tôi muốn thêm các hiệu ứng cho hình ảnh cá nhân chúng tôi có trong tệp HTML của chúng tôi ví dụ, nếu bạn nhìn vào các mã trong tệp HTML liên quan đến những hình ảnh, bạn sẽ nhận thấy họ có một lớp học của “class =” latest_img “. Các lớp học được định nghĩa trong. CSS tập tin. Các lớp học là một hình thức ID, trong đó các hình ảnh có thể được xác định bởi. Nếu chúng tôi sẽ mở “custom.js” trong dreamweaver sau đó tìm các từ “Element HERE” hai bên trong dấu ngoặc kép, thay đổi “Element HERE” đối với các lớp học mà là “. latest_img” hiệu quả của nó sẽ được áp dụng cho tất cả mọi thứ tự với một lớp học về “latest_img” của chúng tôi trường hợp các hình ảnh. của bạn. Cổ phần mã looke nên như thế này.
$(document).ready(function(){
$(“.latest_img”).fadeTo(“slow”, 0.3);
$(“.latest_img”).hover(function(){
$(this).fadeTo(“slow”, 1.0);
},function(){
$(this).fadeTo(“slow”, 0.3);
});
});

Lưu nó, sau đó xem tệp HTML của bạn trong trình duyệt của bạn. Hiệu quả nên đã được applyed vào một hình ảnh. Xem giới thiệu ở đây.

Pretty cool ah?, Bây giờ hiệu quả không ngừng ở đó như là bạn có thể áp dụng những thứ khác trong một tài liệu HTML, như thế nào về việc áp dụng nó vào một số văn bản? Xem giới thiệu ở đây.

Các văn bản trong tài liệu HTML của tôi là trong P trong một thẻ div vậy nếu tôi có hiệu lực áp dụng cho thẻ p trong một div bạn sẽ có được sự hiệu quả ở trên. Bạn cũng có thể áp dụng các hiệu ứng cho toàn bộ một div, điều này có nghĩa là tất cả mọi thứ trong div sẽ phai, ngay cả các div đó. Xem giới thiệu ở đây.

Dưới đây là tất cả các hiệu ứng trên một trang web.

Vậy sao bạn không thử và các incorparate phai trong phai ra hiệu quả trong thiết kế của bạn, hoặc chỉ chơi xung quanh và xem những gì bạn có thể ra.

Cảm ơn bạn đã đọc.