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。
分类:
JQuery
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· [.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