半晶莹剔透的遮罩层

HTML

废话不说,直接上代码。可直接看效果,对着分析。。今天算是bootstrap
入门了,开心。。

Spring MVC 处理AJAX请求

 1 <body>   2     <h2>照片墙制作</h2>   3     <div class="container">   4         <img class="img1" src="img/img%20(1).jpg" height="150" width="150" alt="图片 1">   5         <img class="img2" src="img/img%20(2).jpg" height="160" width="200" alt="图片 2">   6         <img class="img3" src="img/img%20(3).jpg" height="170" width="200" alt="图片 3">   7         <img class="img4" src="img/img%20(4).jpg" height="240" width="200" alt="图片 4">   8         <img class="img5" src="img/img%20(5).jpg" height="300" width="300" alt="图片 5">   9     </div>  10 </body>

突然居然很多事情就是那样,不要太多的畏惧,迈出第一步其实就成功了一半了。

1.视图View的jsp页面

CSS(此处省略了浏览器私有属性前缀!)

<html ng-app="app">  <head>        <script src="../lib/js/angular.js"></script>      <script src="../lib/js/ui-bootstrap-tpls-0.13.0%20(1).js"></script>      <link    rel="stylesheet">  </head>  <body>  <div ng-controller="appController">      <script type="text/ng-template" id="myModalContent.html">          <div >              <h3>I'm a modal!</h3>          </div>          <div >              Message:{{message}}              <ul>                  <li ng-repeat="item in items">                      <a ng-click="selected.item=item">{{ item }}</a>                      <!--<a ng-click="test(item);">{{ item }}</a>-->                  </li>              </ul>              Selected: <b>{{ selected.item }}</b>          </div>          <div >              <button  ng-click="ok()">OK</button>              <button  ng-click="cancel()">Cancel</button>          </div>      </script>        <button  ng-click="showModal()">Open me!</button>      <div ng-show="selected">Selection from a modal: {{ selected }}</div>      <div >          <div >I start to learn bootstrap css frow now on!!</div>          <div >I start to learn bootstrap css frow now on!!</div>          <div >I start to learn bootstrap css frow now on!!</div>      </div>      <div >          <div  >              <div >Panel heading without title</div>              <div >                  Panel content              </div>          </div>      </div>      <div >          <div >              <div >                  <h1 >Panel title</h1>              </div>              <div >                  Panel content              </div>          </div>      </div>      <div >          <div >              <div >                  <h1 >Panel title</h1>              </div>              <div >                  Panel content              </div>              <div >Panel footer</div>          </div>      </div>      <div >          <div >              <!-- Default panel contents -->              <div >Panel heading</div>                <!-- Table -->              <ul >                  <li >Cras justo odio</li>                  <li >Dapibus ac facilisis in</li>                  <li >Morbi leo risus</li>                  <li >Porta ac consectetur ac</li>                  <li >Vestibulum at eros</li>              </ul>          </div>      </div>      <div >          <div >              <!-- Default panel contents -->              <div >Panel heading</div>                <!-- Table -->              <ul >                  <li >Cras justo odio</li>                  <li >Dapibus ac facilisis in</li>                  <li >Morbi leo risus</li>                  <li >Porta ac consectetur ac</li>                  <li >Vestibulum at eros</li>              </ul>          </div>      </div>      <div >          <div >              <!-- Default panel contents -->              <div >Panel heading</div>                <!-- Table -->              <ul >                  <li >                      14                      Cras justo odio                  </li>              </ul>          </div>      </div>      <div >              <div >                  <a   >                      Cras justo odio                  </a>                  <a   >Dapibus ac facilisis in</a>                  <a   >Morbi leo risus</a>                  <a   >Porta ac consectetur ac</a>                  <a   >Vestibulum at eros</a>              </div>      </div>      <div >          <button type="button"  aria-label="Left Align">                        </button>            <button type="button" >               Star          </button>      </div>      <div >          <div >              <!-- Default panel contents -->              <div >Panel heading</div>                <!-- Table -->              <table >                  <tr>                      <th>#</th>                      <th>Month</th>                      <th>Savings</th>                      <th>Savings</th>                  </tr>                  <tr>                      <th>1</th>                      <td>January</td>                      <td>$100</td>                      <td>$100</td>                  </tr>                  <tr>                      <th>2</th>                      <td>January</td>                      <td>$100</td>                      <td>$100</td>                  </tr>                  <tr>                      <th>3</th>                      <td>January</td>                      <td>$100</td>                      <td>$100</td>                  </tr>                  <tr>                      <th>4</th>                      <td>January</td>                      <td>$100</td>                      <td>$100</td>                  </tr>              </table>          </div>      </div>  </div>  </body>  <script>      angular.module('app', ['ui.bootstrap']).              service('DataService', ['$rootScope',                  function($rootScope) {                      this.data = {};                      this.data.message = 'This is a message from a service';                      this.data.items = ['item1', 'item2', 'item3'];                  }              ]).              controller('myModal', ['$scope', '$modalInstance', 'DataService',                  function($scope, $modalInstance, dataService) {                      $scope.data = dataService.data;                      $scope.message = dataService.data.message;                      $scope.items = dataService.data.items;                        $scope.selected = {                          item: $scope.items[0]                      };                      $scope.test = function(item){                          $scope.selected.item = item;                      }                        $scope.ok = function() {                          $modalInstance.close($scope.selected.item);                      };                        $scope.cancel = function() {                          $modalInstance.dismiss('cancel');                      };                    }              ]).              controller('appController', ['$scope', '$modal', '$log',                  function($scope, $modal, $log) {    //                    $scope.data = dataService.data;                        $scope.showModal = function() {                          var modalInstances = $modal.open({                              templateUrl: 'myModalContent.html',                              controller: 'myModal'                          });                            modalInstances.result.then(function(selectedItem) {                              $scope.selected = selectedItem;                          },function(){                              $log.info('Modal dismissed at :'+new Date())                          })                        };                    }              ]);    </script>  </html>  
<%@ page language="java" contentType="text/html; charset=UTF-8"
 pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
 function ajaxFunction() {
  var xmlHttp;
  try {
   xmlHttp = new XMLHttpRequest();
  } catch (e) {
   try {
    xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
   } catch (e) {
    try {
     xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (e) {
     alert("您的浏览器不支持AJAX!");
     return false;
    }
   }
  }
  return xmlHttp;
 }

 function sendAjaxReq() {
  var xmlHttp = ajaxFunction();//创建一个xmlHttpRequest对象
  xmlHttp.open("GET", "ajax?id=2");//向处理器controller发送请求,表示发送给方法名为ajax()方法
  xmlHttp.setRequestHeader("accept", "application/json");//设置请求头
  xmlHttp.onreadystatechange = function() {//编写回调函数
//    alert(xmlHttp.readyState);
//    if (xmlHttp.readyState == 4) {
//     eval("var result=" + xmlHttp.responseText);
//     alert("["+result[0].id+","+result[0].name+","+result[0].age+","+result[0].salary+"]");
//    }
   eval("var result=" + xmlHttp.responseText);//可以百度eval的作用
                        //将请求结果显示在页面上
   document.getElementById("div1").innerHTML = "["+result[0].id+","+result[0].name+","+result[0].age+","+result[0].salary+"]";
   document.getElementById("div2").innerHTML = "["+result[1].id+","+result[1].name+","+result[1].age+","+result[1].salary+"]";
  }
  xmlHttp.send(null);
 }
</script>
</head>
<body>

 <a   onclick="sendAjaxReq()">Ajax请求</a>
 <div id="div1"></div>
 <div id="div2"></div>

</body>
</html>
 1 <style>   2         * {margin:0; padding:0;}   3         body { background-color: #eee; padding-top: 50px;}   4         h2 { text-align: center;}   5         .container { position: relative; width:1000px; height:700px; margin:0px auto; }   6         img { position: absolute; top:50px; left:100px; cursor: pointer;   7             padding:10px 10px 25px; background-color: #fff; border:1px solid #ddd;   8             transition:0.5s; box-shadow: 3px 3px 3px #ccc;   9         }  10         .img1 {    left:40px;    top:20px;    transform:rotate(30deg);    z-index: 1;}  11         .img2 {    left:156px;    top:156px;    transform:rotate(-30deg);    z-index: 1;}  12         .img3 {    left:381px;    top:60px;    transform:rotate(30deg);    z-index: 1;}  13         .img4 {    left:458px;    top:256px;    transform:rotate(30deg);    z-index: 1;}  14         .img5 {    left:684px;    top:110px;    transform:rotate(-40deg);    z-index: 1;}  15         img:hover {    transform:rotate(0deg);    transform:scale(1.5);    box-shadow: 6px 6px 6px #656565; z-index: 2;}  16</style>

  

 
2.SpringMVC-servlet.xml的配置

SHOW

 

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:p="http://www.springframework.org/schema/p"
 xmlns:mvc="http://www.springframework.org/schema/mvc" xmlns:context="http://www.springframework.org/schema/context"
 xmlns:util="http://www.springframework.org/schema/util"
 xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.0.xsd    
            http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.0.xsd    
            http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd    
            http://www.springframework.org/schema/util http://www.springframework.org/schema/util/spring-util-3.0.xsd">


<!--  <bean  /> -->

<!--  <bean  /> -->

<!--  <bean  /> -->

 <bean >
  <property name="cacheSeconds" value="0" />
  <property name="messageConverters">
   <list>
    <bean
     ></bean>
   </list>
  </property>
 </bean>

 <!-- ViewResolver -->
 <bean
  >
  <property name="viewClass"
   value="org.springframework.web.servlet.view.JstlView" />
  <property name="prefix" value="/WEB-INF/" />
  <property name="suffix" value=".jsp" />
 </bean>

 <context:component-scan base-package="com.mvc.*"></context:component-scan>
 <mvc:annotation-driven />
</beans>

发表评论

电子邮件地址不会被公开。 必填项已用*标注

标签:
网站地图xml地图