posts - 930,  comments - 588,  views - 402万
< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8

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

   1:   <style type="text/css">
   2:          .imgthumb
   3:          {
   4:              height:100px;
   5:              width:100px;
   6:          }
   7:          .imgdiv
   8:          {
   9:              background-color:White;
  10:              margin-left:auto;
  11:              margin-right:auto;
  12:              padding:10px;
  13:              border:solid 1px #c6cfe1;
  14:              height:500px;
  15:              width:450px;
  16:          }
  17:  </style>
  18:   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript">
  19:  </script>
  20:       <script type="text/javascript">
  21:           $(function () {
  22:               $("img.imgthumb").click(function (e) {
  23:                   var newImg = '<img src='
  24:                                  + $(this).attr("src") + '></img>';
  25:                   $('#ladiv')
  26:                      .html($(newImg)
  27:                      .animate({ height: '400', width: '300' }, 1500));
  28:               });
  29:           });     
  30:  </script>

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

   1:      <h2>
   2:          Author: Petter Liu http://www.cnblogs.com/wintersun
   3:      </h2>
   4:      <asp:image class="imgthumb" id="imgA" imageurl="~/Images/ga1.jpg" runat="server"/>
   5:      <asp:image class="imgthumb" id="imgB" imageurl="~/Images/ga3.jpg" runat="server"/>
   6:      <hr/>
   7:      <div id="ladiv" style="height: 500px; width: 450px;"></div>
 
Ok, 当服务器控件呈现为IMG标签时,JQuery再去操作.点击图片时就有放大效果了.
希望对您Web开发有帮助.
 
您可能感兴趣的JQuery文章.
 


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

posted on   PetterLiu  阅读(4108)  评论(0编辑  收藏  举报
编辑推荐:
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
阅读排行:
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· 【.NET】调用本地 Deepseek 模型
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)
· 如何使用 Uni-app 实现视频聊天(源码,支持安卓、iOS)
历史上的今天:
2010-09-24 无配置文件使用Enterprise Library Logging Application Block 4.1
点击右上角即可分享
微信分享提示