[b]1.前台展现实现
[/b]网上找到这个jquery.Jcrop,稍看了下,发现它提供的效果完全能满足项目需求.
官方网址:http://deepliquid.com/content/Jcrop.html,感兴趣的朋友可去看看.
页面先引用相关样式和脚本:
[url=Styles/jquery.Jcrop.css]<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="Scripts/jquery.Jcrop.js" type="text/javascript"></script>
页面body部分代码:
<asp:Label ID="Label1" Text="原始图片" runat="server"></asp:Label><br />
<asp:Image ID="target" runat="server" />
<br />
<asp:Label ID="Label2" runat="server" Text="最终显示效果"></asp:Label>
<div id="preImg" style="width: 150px; height: 80px; overflow: hidden;">
<asp:Image ID="preview" alt="Preview" runat="server" />
</div>
其中ID为preImg的Style的width和height的值是裁剪图片的尺寸,而且要定义这个DIV的overflow:hidden.能够及时看到图片的裁剪效果的关键CSS属性就是它了.
接下来讲讲jquery.Jcrop.js的基本用法,及相关javascript的实现.
首先定义一些临时变量,来保存相关参数
var jcrop_api, boundx, boundy;
然后给图片的DOM元素绑定Jcrop功能,相关的方法属性看英文就能明白其中的意思.
[url=http://xiazai.jb51.net/201110/yuanma/aspnet_source.rar]source[/url]
机械节能产品生产企业官网模板...
大气智能家居家具装修装饰类企业通用网站模板...
礼品公司网站模板
宽屏简约大气婚纱摄影影楼模板...
蓝白WAP手机综合医院类整站源码（独立后台）...
