Merge branch 'feature/payEnd' into 'release/5.4'

左右滚动



See merge request !114

 <div class="pay-success">
 	{{# prompt}}
 	<div class="fraud-prompt">
-		<div class="fraud-tip">
 		<div class="tip"></div>
-			{{text}}
+		<div class="fraud-tip">
+			<div class="tip-content">{{text}}</div>
 		</div>
 	</div>
 	{{/ prompt}}

 <div class="pay-success">
 	{{# prompt}}
 	<div class="fraud-prompt">
-		<div class="fraud-tip">
 		<div class="tip"></div>
-			{{text}}
+		<div class="fraud-tip">
+			<div class="tip-content">{{text}}</div>
 		</div>
 	</div>
 	{{/ prompt}}

 var $ = require('yoho-jquery'),
     lazyLoad = require('yoho-jquery-lazyload');
 
-var prompt = $('.fraud-prompt');
-var fraudTip, scrollVal, onePageH, diff, MyMar;
+var prompt = $('.fraud-prompt'),
+    tipContent = $('.tip-content'),
+    tip = $('.tip'),
+    fraudTip = $('.fraud-tip');
+
+var tipConWidth = tipContent.width(),
+    tipWidth = tip.width(),
+    promptWidth = prompt.width();
+
+var scrollVal,
+    onePageW,
+    diff;
 
 require('../common');
 
@@ -18,24 +28,26 @@ if ($('#goods-list').length === 0) {
     $('.maybe-like').hide();
 }
 
-if ($('.fraud-tip').height() > $('.fraud-prompt').height()) {
-    var speed = 40;
+if (tipConWidth > promptWidth - tipWidth) {
+    var speed = 30;
 
-    $('.fraud-prompt').append('<div class="fraud-tip">' + $('.fraud-tip').html() + '</div>');
+    tipContent.width(tipConWidth + (promptWidth / 2));
 
-    fraudTip = $('.fraud-tip').eq(1);
+    fraudTip.append('<div class="tip-content">' + tipContent.html() + '</div>').css({
+        width: 2 * tipContent.width()
+    });
 
     function Marquee() {
-        prompt.scrollTop(prompt.scrollTop() + 1);
+        prompt.scrollLeft(prompt.scrollLeft() + 1);
 
-        scrollVal = prompt.scrollTop();
-        onePageH = fraudTip[0].offsetTop;
-        diff = onePageH - scrollVal; 
+        scrollVal = prompt.scrollLeft();
+        onePageW = tipContent.eq(0).width();
+        diff = scrollVal - onePageW;
 
-        if (diff <= 0) {
-            prompt.scrollTop(Math.abs(diff));
+        if (diff > 0) {
+            prompt.scrollLeft(Math.abs(diff));
         }
     }
 
-    MyMar = setInterval(Marquee, speed);
+    setInterval(Marquee, speed);
 }

@@ -115,25 +115,30 @@
     .fraud-prompt {
         height: 62px;
         line-height: 63px;
-        background-color: #ff7579;
+        background: #ff797d;
         color: #fff;
+        background-size: 100% 100%;
         overflow: hidden;
-        background-size: 20% 60%;
+        width: 100%;
     }
 
     .fraud-tip {
-        padding: 0 30px;
+        margin-left: 60px;
+        overflow: hidden;
+        display: inline-block;
+        white-space: nowrap;
+    }
+
+    .tip-content {
+        float: left;
     }
 
     .tip {
-        margin-right: 10px;
-        width: 20px;
+        background: resolve("cart/tip.png") no-repeat;
+        background-size: 100% 100%;
+        width: 60px;
         height: 62px;
-        background: resolve("cart/person-tip.png") no-repeat center;
-        float: left;
-        background-size: 100% 39%;
-        line-height: 24px;
-        display: inline-block;
-        background-position: center;
+        position: absolute;
+        z-index: 3;
     }
 }