spring-boot web应用（实现图片旋转、放大）

这里用到 artZoom.js，这JS插件可以旋转、放大图片。

pom.xml

<?xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"><modelVersion>4.0.0</modelVersion><parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>1.1.4.RELEASE</version><relativePath /> <!-- lookup parent from repository --></parent><groupId>com.mvmlabs.spring-boot-play</groupId><artifactId>spring-boot-web-mvc</artifactId><version>1.0</version><packaging>war</packaging><name>spring-boot-web-mvc</name><description>Configure spring boot starter project for Web MVC as a WAR file, still self executing.</description><properties><project.build.sourceEncoding>UTF-8</project.build.sourceEncoding><start-class>com.mvmlabs.springboot.Application</start-class><java.version>1.7</java.version><main.basedir>${basedir}/../..</main.basedir><m2eclipse.wtp.contextRoot>/</m2eclipse.wtp.contextRoot></properties><dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>javax.servlet</groupId><artifactId>jstl</artifactId></dependency><!-- Added to allow configuration as a web MVC, built as a WAR file (still executable) --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-tomcat</artifactId><scope>provided</scope></dependency><dependency><groupId>org.apache.tomcat.embed</groupId><artifactId>tomcat-embed-jasper</artifactId><scope>provided</scope></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope></dependency></dependencies><build><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId></plugin></plugins></build></project>

People.java

package com.mvmlabs.springboot.entity;public class People {private String gender;private String pname;private String mTestPicId;private String mTestPicUrl;private String testPicId;private String testPicUrl;private String mActualPicId;private String mActualPicUrl;private String actualPicId;private String actualPicUrl;public String getPname() {return pname;}public void setPname(String pname) {this.pname = pname;}public String getGender() {return gender;}public void setGender(String gender) {this.gender = gender;}public String getmTestPicId() {return mTestPicId;}public void setmTestPicId(String mTestPicId) {this.mTestPicId = mTestPicId;}public String getmTestPicUrl() {return mTestPicUrl;}public void setmTestPicUrl(String mTestPicUrl) {this.mTestPicUrl = mTestPicUrl;}public String getTestPicId() {return testPicId;}public void setTestPicId(String testPicId) {this.testPicId = testPicId;}public String getTestPicUrl() {return testPicUrl;}public void setTestPicUrl(String testPicUrl) {this.testPicUrl = testPicUrl;}public String getmActualPicId() {return mActualPicId;}public void setmActualPicId(String mActualPicId) {this.mActualPicId = mActualPicId;}public String getmActualPicUrl() {return mActualPicUrl;}public void setmActualPicUrl(String mActualPicUrl) {this.mActualPicUrl = mActualPicUrl;}public String getActualPicId() {return actualPicId;}public void setActualPicId(String actualPicId) {this.actualPicId = actualPicId;}public String getActualPicUrl() {return actualPicUrl;}public void setActualPicUrl(String actualPicUrl) {this.actualPicUrl = actualPicUrl;}}

GreetingController.java

package com.mvmlabs.springboot.web;import java.util.ArrayList;import java.util.List;import org.apache.commons.logging.Log;import org.apache.commons.logging.LogFactory;import org.springframework.stereotype.Controller;import org.springframework.ui.Model;import org.springframework.web.bind.annotation.PathVariable;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RequestMethod;import org.springframework.web.bind.annotation.RequestParam;import org.springframework.web.servlet.ModelAndView;import com.mvmlabs.springboot.entity.People;@Controllerpublic class GreetingController {private Log log = LogFactory.getLog(this.getClass());@RequestMapping(value = "/greet", method=RequestMethod.GET)public ModelAndView greet(@RequestParam(value = "name", required=false, defaultValue="World!")final String name, final Model model) {log.info("Controller has been invoked with Request Parameter name = '" + name + "'.");return new ModelAndView("greetings", "name", name);}@RequestMapping(value = "/greet/{name}", method=RequestMethod.GET)public ModelAndView greetTwoWays(@PathVariable(value="name") final String name, final Model model) {log.info("Controller has been invoked with Path Variable name = '" + name + "'.");People people1 = new People();people1.setGender("female");people1.setPname("Shawa");people1.setmTestPicId("Shawa_mpic");people1.setTestPicId("Shawa_pic");people1.setmTestPicUrl("img/baby_m.JPG");people1.setTestPicUrl("img/baby.jpg");people1.setmActualPicId("Shawa_mpic_actual");people1.setActualPicId("Shawa_pic_actual");people1.setmActualPicUrl("img/baby_m_new.jpg");people1.setActualPicUrl("img/baby_new.jpg");People people2 = new People();people2.setGender("male");people2.setPname("Adang");people2.setmTestPicId("Adang_mpic");people2.setTestPicId("Adang_pic");people2.setmTestPicUrl("img/monkey_m.JPG");people2.setTestPicUrl("img/monkey.jpg");people2.setmActualPicId("Adang_mpic_actual");people2.setActualPicId("Adang_pic_actual");people2.setmActualPicUrl("img/monkey_m_new.jpg");people2.setActualPicUrl("img/monkey_new.jpg");List<People> people = new ArrayList<People>();people.add(people1);people.add(people2);return new ModelAndView("greetings", "people", people);}}

