前言
這節(jié)我們來(lái)介紹ASP.NET里面的Image控件，和HTML的Image元素相比，它為開(kāi)發(fā)者提供了豐富的屬性和方法。除了使用這些方法屬性外，我們還可以通過(guò)jquery在客戶(hù)端為Image控件提供更多的功能。下面就開(kāi)始介紹各種通過(guò)jQuery操作Image控件的方法：
準(zhǔn)備工作
在樣式各種技巧前，先準(zhǔn)備頁(yè)面代碼如下：
<
form
id
="form1"
runat
="server"
>
<
div
align
="center"
>
<
fieldset
style
="width: 470px; height: 340px;"
>
<
table
border
="0"
cellpadding
="3"
cellspacing
="3"
>
<
tr
>
<
td
>
<
div
class
="imgContainer"
>
<
asp:Image
ID
="img2"
runat
="server"
ImageUrl
="~/images/image2.jpg"
CssClass
="image"
ToolTip
="兩院風(fēng)景"
/>
<
asp:Image
ID
="img3"
runat
="server"
ImageUrl
="~/images/image3.jpg"
CssClass
="image"
ToolTip
="兩院風(fēng)景"
/>
<
asp:Image
ID
="img4"
runat
="server"
ImageUrl
="~/images/image4.jpg"
CssClass
="image"
ToolTip
="兩院風(fēng)景"
/>
<
asp:Image
ID
="img5"
runat
="server"
ImageUrl
="~/images/image5.jpg"
CssClass
="image"
ToolTip
="兩院風(fēng)景"
/>
<
asp:Image
ID
="img1"
runat
="server"
ImageUrl
="~/images/image1.jpg"
CssClass
="image"
ToolTip
="兩院風(fēng)景"
/></
div
>
</
td
>
<
td
>
<
asp:Image
ID
="imgCrop"
runat
="server"
ImageUrl
="~/images/image5.jpg"
CssClass
="image"
ToolTip
="兩院風(fēng)景2"
/>
</
td
>
</
tr
>
<
tr
>
<
td
>
<
br
/>
<
asp:Button
ID
="btnAdd"
runat
="server"
Text
="添加圖片鏈接"
/>
<
asp:Button
ID
="btnRemove"
runat
="server"
Text
="移除圖片鏈接"
/>
<
asp:Button
ID
="btnSwap"
runat
="server"
Text
="換一張圖片"
/>
<
br
/>
<
asp:Button
ID
="btnPre"
runat
="server"
Text
="前一張"
/>
<
asp:Button
ID
="btnNext"
runat
="server"
Text
="下一張"
/>
</
td
>
<
td
>
<
br
/>
<
table
border
="0"
cellpadding
="2"
cellspacing
="2"
>
<
tr
>
<
td
>
X:
</
td
>
<
td
>
<
asp:TextBox
ID
="txtX"
runat
="server"
Width
="25px"
></
asp:TextBox
>
</
td
>
<
td
>
Y:
</
td
>
<
td
>
<
asp:TextBox
ID
="txtY"
runat
="server"
Width
="25px"
></
asp:TextBox
>
</
td
>
<
td
>
X2:
</
td
>
<
td
>
<
asp:TextBox
ID
="txtX2"
runat
="server"
Width
="25px"
></
asp:TextBox
>
</
td
>
<
td
>
Y2:
</
td
>
<
td
>
<
asp:TextBox
ID
="txtY2"
runat
="server"
Width
="25px"
></
asp:TextBox
>
</
td
>
<
td
>
Width:
</
td
>
<
td
>
<
asp:TextBox
ID
="txtWidth"
runat
="server"
Width
="25px"
></
asp:TextBox
>
</
td
>
<
td
>
Height:
</
td
>
<
td
>
<
asp:TextBox
ID
="txtHeight"
runat
="server"
Width
="25px"
></
asp:TextBox
>
</
td
>
</
tr
>
</
table
>
</
td
>
</
tr
>
</
table
>
</
fieldset
>
</
div
>
</
form
>
使用到的樣式：
<
style
type
="text/css"
>
.imgContainer
{
position
:
relative
;
width
:
400px
;
height
:
250px
;
}
.image
{
position
:
absolute
;
top
:
0
;
left
:
0
;
width
:
400px
;
height
:
250px
;
}
.caption
{
font-family
:
Arial
;
font-weight
:
bold
;
position
:
absolute
;
z-index
:
1000
;
}
</
style
>
界面效果：
操作Image控件的各種技巧
?
實(shí)現(xiàn)給圖片添加和移除鏈接地址
$(
function
() {
//
wrap():在每個(gè)匹配的元素外層包上一個(gè)html元素
//
unwrap():將匹配元素的父級(jí)元素刪除，保留自身（和兄弟元素，如果存在）在原來(lái)的位置
//
添加圖片鏈接
$("#<%=btnAdd.ClientID %>").click(
function
(e) {
e.preventDefault();
$("#<%=img1.ClientID %>").wrap('<a target="_blank"></a>');
$("#<%=btnRemove.ClientID %>").removeAttr("disabled");
$("#<%=btnAdd.ClientID %>").attr("disabled", "disabled");
});
//
移除圖片鏈接
$("#<%=btnRemove.ClientID %>").click(
function
(e) {
e.preventDefault();
$("#<%=img1.ClientID %>").unwrap();
$("#<%=btnRemove.ClientID %>").attr("disabled", "disabled");
$("#<%=btnAdd.ClientID %>").removeAttr("disabled");
});
});
?
實(shí)現(xiàn)鼠標(biāo)移動(dòng)到圖片上在圖片上顯示圖片說(shuō)明信息
$(
function
() {
$("#form1 img").hover(
function
() {
//
$(this).css("cursor", "pointer");
var
caption = $(
this
).attr("title");
$(
this
).after("<div class='caption'>" + caption + "</div>");
},
function
() {
$(".caption").remove();
});
});
?
實(shí)現(xiàn)鼠標(biāo)移動(dòng)到圖片上改變其透明度
$(
function
() {
$("#img1").animate({ opacity: 0.8 }, 200);
$("#img1").hover(
function
() {
$(
this
).animate({ opacity: 1.0 }, 200);
},
function
() {
$(
this
).animate({ opacity: 0.8 }, 200);
});
});
?
實(shí)現(xiàn)更換圖片的功能
$(
function
() {
$("#btnSwap").removeAttr("disabled");
$("#btnSwap").click(
function
(e) {
e.preventDefault();
$("#img1").attr("src", "../images/image2.jpg");
$(
this
).attr("disabled", "disabled");
});
});
?
實(shí)現(xiàn)圖片的剪切功能
<link type="text/css" rel="Stylesheet" href="../Styles/Jcrop/jquery.Jcrop.css" />
<script type="text/javascript" src="../Scripts/jquery.js"></script>
<script type="text/javascript" src="../Scripts/jquery.Jcrop.min.js"></script>
//
插件Jcrop下載地址：http://deepliquid.com/content/Jcrop.html
$(
function
() {
$("#imgCrop").Jcrop({
onChange: showCoords,
onSelect: showCoords
});
function
showCoords(e) {
//
顯示剪切區(qū)域左上角點(diǎn)坐標(biāo)
$("#txtX").val(e.x);
$("#txtY").val(e.y);
//
顯示剪切區(qū)域右下角點(diǎn)坐標(biāo)
$("#txtX2").val(e.x2);
$("#txtY2").val(e.y2);
//
顯示剪切區(qū)域長(zhǎng)和寬
$("#txtWidth").val(e.w);
$("#txtHeight").val(e.h);
}
});
?
實(shí)現(xiàn)鼠標(biāo)移動(dòng)到圖片上放大圖片
$(
function
() {
var
zoom = 1.1;
//
定義圖片放大的倍數(shù)
var
move = -20;
//
放大圖片后左上角偏移的距離
$("#img1").hover(
function
() {
var
imgWidth = parseInt($(
this
).width()) * zoom;
var
imgHeight = parseInt($(
this
).height()) * zoom;
$(
this
).animate({ 'width': imgWidth,
'height': imgHeight,
'top': move,
'left': move
}, { duration: 200 });
},
function
() {
$(
this
).animate({ 'width': $(".imgContainer").width(),
'height': $(".imgContainer").height(),
'top': '0',
'left': '0'
}, 100);
});
});
?
實(shí)現(xiàn)圖片輪流切換
//
實(shí)現(xiàn)原理：通過(guò)z-index樣式屬性實(shí)現(xiàn)圖片切換的效果
$(
function
() {
var
z = 0;
var
max_z = $(".imgContainer img").length;
$(".imgContainer img").each(
function
() {
z++;
$(
this
).css("z-index", z);
});
$("#btnPre").bind("click",
function
(e) {
e.preventDefault();
$(".imgContainer img").each(
function
() {
var
cur_z_index = parseInt($(
this
).css("z-index"));
if
(cur_z_index == 1) {
$(
this
).css("z-index", max_z);
}
else
{
$(
this
).css("z-index", (cur_z_index - 1));
}
});
});
$("#btnNext").bind("click",
function
(e) {
e.preventDefault();
$(".imgContainer img").each(
function
() {
var
cur_z_index = parseInt($(
this
).css("z-index"));
if
(cur_z_index == max_z) {
$(
this
).css("z-index", 1);
}
else
{
$(
this
).css("z-index", (cur_z_index + 1));
}
});
});
});
?
實(shí)現(xiàn)簡(jiǎn)單圖片相冊(cè)
我們?cè)诤芏鄨D片展示的網(wǎng)上，會(huì)用到圖片相冊(cè)的功能，通過(guò)點(diǎn)擊縮略圖顯示對(duì)應(yīng)的大圖片的功能，下面來(lái)看下如何簡(jiǎn)單的實(shí)現(xiàn)這個(gè)效果。
首先需要準(zhǔn)備頁(yè)面代碼：
<
form
id
="form1"
runat
="server"
>
<
div
align
="center"
>
<
fieldset
style
="width: 600px; height: 390px;"
>
<
table
border
="0"
cellpadding
="3"
cellspacing
="3"
>
<
tr
>
<
td
>
<
table
border
="0"
cellpadding
="2"
cellspacing
="2"
>
<
tr
>
<
td
>
<
asp:Image
ID
="image1"
ImageUrl
="~/images/image1.jpg"
runat
="server"
CssClass
="thumbnail"
/>
</
td
>
<
td
>
<
asp:Image
ID
="image2"
ImageUrl
="~/images/image2.jpg"
runat
="server"
CssClass
="thumbnail"
/>
</
td
>
<
td
>
<
asp:Image
ID
="image3"
ImageUrl
="~/images/image3.jpg"
runat
="server"
CssClass
="thumbnail"
/>
</
td
>
<
td
>
<
asp:Image
ID
="image4"
ImageUrl
="~/images/image4.jpg"
runat
="server"
CssClass
="thumbnail"
/>
</
td
>
<
td
>
<
asp:Image
ID
="image5"
ImageUrl
="~/images/image5.jpg"
runat
="server"
CssClass
="thumbnail"
/>
</
td
>
</
tr
>
</
table
>
</
td
>
</
tr
>
<
tr
>
<
td
align
="center"
>
<
div
id
="imgContainer"
>
</
div
>
</
td
>
</
tr
>
</
table
>
</
fieldset
>
</
div
>
</
form
>
使用的樣式代碼：
<
style
type
="text/css"
>
.thumbnail
{
position
:
relative
;
width
:
100px
;
height
:
68px
;
}
.image
{
position
:
relative
;
width
:
400px
;
height
:
250px
;
}
</
style
>
腳本代碼：
<
script
type
="text/javascript"
>
//
實(shí)現(xiàn)鼠標(biāo)移動(dòng)到縮略圖上顯示對(duì)應(yīng)的大圖
$(
function
() {
$(
"
.thumbnail
"
).hover(
function
() {
$(
"
.thumbnail
"
).css(
"
opacity
"
,
"
0.5
"
);
$(
this
).animate({ opacity:
1.0
},
200
);
$(
"
#imgContainer
"
).append(
"
<img class='image' src='
"
+
$(
this
).attr(
"
src
"
)
+
"
'/>
"
);
},
function
() {
$(
"
.thumbnail
"
).css(
"
opacity
"
,
"
1.0
"
);
$(
"
.image
"
).remove();
});
});
</
script
>
最終效果：
這些技巧雖然很基礎(chǔ)，通過(guò)學(xué)會(huì)使用這些技巧后，相信你以后在實(shí)現(xiàn)更復(fù)雜的圖片展示效果時(shí)，會(huì)更加輕松容易。
ASP.NET jQuery 食譜20 (通過(guò)jQuery操作Image控件技巧集合)