相关“淘宝头像”53 张图片
相关素材精精精精精5060708090100每页显示红动创办于2005年，老品牌值得信赖
在线客服 :
客服热线 :咨询电话 周一至周日：8:30-22:30(12:00-13:00及法定假日除外)服务咨询周一至周日：8:30-22:30(12:00-13:00及法定假日除外)意见反馈您的意见是我们不断进步的动力！欢迎光临！支持本站请分享给您的朋友:
蓝色QQ头像可爱风格淘宝营业时间图片
图片说明：蓝色QQ头像可爱风格淘宝营业时间图片。早上9点至晚上12点
图片尺寸：160*169px
图片下载：鼠标右键图片另存为
版权申明：本站分享的模板和素材部分由站长设计提供，而大部分来源互联网，版权和出处未知。本站仅免费分享这些模板和素材供淘宝新手卖家学习参考使用，如果您喜欢这些模板，请购买付费模板。如果您是模板或者素材的原创作者，请告知模板出处和本站涉及的具体地址，我们会立即删除。如有疑问,友情链接,等可联系QQ：
------分隔线----------------------------
评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）店标制作、免费淘宝店标在线制作 第1页 - 朝夕网
当前位置： >
在线店标制作模板和素材
1-20/279 记录1/14 页首页上一页1...转到页跳至
本栏目为广大淘宝店铺的店主提供淘宝店招、店标、logo、标志免费在线制作模板和素材，同时提供了店铺装修素材，例如动态公告栏、分类、挂件、banner图片制作和生成，如果你喜欢本栏目，请将本页告诉你的朋友，如果你有更好的建议和想法请在线留言，以便我们得到更多的改进。大量的淘宝网店装修素材，相信你的店铺会焕然一新脱颖而出的！做淘宝店标请访问朝夕网！当然你还可以做拍拍，易趣等购物网站的店铺标志，方法一样。
扩展阅读：淘宝店铺是指所有淘宝卖家在淘宝所使用的旺铺或者店铺，淘宝旺铺是相对普通店铺而诞生的，每个在淘宝新开店的都是系统默认产生的店铺界面，就是常说的普通店铺。而淘宝旺铺（个性化店铺）服务是由淘宝提供给淘宝卖家，允许卖家使用淘宝提供的计算机和网络技术，实现区别于淘宝一般店铺展现形式的个性化店铺页面展现功能的服务。简单来说，就是花钱向淘宝买一个有个性、全新的店铺门面。淘宝旺铺是淘宝提供的一种增值服务，如果需要使用，必须订购，是要收取相关费用的。
Copyright & 2014 www.zhaoxi.net. All Rights Reserved仿淘宝头像上传功能（一）——前端篇。 - cjnmy36723 - 推酷
仿淘宝头像上传功能（一）——前端篇。 - cjnmy36723
先看看效果：
1.使用框架与插件。
①jquery框架。
②jquery框架的&uploadify 插件来上传文件。
③jquery框架的 Jcrop&插件来裁剪并预览头像图片。
2.页面部分。
引用框架：
&script type=&text/javascript& src=&/Contents/Scripts/jquery-1.10.2.min.js&&&/script&
&link rel=&stylesheet& href=&/Contents/Css/uploadify.css& type=&text/css& /&
&link rel=&stylesheet& href=&/Contents/Css/jquery.Jcrop.min.css& type=&text/css& /&
&script type=&text/javascript& src=&/Contents/Scripts/jquery.Jcrop.min.js&&&/script&
&script type=&text/javascript& src=&/Contents/Scripts/jquery.uploadify.min.js&&&/script&
自写的CSS：
&link rel=&stylesheet& href=&/Contents/Css/Icon.css& type=&text/css& /&
头像预览区域定义一个宽是400高是300的区域，即所有上传的头像图片，如果它的宽或者高大于这个尺寸，则自动缩放到合适的尺寸在进行显示：
&div style=&background-color:WindowF width:400 height:300&&
&img id=&uploadPic& style=&background-color:& /&
110像素正方形头像预览区域：
定义了一个指定宽与高都是110的区域。
&span id=&preview_box_200& class=&crop_preview& style=&background-color:#0094&&
&img id=&crop_preview_200&/&110 X 110
37像素正方形头像预览区域：
定义了一个指定宽与高都是37的区域。
&span id=&preview_box_small& class=&crop_preview& style=&background-color:#ff6a00; width:37 height:37 margin-left:200&&
&img id=&crop_preview_small& /&37 X 37
上传头像的表单：
X坐标则是裁剪框的矩形的左上角的点相对于预览区域里的头像图片的左上角的偏移X坐标。
Y坐标则是裁剪框的矩形的左上角的点相对于预览区域里的头像图片的左上角的偏移Y坐标。
Width 是裁剪框矩形的宽度。
Height 是裁剪框矩形的高度。
file 表单就是上传图片的按钮。
&form id=&userIconForm& action=&/user/settings/icon& method=&post&&
&input id=&X& name=&X& type=&hidden& /&
&input id=&Y& name=&Y& type=&hidden& /&
&input id=&Width& name=&Width& type=&hidden& /&
&input id=&Height& name=&Height& type=&hidden& /&
&input id=&btnAjaxSubmit& type=&button& value=&提交& /&
&input type=&file& id=&file& name=&file& /&
头像上传的JS：
当头像上传成功时，将图片信息设置到头像预览区域，并调用
onShowPreview();
函数来激活选框并裁剪预览头像。
&script type=&text/javascript&&
jQuery(function ($) {
//头像上传，使用 uploadify 插件。
$(&#file&).uploadify({
width: 120,
height: 30,
dataType: 'json',
swf: '/Contents/Css/uploadify.swf',
uploader: '/user/settings/icon/load',
onUploadSuccess: fun
//这里返回的数据并不是 Json 对象。
function fun(fileObj, data, response) {
//把 Json 字符串转换成 Json 对象。
var dataObj = eval(&(& + data + &)&);
if (response != &&) {
if (data != null) {
$(&#uploadPic&).attr(&style&, &width:& + dataObj.ViewWidth + &; height:& + dataObj.ViewHeight + &;&);
$(&#uploadPic&).attr(&src&, dataObj.Image);
$(&#crop_preview_200&).attr(&src&, dataObj.Image);
$(&#crop_preview_small&).attr(&src&, dataObj.Image);
onShowPreview();
alert(&文件上传出错！&);
头像裁剪并预览的JS：
function onShowPreview() {
//裁剪预览图片，使用 Jcrop 插件。
$('#uploadPic').Jcrop({
onChange: showPreview,
onSelect: showPreview,
allowSelect: false,
aspectRatio: 1,
bgOpacity: 0.5,
aspectRatio: 1 / 1,
minSize: [60, 60],
setSelect: [0, 0, 60, 60]
//简单的事件处理程序，响应自onChange,onSelect事件，按照上面的Jcrop调用
function showPreview(coords) {
$(&#X&).val(coords.x);
$(&#Y&).val(coords.y);
$(&#Width&).val(coords.w);
$(&#Height&).val(coords.h);
if (parseInt(coords.w) & 0) {
//计算预览区域图片缩放的比例，通过计算显示区域的宽度(与高度)与剪裁的宽度(与高度)之比得到
var rx = $(&#preview_box_200&).width() / coords.w;
var ry = $(&#preview_box_200&).height() / coords.h;
//通过比例值控制图片的样式与显示
$(&#crop_preview_200&).css({
//预览图片宽度为计算比例值与原图片宽度的乘积
width: Math.round(rx * $(&#uploadPic&).width()) + &px&,
//预览图片高度为计算比例值与原图片高度的乘积
height: Math.round(rx * $(&#uploadPic&).height()) + &px&,
marginLeft: &-& + Math.round(rx * coords.x) + &px&,
marginTop: &-& + Math.round(ry * coords.y) + &px&
/************37 X 37************/
var rx = $(&#preview_box_small&).width() / coords.w;
var ry = $(&#preview_box_small&).height() / coords.h;
//通过比例值控制图片的样式与显示
$(&#crop_preview_small&).css({
//预览图片宽度为计算比例值与原图片宽度的乘积
width: Math.round(rx * $(&#uploadPic&).width()) + &px&,
//预览图片高度为计算比例值与原图片高度的乘积
height: Math.round(rx * $(&#uploadPic&).height()) + &px&,
marginLeft: &-& + Math.round(rx * coords.x) + &px&,
marginTop: &-& + Math.round(ry * coords.y) + &px&
无刷新提交：
$(&#btnAjaxSubmit&).click(function () {
type: &POST&,
url: &/user/settings/icon&,
data: $(this).parent().serialize(),
dataType: 'json',
success: function (data) {
if (data & 0) {
alert(&头像上传成功！&);
error: function () {
alert(&头像上传异常！&);
已发表评论数()
已收藏到推刊！
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
排版有问题
没有分页内容
视频无法显示
图片无法显示