圖片輪播設(shè)計(jì)文檔

開(kāi)發(fā)設(shè)計(jì)文檔部門(mén)： 信息部 項(xiàng)目：pm系統(tǒng) 日期：2016.07.271引言開(kāi)發(fā)目的主要是對(duì)于圖片的美化，在零件詳情中，對(duì)圖片進(jìn)行美化。類似于淘寶的設(shè)計(jì)理念，對(duì)于零件詳情列表中的圖片放大處理進(jìn)行修改，達(dá)到類似于淘寶的效果，使得圖片看起來(lái)更加直觀。目標(biāo)用戶群體說(shuō)明需求的提交人員：內(nèi)部主要用戶：信息中心系統(tǒng)使用說(shuō)明任務(wù)清理模塊配置：URL---/njp-shop/shopprdpart!view.action<-C*的l.'Jlocalhost：8080/njp-shop/login!verify.action#3fiop_pni_p^rt_uiewJK-8900DBobbincase洋灰毛圓1ACKFR乎-I審件T年爵航.曰UN戀克81±~[\首頁(yè)項(xiàng)目臃平白地啕^燕崖涅球，門(mén)快透眼哥100s田I十11中型卬L苜更 ? 加：|1日在頁(yè)主頁(yè) JK-BMDDJK-8900DBobbinceifflKi：72DtftiT：7.-2Ji；2aiU'0JJK-8900DBobbinceifflKi：72DtftiT：7.-2Ji；2aiU'0J.'0J-2315'12'31f零件代碼二1121B5口&?？紟?kù)存￡數(shù)量：+a訂用閏三杷*+出.嘀頤 -正式太三五冽饕成品翦部白三冢二三知IJS統(tǒng)源三成fi知錢(qián)短三印沖要件關(guān)屐二：成品新美解::垂戶《鴿里導(dǎo)入卜三星白值瞬與》■5主頁(yè)~HE-內(nèi)若1.4系統(tǒng)前期準(zhǔn)備.上網(wǎng)查詢相關(guān)資料.HBuilder設(shè)計(jì)類似于淘寶的圖片放大功能2設(shè)計(jì)模型展示2.1相關(guān)流程2.2軟件交互界面數(shù)據(jù)庫(kù)模型展示核心業(yè)務(wù)邏輯項(xiàng)目標(biāo)題內(nèi)容1遇到的問(wèn)題.js沖突.圖片沒(méi)有進(jìn)行瀏覽2解決方法.(1)找到?jīng)_突部分進(jìn)行修改(2)如果沒(méi)找到，可以重新找一個(gè)相應(yīng)的js進(jìn)行替換.在Java設(shè)計(jì)時(shí)，考慮到一張圖片和多張圖片之間的區(qū)別。設(shè)計(jì)時(shí)，要才『張圖片和多張圖片產(chǎn)生的效果進(jìn)行分開(kāi)進(jìn)行設(shè)計(jì)。3Java設(shè)計(jì)//首先添加第一張照片Attachbeanl=attachs.get(0);sb.append("<divclass='tb-boothtb-pictb-s310'>");if(StringUtils.isNotEmpty(this.hrefUrl)){sb.append("<ahref='"+hrefUrl+"'><imgstyle='width:"+width-4-

+";height:"+height+";'src='"+this.root+"/attach/"+bean1.getFilePath()+"'rel='"+this.root+"/attach/"+bean1.getFilePath()+"'class='jqzoom'></a>");}else{sb.append("<imgstyle='width:"+width+";height:"+height+";'src='"+this.root+"/attach/"+bean1.getFilePath()+"'rel='"+this.root+"/attach/"+bean1.getFilePath()+"'class='jqzoom'>");}sb.append("</div>");//添加首照片下方小圖片sb.append("<ulclass='tb-thumb'id='thumblist'>");sb.append("<liclass='tb-selected'><divclass='tb-pictb-s40'><ahref='#''><imgsrc='"+this.root+"/attach/"+bean1.getFilePath()+"'mid='"+this.root+"/attach/"+bean1.getFilePath()+"'big='"+this.root+"/attach/"+bean1.getFilePath()+"'style='width:40px;height:40px'></a></div></li>");if(attachSize>1){for(Attachbean:attachs){if(disNum!=1){sb.append("<li><divclass='tb-pictb-s40'><ahref='#'><imgsrc='"+this.root+"/attach/"+bean.getFilePath()+"'mid='"+this.root+"/attach/"+bean.getFilePath()+"'big='"+this.root+"/attach/"+bean.getFilePath()+"'style='width:40px;height:40px'></a></div></li>");}disNum++;}}sb.append("</ul>");4njx.tld設(shè)計(jì)<tag><!--類似于淘寶圖片放大--><name>imageZoom</name><tagclass>com.jack.shop.helper.tag.ImageZoom</tagclass><body-content>empty</body-content><attribute><name>filesetId</name><required>true</required><rtexprvalue>true</rtexprvalue></attribute><attribute><name>width</name><required>false</required>-5-

<rtexprvalue>true</rtexprvalue></attribute><attribute><name>height</name><required>false</required><rtexprvalue>true</rtexprvalue></attribute><attribute><name>hrefUrl</name><required>false</required><rtexprvalue>true</rtexprvalue></attribute><attribute><name>disNum</name><required>false</required><rtexprvalue>true</rtexprvalue></attribute></tag>5Jsp設(shè)計(jì)css卞樣式設(shè)計(jì)<styletype="text/css">div,ul,li{padding:0;margin:0;}li{list-style-type:none;}img(vertical-align:top;border:0;}/*box*/.tb-pica{display:table-cell;text-align:center;vertical-align:middle;}.tb-picaimg{vertical-align:middle;}.tb-pica{*display:block;*font-family:Arial;*line-height:1;}.tb-thumb(margin:10px00;overflow:hidden;}.tb-thumbli(background:nonerepeatscroll00transparent;float:left;height:42px;margin:06px00;overflow:hidden;padding:1px;}.tb-s310,.tb-s310a(height:340px;width:340px;}.tb-s310,.tb-s310img(max-height:340px;max-width:340px;}.tb-s310a(*font-size:271px;}.tb-s40a(*font-size:35px;}.tb-s40,.tb-s40a(height:40px;width:40px;}.tb-booth(border:1pxsolid#CDCDCD;position:relative;z-index:1;}.tb-thumb.tb-selected(background:nonerepeatscroll00#C30008;height:40px;padding:2px;}.tb-thumb.tb-selecteddiv(background-color:#FFFFFF;border:mediumnone;}.tb-thumblidiv(border:1pxsolid#CDCDCD;}.zoomDiv(z-index:999;position:absolute;top:0px;left:0px;width:340px;height:340px;background:#ffffff；border:1pxsolid-6-

#CCCCCC;display:none;text-align:center;overflow:hidden;}.zoomMask{position:absolute;background:urL("images/mask.png")repeatscroll00transparent;cursor:move;z-index:1;}</style>div塊設(shè)計(jì)<divclass="grid_5img_slid"id="products"><divclass="previewslides_container"style=