• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号
登陆 注册

ASP.NETjQuery食谱20(通过jQuery操作Image控件技巧集合)

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

前言

这节我们来介绍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="添加图片链接" />&nbsp;<asp:Button ID="btnRemove"
                            runat="server" Text="移除图片链接" />&nbsp;<asp:Button ID="btnSwap" runat="server" Text="换一张图片" />&nbsp;<br />
<asp:Button ID="btnPre" runat="server" Text="前一张" />&nbsp;<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>

最终效果：

这些技巧虽然很基础，通过学会使用这些技巧后，相信你以后在实现更复杂的图片展示效果时，会更加轻松容易。

鲜花
握手
雷人
路过
鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
More+
上一篇：
ASP.NET中实现URL重写发布时间：2022-07-10
下一篇：
ASP.NET附件弹窗下载发布时间：2022-07-10
热门推荐
More+
热门话题
More+
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服（服务时间 9:00～18:00）

在线QQ客服
地址：深圳市南山区西丽大学城创智工业园
电邮：jeky_zhao#qq.com
移动电话：139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap