sentcms/template/default/user/profile/avatar.html

{extend name="public/base" /}
{block name="style"}
<link href="__PUBLIC__/plugs/avatar/css/style.css" rel="stylesheet" type="text/css" media="all">
<script type="text/javascript" src="__PUBLIC__/plugs/avatar/js/ShearPhoto.js"></script>
<script type="text/javascript" src="__PUBLIC__/plugs/avatar/js/alloyimage.js"></script>
<script type="text/javascript" src="__PUBLIC__/plugs/avatar/js/handle.js"></script>
{/block}
{block name="body"}
<div class="tabs-wrapper">
	<ul class="nav nav-tabs">
		<li class="active"><a href="#editpw" data-toggle="tab">修改头像</a></li>
	</ul>
	<div class="tab-content">
		<div class="tab-pane fade in active" id="editpw">

			<div id="shearphoto_loading">程序加载中......</div>
			<!--这是2.2版本加入的缓冲效果，JS方法加载前显示的等待效果-->
			<div id="shearphoto_main">
				<!--效果开始.............如果你不要特效，可以直接删了........-->
				<div class="Effects" id="shearphoto_Effects" autocomplete="off">
					<strong class="EffectsStrong">截图效果</strong>
					<a href="javascript:;" StrEvent="原图" class="Aclick"><img src="__PUBLIC__/plugs/avatar/images/Effects/e0.jpg" />原图</a>
					<a href="javascript:;" StrEvent="美肤"><img src="__PUBLIC__/plugs/avatar/images/Effects/e1.jpg" />美肤效果</a>
					<a href="javascript:;" StrEvent="素描"><img src="__PUBLIC__/plugs/avatar/images/Effects/e2.jpg" />素描效果</a>
					<a href="javascript:;" StrEvent="自然增强"><img src="__PUBLIC__/plugs/avatar/images/Effects/e3.jpg" />自然增强</a>
					<a href="javascript:;" StrEvent="紫调"><img src="__PUBLIC__/plugs/avatar/images/Effects/e4.jpg" />紫调效果</a>
					<a href="javascript:;" StrEvent="柔焦"><img src="__PUBLIC__/plugs/avatar/images/Effects/e5.jpg" />柔焦效果</a>
					<a href="javascript:;" StrEvent="复古"><img src="__PUBLIC__/plugs/avatar/images/Effects/e6.jpg" />复古效果</a>
					<a href="javascript:;" StrEvent="黑白"><img src="__PUBLIC__/plugs/avatar/images/Effects/e7.jpg" />黑白效果</a>
					<a href="javascript:;" StrEvent="仿lomo"><img src="__PUBLIC__/plugs/avatar/images/Effects/e8.jpg" />仿lomo</a>
					<a href="javascript:;" StrEvent="亮白增强"><img src="__PUBLIC__/plugs/avatar/images/Effects/e9.jpg" />亮白增强</a>
					<a href="javascript:;" StrEvent="灰白"><img src="__PUBLIC__/plugs/avatar/images/Effects/e10.jpg" />灰白效果</a>
					<a href="javascript:;" StrEvent="灰色"><img src="__PUBLIC__/plugs/avatar/images/Effects/e11.jpg" />灰色效果</a>
					<a href="javascript:;" StrEvent="暖秋"><img src="__PUBLIC__/plugs/avatar/images/Effects/e12.jpg" />暖秋效果</a>
					<a href="javascript:;" StrEvent="木雕"><img src="__PUBLIC__/plugs/avatar/images/Effects/e13.jpg" />木雕效果</a>
					<a href="javascript:;" StrEvent="粗糙"><img src="__PUBLIC__/plugs/avatar/images/Effects/e14.jpg" />粗糙效果</a>
				</div>
				<!--效果结束...........................如果你不要特效，可以直接删了.....................................................-->
				<!--primary范围开始-->
				<div class="primary">
					<!--main范围开始-->
					<div id="main">
						<div class="point">
						</div>
						<!--选择加载图片方式开始-->
						<div id="SelectBox">
							<form id="ShearPhotoForm" enctype="multipart/form-data" method="post" target="POSTiframe">
								<input name="shearphoto" type="hidden" value="我要传参数" autocomplete="off">
								<!--示例传参数到服务端，后端文件UPLOAD.php用$_POST['shearphoto']接收,注意：HTML5切图时，这个参数是不会传的-->
								<a href="javascript:;" id="selectImage">
									<input type="file" name="UpFile" autocomplete="off" />
								</a>
							</form>
						</div>
						<!--选择加载图片方式结束-->
						<div id="relat">
							<div id="black">
							</div>
							<div id="movebox">
								<div id="smallbox">
									<img src="__PUBLIC__/plugs/avatar/images/default.gif" class="MoveImg" />
									<!--截框上的小图-->
								</div>
								<!--动态边框开始-->
								<i id="borderTop">
			                        </i>

								<i id="borderLeft">
			                        </i>

								<i id="borderRight">
			                        </i>

								<i id="borderBottom">
			                        </i>
								<!--动态边框结束-->
								<i id="BottomRight">
			                        </i>
								<i id="TopRight">
			                        </i>
								<i id="Bottomleft">
			                        </i>
								<i id="Topleft">
			                        </i>
								<i id="Topmiddle">
			                        </i>
								<i id="leftmiddle">
			                        </i>
								<i id="Rightmiddle">
			                        </i>
								<i id="Bottommiddle">
			                        </i>
							</div>
							<img src="__PUBLIC__/plugs/avatar/images/default.gif" class="BigImg" />
							<!--MAIN上的大图-->
						</div>
					</div>
					<!--main范围结束-->
					<div style="clear: both"></div>
					<!--工具条开始-->
					<div id="Shearbar">
						<a id="LeftRotate" href="javascript:;">
							<em>
			                </em> 向左旋转
						</a>
						<em class="hint L">
			        </em>
						<div class="ZoomDist" id="ZoomDist">
							<div id="Zoomcentre">
							</div>
							<div id="ZoomBar">
							</div>
							<span class="progress">
			                </span>
						</div>
						<em class="hint R">
			        </em>
						<a id="RightRotate" href="javascript:;">
			                向右旋转
			                <em>
			                </em>
			        </a>
						<p class="Psava">
							<a id="againIMG" href="javascript:;">重新选择</a>
							<a id="saveShear" href="javascript:;">保存截图</a>
						</p>
					</div>
					<!--工具条结束-->
				</div>
				<!--primary范围结束-->
				<div style="clear: both"></div>
			</div>
			<!--shearphoto_main范围结束-->

		</div>
	</div>
</div>
{/block}