背景url img weibo pic pngno-repeat左系统配图上.pdfVIP

第41章系统--配图上传[上]

学习要点：

1.按钮

2.显示区域

讲：恢

本课风网和城e提供

本节课，我们主要讲解一下上传配图的设计方案。

．按钮

和表情插件一样，我们需要点击按钮，显示一个可以上传配图的框。

//HTML部分

ahref=javascript:void(0);class=weibo_picid=pic_btnspan

class=pic_arrow_top/span/a

//CSS部分

#main.main_left.weibo_pic{

float:left;

text-decoration:none;

font-size:13px;

background:url(../img/weibo_pic.png)no-repeatleft;

text-indent:17px;

margin:5px0012px;

color:#666;

position:relative;

}

#main.main_left.weibo_pic:hover{

text-decoration:underline;

}

．显示区域

和表情插件一样，需要展开一个显示区域。我们模拟表情插件的写法，克隆一个。

//HTML部分

divclass=weibo_pic_boxid=pic_boxstyle=display:none;

divclass=weibo_pic_header

spanclass=weibo_pic_info共0张，还能上传4张（按住ctrl可

选择多张）/span

ahref=javascript:void(0);class=close×/a

/div

divclass=weibo_pic_list

inputtype=filename=fileid=file

/div

/div

//CSS部分

#main.main_left.weibo_pic_box{

margin:0auto;

position:absolute;

min-width:350px;

border:1pxsolid#D0D0D0;

box-shado:005px#ccc,1px1px0rgba(127,127,127,0.1);

border-radius:2px;

overflo:hidden;

background:nonerepeatscroll00white;

zoom:1;

z-index:100;

}

#main.main_left.weibo_pic_header{

height:30px;

line-height:30px;

text-indent:10px;

background:#fafafa;

font-size:13px;

color:#666;

}

#main.main_left.weibo_pic_list{

padding:10px;

}

#main.main_left.weibo_pic_info{

float:left;

}

#main.main_left.close{

float:right;

}

//模拟表情插件的JS配图插件

/*

*上传图像JS插件

*/

$(function(){

varlee_pic={

uploadi