Giới thiệu
Kể từ jQuery được phát triển, các ứng dụng web tương tácđã trở nên dễ dàng hơn để phát triển. Nó cung cấp nhiều tính năng mạnh mẽ mà bạn có thể sử dụng hiệu quả với ít mã hóa, mà nếu không đòi hỏi nỗ lực phát triển hơn và dòng mã để thực hiện ngay hiệu ứng duy nhất. Trong bài viết này tôi sẽ tập trung vào tính năng hình ảnh động được cung cấp bởi jQuery và sử dụng hiệu ứng hình ảnh động trong trang web ASP.NET.
Bắt đầu
Trong bài viết
jQuery trong ASP.NET II - GridView, tôi chỉ ra một số phương thức trong điều khiển GridView. Ở đây tôi đặt trọng tâm về phương thức động trong hình khác nhau:
- Phóng to văn bản trên mousehover
- Tạo hiệu ứng mờ dần trên mousehover
- Phần tử Sliding
- Tạo hình động với panel
- Ẩn và hiển thị bảng
- Chuỗi các hình ảnh động
Lưu ý rằng tôi chỉ thảo luận về phân đoạn mã ở đây cho jQuery, với giả định rằng các điều khiển ASP.NET tương ứng đã được đặt trên trang web. Tôi sẽ chỉ thảo luận về các mã được đặt bên trong script cần thiết cho jQuery, như:
<script type="text/javascript">
$(document).ready(function () {
// our jQuery code will goes here...
});
</script>
Phóng to văn bản trên mousehover
Tôi đặt nhãn với một số văn bản hiển thị trong đó, và trên mousehover tôi sẽ cho văn bản lớn lên bên trong nhãn bằng cách thay đổi kích thước phông chữ của nó.
var origFontSize = parseFloat($(".enlarge").css('font-size'));
$("#content").hover(
function () {
$(".enlarge").css("cursor", "pointer");
var newFontSize = origFontSize * 3;
$(".enlarge").animate({ fontSize: newFontSize }, 300);
},
function () {
$(".enlarge").animate({ fontSize: origFontSize }, 300);
}
);
Giả định: Bạn đã đặt fieldset với ID = content và Label với CssClass = enlarge , và nội dung văn bản trong đó. Tôi đã xác định lớp enlarge như sau:
.enlarge
{
font-size: 12px;
font-family: Arial,sans-serif;
}
- parseFloat($ (".enlarge") css ('font-size ").) lựa chọn nhãn trong đó có lớp CSS enlarge, và thuộc tính font-size parseFloat.
- $ ("#content"). Di chuột thiết lập sự kiện hover trong fieldset với id = content.
- Trong sự kiện di chuột, bên trong chức năng di chuột, tôi đặt con trỏ đến điều khiển label để trỏ .
- newFontSize đặt biến kích thước phông chữ với một kích thước mới, bằng cách nhân kích thước font chữ ban đầu.
- $(".enlarge").animate({ fontSize: newFontSize }, 300); - đây là phương thức thực tế phát sinh hiện các ảnh động trên điều khiển label. phương thức Animate có đối tượng động với tính chất cần thiết để sinh động. Trong trường hợp, vượt qua thuộc tính Cỡ chữ với kích thước mới newFontSize. Animate thay đổi các thuộc tính thông qua các thông số với các giá trị mới. Và tham số thứ hai cho phương thức animate, vượt qua giá trị khoảng thời gian trong mili giây. Trong trường hợp phải mất 300 mili giây để thay đổi font-size với giá trị mới.
- $(".enlarge").animate({ fontSize: origFontSize }, 300); Bên trong chức năng mouseout, tôi thiết lập lại chúng Cỡ chữ với giá trị ban đầu chứa trong biến origFontSize.
Tạo hiệu ứng mờ dần trên mousehover
Đặt fieldset với id = content và đặt điều khiển ảnh bên trong container fieldset.
$("#content").hover(
function () {
$("#<%=Image1.ClientID%>").css("cursor", "pointer");
$("#<%=Image1.ClientID%>").fadeOut(1000);
},
function () {
$("#<%=Image1.ClientID%>").fadeIn(1000);
}
);
Giả định: Bạn đã đặt fieldset với id = content, và có điều khiển ảnh bên trong container fieldset với ID = Image1. Thiết lập thuộc tính src với path của hình ảnh, ở đây tôi tạo ra thư mục hình ảnh vào thư mục gốc của trang web. Cũng đặt CssClass cho điều khiển ảnh đến imagecontent, mà tôi định nghĩa:
.imagecontent
{
width: 350px;
height: 250px;
}
- $("#content").hover Di chuột thiết lập sự kiện hover fieldset với id = content.
- Trong sự kiện di chuột, bên trong chức năng di chuột, tôi đặt con trỏ để điều khiển image sử dụng để trỏ .
- fadeOut là phương thức thực tế tạo ra các hiệu ứng hình ảnh động của fadeout. Nó có các tham số để thiết lập khoảng thời gian để tạo ra hiệu quả mong muốn.
- fadeIn: Bên trong chức năng mouseout, tôi thiết lập lại điều khiển image fadeIn với thời gian yêu cầu tham số p.
Phần tử Sliding
Thả nút điều khiển để cung cấp cho người dùng một cách để nhấn và nhận được slide các phần tử. Đặt div với nội dung HTML.
$("#<%= btnSubmit.ClientID%>").click(function (e) {
e.preventDefault();
if ($(".slide").is(":hidden")) {
$(".slide").slideDown("slow");
}
else {
$(".slide").slideUp("slow");
}
});
Giả định: Bạn đã đặt điều khiển button trong Form với ID = btnSubmit . Và có div với CSS class slide:
.slide
{
font-size: 12px;
font-family: Arial,sans-serif;
display: none;
height: 100px;
background-color: #148A21;
color:#000000;
}
- Đính kèm các sự kiện click cho nút btnSubmit .
- e.preventDefault() dừng trang bị postback, bằng cách ngăn chặn behavior mặc định.
- $(".slide").is(":hidden") đầu tiên kiểm tra nếu phần tử với class slide đã được ẩn, nếu có thành phần slideDown("slow").
- Nếu phần tử không phải là đã ẩn , thì phần tử slideUp với các hằng giá trị timespan là slow.
Tạo hình động với panel
Thả nút điều khiển để cho phép người dùng tạo hiệu ứng panel cho phù hợp. Đặt điều khiển panel với nội dung HTML.
var regular = true;
$("#<%=btnSubmit.ClientID%>").click(function (e) {
e.preventDefault();
if (regular == true) {
$(".contentArea").animate({
opacity: 0.5,
width: "500px",
height: "280px",
fontSize: "36px",
borderWidth: "15px"
}, "slow");
}
else {
$(".contentArea").animate({
opacity: 1.0,
width: "300px",
height: "100px",
fontSize: "12px",
borderWidth: "5px"
}, "slow");
}
regular = !regular;
});
Giả định: Bạn đã giảm điều khiển button trên Form với ID = btnSubmit . Đặt điều khiển panel với CssClass = contentArea:
.contentArea
{
font-size: 12px;
font-family: Arial,sans-serif;
width: 300px;
height: 100px;
background-color: #9999FF;
border: solid;
}
- var regular = true định nghĩa biến để duy trì trạng thái panel động.
- Đính kèm các sự kiện click cho nút btnSumbit .
- e.preventDefault() dừng trang bị postback, bằng cách ngăn chặn các behavior mặc định.
- regular == true kiểm tra đầu tiên nếu ta chưa áp dụng ảnh động trên điều khiển panel. Sau đó, phương thức (".contentArea").animate() được gọi với các giá trị khác nhau cho thuộc tính CSS khác nhau, ta phải thay đổi hoặc áp dụng trên điều khiển panel content, và tham số thứ hai (slow) cho phương thức animate là timespan được tiêu thụ trong các hiệu ứng ảnh động.
- Nếu đã áp dụng các hiệu ứng động, bây giờ chúng ta quay trở lại với các thuộc tính CSS ban đầu cho điều khiển panel. Tôi đã thiết lập giá trị ban đầu cho thuộc tính CSS khác nhau được thiết lập cho bảng target.
Ẩn và hiển thị bảng
Chúng ta hãy ẩn và hiển thị các panel khác nhau, menu như hiển thị tiêu đề điều khiển panel trên các trang web và tôi khám phá panel content tương ứng khi chúng ta click vào bất kỳ panel head.
$(".content_head").click(function () {
$(".content_body").hide(100);
$(this).next(".content_body").slideToggle("slow");
});
Giả định: Bạn đã đặt loạt các cặp panel. Thiết lập CssClass = content_head cho panel đầu tiên, hoạt động như tiêu đề trình đơn, và thiết lập CssClass = content_body cho panel thứ hai hiển thị nội dung của mục trình đơn. Xác định lớp CSS:
.content_head
{
width: 150px;
height: 30px;
background-color: #CCCCCC;
cursor: pointer;
}
.content_body
{
display: none;
width: 150px;
height: 50px;
background-color: #9999FF;
}
- Đính kèm các sự kiện click cho các panel với classCSS content_head .
- $(".content_body").hide(100) đầu tiên ẩn tất cả phần tử nội dung.
- $(this).next(".content_body").slideToggle("slow") bây giờ lấy phần tử click hiện tại bởi this và tìm mục nội dung tiếp theo gắn cho mục trình đơn này sử dụng next(".content_body"). Ở đây chúng ta với tới panel content gắn liền với các mục menu chuột phải. Bây giờ chúng ta chuyển đổi trạng thái slide bằng cách gọi slideToggle() với timepspan liên tục slow.
Chuỗi các hình ảnh động
Bây giờ chúng ta đặt hộp panel trên các trang web và hình động. Chúng ta không giới hạn động các phần tử chỉ một lần nhưng jQuery cung cấp sức mạnh cho chuỗi hiệu ứng hình ảnh động cho bất kỳ phần tử nào bạn muốn.
$("#<%=btnSubmit.ClientID%>").click(function (e) {
e.preventDefault();
$('.contentArea').animate({ left: "+=200"}, 2000)
.animate({ top: "+=100"}, 700)
.animate({ left: "-=400"}, 1200)
.animate({ top: "-=100"}, 700)
.animate({ left: "+=200"}, 2000);
});
Giả định: Bạn đã đánh rơi điều khiển button với ID = btnSubmit và cho phép người dùng điều khiển hiệu ứng ảnh động bằng nút này. Đặt một panel với CssClass = contentArea:
.contentArea
{
width: 50px;
height: 50px;
background-color: #71B3A2;
border: solid;
position: relative;
}
- Đính kèm các sự kiện click cho nút btnSumbit .
- e.preventDefault() dừng trang bị postback, bằng cách ngăn chặn các behavior mặc định.
- $('.contentArea') chọn panel và gọi động phương thức animate() lặp đi lặp lại trong một mô hình chuỗi. Hãy nhớ rằng phương thức animate() trả về object mà nó đã được gọi, vì vậy bằng cách lặp đi lặp lại gọi phương thức này, bởi vì phương thức trả về cùng đối tượng mà nó được gọi với trạng thái object được cập nhật.
- animate({ left: "+=200"}, 2000) động panel bằng cách thay đổi vị trí của nó trên trang web, đặt CSS left với một thuộc tính giá trị mới, và cung cấp timespan 200 phần nghìn giây để hoàn thành các hình ảnh động trong khoảng này.
- animate({ top: "+=100"}, 700) thay đổi vị trí hàng đầu của panel bằng cách thêm số giá trị mới cho thuộc tính CSS top.
- animate({ left: "-=400"}, 1200) một lần nữa thay đổi thuộc tính CSS left, nhưng thời gian này vượt qua một giá trị âm, vì vậy giá trị này hiện Form trừ vị trí bên trái hiện tại của panel trên trang web.
- animate({ top: "-=100"}, 700) thay đổi thuộc tính CSS top, nhưng lần này vượt qua giá trị aâm, vì vậy giá trị này bây giờ được Form trừ vị trí top hiện tại của panel.
- .animate({ left: "+=200"}, 2000); một lần nữa thay đổi thuộc tính CSS left, và thay đổi vị trí bên trái của panel.