ASP.NET jQuery 食谱20 (通过jQuery操作Image控件技巧集合)
前言
这节我们来介绍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>
最终效果：
这些技巧虽然很基础，通过学会使用这些技巧后，相信你以后在实现更复杂的图片展示效果时，会更加轻松容易。
