图片轮播设计文档
开发设计文档
部门：___________信息部__________
项目：__________pm系统__________
日期：___________2016.07.27________

1 引言
1.1 开发目的
主要是对于图片的美化，在零件详情中，对图片进行美化。类似于淘宝的设计理念，对于零件详情列表中的图片放大处理进行修改，达到类似于淘宝的效果，使得图片看起来更加直观。
1.2 目标用户体说明
需求的提交人员：内部
主要用户：信息中心
1.3 系统使用说明
任务清理模块配置：URL--- /njp-shop/shop_prd_part!view.action
1.4 系统前期准备
1. 上网查询相关资料
2. HBuilder设计类似于淘宝的图片放大功能
2 设计模型展示
2.1 相关流程
2.2 软件交互界面
项目
功能模块名称
操作截图
1
图片放大展示
2
设计
1. 首先设计整体框架
2. 浏览所有图片
3. 对图片进行放大效果处理
4
导入
1． 导入与放大图片相关的js
2． 设计相关的css样式
2.3 数据库模型展示
2.4 核心业务逻辑
项目
标题
内容
1
遇到的问题
1． js冲突
2． 图片没有进行浏览
2
解决方法
1.(1)到冲突部分进行修改
(2)如果没到，可以重新一个相应的js进行替换
2.在Java设计时，考虑到一张图片和多张图片之间的区别。设计时，要把一张图片和多张图片产生的效果进行分开进行设计。
3
Java设计
//首先添加第一张照片
            Attach bean1 = (0);
            sb.append("<div class='tb-booth tb-pic tb-s310'>");
            if (StringUtils.isNotEmpty(this.hrefUrl)) {
                sb.append("<a href='" + hrefUrl + "'><img style='width:" + width
                        + ";height:" + height + ";' src='" + this.root + "/attach/" + FilePath() + "' rel='"+this.root + "/attach/" + FilePath()+"' class='jqzoom'></a>");
            } else {
                sb.append("<img style='width:" + width
                        + ";height:" + height + ";' src='" + this.root + "/attach/" + FilePath() + "' rel='"+this.root + "/attach/" + FilePath()+"' class='jqzoom'>");
            }
            sb.append("</div>");
            //添加首照片下方小图片
            sb.append("<ul class='tb-thumb' id='thumblist'>");
            sb.append("<li class='tb-selected'><div class='tb-pic tb-s40'><a href='#''><img src='" + this.root + "/attach/" + FilePath() + "' mid='" + this.root + "/attach/" + FilePath() + "' big='" + this.root + "/attach/"+FilePath()+"' style='width: 40px;height: 40px'></a></div></li>");
            if(attachSize>1) {
                for (Attach bean : attachs) {
                    if(disNum!=1){
                        sb.append("<li><div class='tb-pic tb-s40'><a href='#'><img src='" + this.root + "/attach/" + FilePath() + "' mid='" + this.root + "/attach/" + FilePath() + "' big='" + this.root + "/attach/" + FilePath() + "' style='width: 40px;height: 40px'></a></div></li>");
                    }
                    disNum++;
                }
            }
            sb.append("</ul>");
4
njx.tld设计
<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>
<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>
5
Jsp设计
1. css样式设计
<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:middlejs实现轮播图最简代码;}
.tb-pica{*display:block;*font-family:Arial;*line-height:1;}
.tb-thumb{margin:10px 0 0;overflow:hidden;}
.tb-thumbli{background:none repeat scroll 0 0 transparent;float:left;height:42px;margin:0 6px 0 0;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:1px solid #CDCDCD;position:relative;z-index:1;}
.tb-thumb.tb-selected{background:none repeat scroll 0 0 #C30008;height:40px;padding:2px;}
.tb-thumb.tb-selecteddiv{background-color:#FFFFFF;border:medium none;}
.tb-thumblidiv{border:1px solid #CDCDCD;}
.zoomDiv{z-index:999;position:absolute;top:0px;left:0px;width:340px;height:340px;background:#ffffff;border:1px solid #CCCCCC;display:none;text-align:center;overflow:hidden;}
.zoomMask{position:absolute;background:url("images/mask.png") repeat scroll 0 0 transparent;cursor:move;z-index:1;}
</style>
2. div块设计
<divclass="grid_5 img_slid"id="products">
    <divclass="preview slides_container"style="height:340px;width:340px;">
        <njx:imageZoomfilesetId="${bean.photos}"width="340px"height="340px"/>
    </div>
</div>
3. js连接
<script type="text/javascript"src="${contextPath}/styles/www/js/shop/jquery.imagezoom.min.js"></script>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。