前言
这节我们来介绍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 href="http://www.cnblogs.com" 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控件技巧集合)