Merge branch 'feature/captcha' into release/0912

@@ -6,10 +6,18 @@
     </div>
     <div class="img-check-main">
         <ul class="img-check-pics">
-            <li class="img-check-pic" data-val="0" style="background-image:url('{{image2 images}}');"></li>
-            <li class="img-check-pic" data-val="0" style="background-image:url('{{image2 images}}');"></li>
-            <li class="img-check-pic" data-val="0" style="background-image:url('{{image2 images}}');"></li>
-            <li class="img-check-pic last-child" data-val="0" style="background-image:url('{{image2 images}}');"></li>
+            <li class="img-check-pic" data-val="0" >
+                <img src="{{image2 images}}" alt="">
+            </li>
+            <li class="img-check-pic" data-val="0">
+                <img src="{{image2 images}}" alt="">
+            </li>
+            <li class="img-check-pic" data-val="0">
+                <img src="{{image2 images}}" alt="">
+            </li>
+            <li class="img-check-pic last-child" data-val="0">
+                <img src="{{image2 images}}" alt="">
+            </li>
         </ul>
 
         <span class="img-check-tip hide">

@@ -59,10 +59,10 @@ Captcha.prototype = {
         this.picWidth = this.$imgPics.width();
 
         this.$imgPics.each(function(index, elem) {
-            var $elem = $(elem);
-            var position = self.calcPosition($elem);
+            var $container = $(elem);
+            var position = self.calcPosition($container);
 
-            $elem.css('backgroundPosition', position);
+            $container.find('img').css(position);
         });
 
         return this;
@@ -73,10 +73,10 @@ Captcha.prototype = {
      *  @param num index img-check-pic 的index
      *  @param num count img-check-pic
      */
-    calcPosition: function($elem) {
+    calcPosition: function($container) {
         var positionX, positionY;
-        var index = $elem.index();
-        var count = parseInt($elem.attr('data-val'), 10);
+        var index = $container.index();
+        var count = parseInt($container.attr('data-val'), 10);
         var unit = 'px';
 
         count = count % 4;
@@ -84,8 +84,10 @@ Captcha.prototype = {
         positionX = -index * this.picWidth + unit;
         positionY = -count * this.picWidth + unit;
 
-
-        return [positionX, positionY].join(' ');
+        return {
+            'margin-left': positionX,
+            'margin-top': positionY
+        };
     },
 
     /**
@@ -160,14 +162,11 @@ Captcha.prototype = {
      * Handler method: 旋转图片
      */
     rotateImg: function(event) {
-        var $pic = $(event.target);
-        var prevRotateCount = parseInt($pic.attr('data-val'), 10);
-
-        $pic.attr('data-val', prevRotateCount + 1);
+        var $picContainer = $(event.target).parent();
+        var prevRotateCount = parseInt($picContainer.attr('data-val'), 10);
 
-        $pic.css({
-            backgroundPosition: this.calcPosition($pic)
-        });
+        $picContainer.attr('data-val', prevRotateCount + 1);
+        $picContainer.find('img').css(this.calcPosition($picContainer));
 
     },
 

@@ -31,18 +31,23 @@
 
     li {
         float: left;
-        background: white no-repeat;
-        background-size: 240px 240px;
+        background: rgba(255, 255, 255, 0) no-repeat;
         width: 60px !important;
         height: 60px !important;
         border: 1px #e0e0e0 solid;
         margin-right: 7px;
         cursor: pointer;
+        overflow: hidden;
 
         &.last-child {
             margin-right: 0;
         }
     }
+
+    img {
+        width: 240px;
+        height: 240px;
+    }
 }
 
 .img-check-main {