前言
這節我們來介紹ASP.NET里面的Image控件，和HTML的Image元素相比，它為開發者提供了豐富的屬性和方法。除了使用這些方法屬性外，我們還可以通過jquery在客戶端為Image控件提供更多的功能。下面就開始介紹各種通過jQuery操作Image控件的方法：
準備工作
在樣式各種技巧前，先準備頁面代碼如下：
<
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
="兩院風景"
/>
<
asp:Image
ID
="img3"
runat
="server"
ImageUrl
="~/images/image3.jpg"
CssClass
="image"
ToolTip
="兩院風景"
/>
<
asp:Image
ID
="img4"
runat
="server"
ImageUrl
="~/images/image4.jpg"
CssClass
="image"
ToolTip
="兩院風景"
/>
<
asp:Image
ID
="img5"
runat
="server"
ImageUrl
="~/images/image5.jpg"
CssClass
="image"
ToolTip
="兩院風景"
/>
<
asp:Image
ID
="img1"
runat
="server"
ImageUrl
="~/images/image1.jpg"
CssClass
="image"
ToolTip
="兩院風景"
/></
div
>
</
td
>
<
td
>
<
asp:Image
ID
="imgCrop"
runat
="server"
ImageUrl
="~/images/image5.jpg"
CssClass
="image"
ToolTip
="兩院風景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控件的各種技巧
?
實現給圖片添加和移除鏈接地址
$(
function
() {
//
wrap():在每個匹配的元素外層包上一個html元素
//
unwrap():將匹配元素的父級元素刪除，保留自身（和兄弟元素，如果存在）在原來的位置
//
添加圖片鏈接
$("#<%=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");
});
});
?
實現鼠標移動到圖片上在圖片上顯示圖片說明信息
$(
function
() {
$("#form1 img").hover(
function
() {
//
$(this).css("cursor", "pointer");
var
caption = $(
this
).attr("title");
$(
this
).after("<div class='caption'>" + caption + "</div>");
},
function
() {
$(".caption").remove();
});
});
?
實現鼠標移動到圖片上改變其透明度
$(
function
() {
$("#img1").animate({ opacity: 0.8 }, 200);
$("#img1").hover(
function
() {
$(
this
).animate({ opacity: 1.0 }, 200);
},
function
() {
$(
this
).animate({ opacity: 0.8 }, 200);
});
});
?
實現更換圖片的功能
$(
function
() {
$("#btnSwap").removeAttr("disabled");
$("#btnSwap").click(
function
(e) {
e.preventDefault();
$("#img1").attr("src", "../images/image2.jpg");
$(
this
).attr("disabled", "disabled");
});
});
?
實現圖片的剪切功能
<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) {
//
顯示剪切區域左上角點坐標
$("#txtX").val(e.x);
$("#txtY").val(e.y);
//
顯示剪切區域右下角點坐標
$("#txtX2").val(e.x2);
$("#txtY2").val(e.y2);
//
顯示剪切區域長和寬
$("#txtWidth").val(e.w);
$("#txtHeight").val(e.h);
}
});
?
實現鼠標移動到圖片上放大圖片
$(
function
() {
var
zoom = 1.1;
//
定義圖片放大的倍數
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);
});
});
?
實現圖片輪流切換
//
實現原理：通過z-index樣式屬性實現圖片切換的效果
$(
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));
}
});
});
});
?
實現簡單圖片相冊
我們在很多圖片展示的網上，會用到圖片相冊的功能，通過點擊縮略圖顯示對應的大圖片的功能，下面來看下如何簡單的實現這個效果。
首先需要準備頁面代碼：
<
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"
>
//
實現鼠標移動到縮略圖上顯示對應的大圖
$(
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
>
最終效果：
這些技巧雖然很基礎，通過學會使用這些技巧后，相信你以后在實現更復雜的圖片展示效果時，會更加輕松容易。
ASP.NET jQuery 食譜20 (通過jQuery操作Image控件技巧集合)