greetings.jsp

<!DOCTYPE html><%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";  %><script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script><script type="text/javascript" src="../lib/artZoom.js"></script><script type="text/javascript">jQuery('a.artZoom').artZoom();</script><link rel="stylesheet" type="text/css" href="../lib/layout.css"><html><head><meta charset="ISO-8859-1"><title>Tiles Example</title><base href="<%=basePath%>">   </head><body><c:forEach var="people" items="${people}"><c:out escapeXml="false" value="<table style='width:70%;' cellpadding='2' cellspacing='0' border='1' bordercolor='#000000'>"></c:out><c:out escapeXml="false" value="<tbody>"></c:out><c:out escapeXml="false" value="<tr>"></c:out><c:out escapeXml="false" value="<td>"></c:out><c:out escapeXml="false" value="</td><td>"></c:out><c:out value="${people.gender}"></c:out><c:out escapeXml="false" value="</td><td>"></c:out><c:out value="${people.pname}"></c:out><c:out escapeXml="false" value="</td>"></c:out><c:out escapeXml="false" value="</tr>"></c:out><c:out escapeXml="false" value="</tbody>"></c:out><c:out escapeXml="false" value="</table>"></c:out><div class="div-a"><a class="miniImg artZoom" href='${people.testPicUrl}' rel='${people.testPicUrl}'><img src="<c:out value='${people.mTestPicUrl}'></c:out>" /></a></div><div class="div-b"><a class="miniImg artZoom" href='${people.actualPicUrl}' rel='${people.actualPicUrl}'><img src="<c:out value='${people.mActualPicUrl}'></c:out>" /></a></div><p> </p></c:forEach><!-- <p>Hello ${name}</p> --></body></html>

layout.css

.div-a{ float:left;width:49%;border:1px solid #000} .div-b{ float:left;width:49%;border:1px solid #000}

lrtk.css

@charset "utf-8";a.artZoom { position:relative; display:inline-block; *zoom:1;*display:inline; padding:3px; background:#FFF; border:solid 1px #F1F1F1; text-decoration:none; color:#CCC; cursor:url('../img/zoomin.cur'), pointer; position:relative;  }a.artZoom:hover { text-decoration:none; }a.artZoom span.loading { display:block; width:16px; height:16px; line-height:16px; overflow:hidden; text-indent:-9999em;  padding-left:20px; margin:2px 0; font-size:9px; background:#FFF url(../img/loading.gif) no-repeat 0 0; filter:alpha(opacity=70); opacity:0.7; }/* Download by http://down.liehuo.net */.artZoomBox { position:relative; }.artZoomBox .tool { visibility:hidden; position:absolute; top:8px; left:8px; }.artZoomBox.js_hover .tool { visibility:visible; }.artZoomBox .tool a { float:left; display:block; height:24px; width:24px; text-indent:-9999em; overflow:hidden; color:#FFF; background-color:#3A6EA5; text-decoration:none; filter:alpha(opacity=50); opacity:0.5; background-image:url(../img/photoTool.gif); background-repeat:no-repeat;  }.artZoomBox .tool a:hover { background-color:#FFF; filter:alpha(opacity=80); opacity:0.8; }.artZoomBox .tool a.hideImg { display:none; }.artZoomBox .tool a.imgLeft { background-position:0 0; }.artZoomBox .tool a.imgLeft { background-position:-24px 0; }.artZoomBox .tool a.viewImg { background-position:0 -24px; }.artZoomBox a.maxImgLink { cursor:url('../img/zoomout.cur'), pointer; display:inline-block; *zoom:1;*display:inline; }.artZoomBox a.maxImgLink .maxImg { padding:5px; background:#FFF; border:solid 1px #CCC; }a.miniImg:hover,.artZoomBox .maxImgLink .maxImg,.artZoomBox .tool span { border-color:#8294C8; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius:5px; -moz-box-shadow: 0 0 3px rgba(58, 110, 165, 0.5); -webkit-box-shadow: 0 0 3px rgba(58, 110, 165, 0.5); box-shadow: 0 0 3px rgba(58, 110, 165, 0.5); }

架构

启动

Run as > maven build > Goals:spring-boot:run

（重启）

netstat -ano|findstr 8080
taskkill /F /PID 3308

效果图
http://localhost:8080/greet/abc

点击图片：

旋转一下：

JS插件地址：

http://www.veryhuo.com/down/html/jQuery.artZoom.html