Asp.net使用JQuery实现放大图片效果

        JQuery已成为现在流行的脚本库, 今天我们还实现Asp.net使用JQuery实现放大图片效果. 首先让我们在ASPX引用JS文件,简单的CSS:

 <style type="text/css">
        .imgthumb
        {
            height:100px;
            width:100px;
        }
        .imgdiv
        {
            background-color:White;
            margin-left:auto;
            margin-right:auto;
            padding:10px;
            border:solid 1px #c6cfe1;
            height:500px;
            width:450px;
        }
</style>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript">
</script>
     <script type="text/javascript">
         $(function () {
             $("img.imgthumb").click(function (e) {
                 var newImg = '<img src='
                                + $(this).attr("src") + '></img>';
                 $('#ladiv')
                    .html($(newImg)
                    .animate({ height: '400', width: '300' }, 1500));
             });
         });
</script>

接着对应我们的HTML片段代码:

    <h2>
        Author: Petter Liu http://www.cnblogs.com/wintersun
    </h2>
    <asp:image class="imgthumb" id="imgA" imageurl="~/Images/ga1.jpg" runat="server"/>
    <asp:image class="imgthumb" id="imgB" imageurl="~/Images/ga3.jpg" runat="server"/>
    <hr/>
    <div id="ladiv" style="height: 500px; width: 450px;"></div>

 

Ok, 当服务器控件呈现为IMG标签时,JQuery再去操作.点击图片时就有放大效果了.

希望对您Web开发有帮助.

 

您可能感兴趣的JQuery文章.

 

作者：Petter Liu
出处：http://www.cnblogs.com/wintersun/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
该文章也同时发布在我的独立博客中-Petter Liu Blog。