fe / yohobuywap-node · Commits

Go to a project

Authored by zhangxiaoru
Commit 359ab42045fef5d9ee88cdb36a4b16f60e8c9393 1 parent 7cd98545

左右滚动

Inline Side-by-side
Showing 5 changed files with 45 additions and 28 deletions
1 <div class="pay-success"> 1 <div class="pay-success">
2 {{# prompt}} 2 {{# prompt}}
3 <div class="fraud-prompt"> 3 <div class="fraud-prompt">
4 - <div class="fraud-tip">  
5 <div class="tip"></div> 4 <div class="tip"></div>
6 - {{text}} 5 + <div class="fraud-tip">
  6 + <div class="tip-content">{{text}}</div>
7 </div> 7 </div>
8 </div> 8 </div>
9 {{/ prompt}} 9 {{/ prompt}}
1 <div class="pay-success"> 1 <div class="pay-success">
2 {{# prompt}} 2 {{# prompt}}
3 <div class="fraud-prompt"> 3 <div class="fraud-prompt">
4 - <div class="fraud-tip">  
5 <div class="tip"></div> 4 <div class="tip"></div>
6 - {{text}} 5 + <div class="fraud-tip">
  6 + <div class="tip-content">{{text}}</div>
7 </div> 7 </div>
8 </div> 8 </div>
9 {{/ prompt}} 9 {{/ prompt}}
1 var $ = require('yoho-jquery'), 1 var $ = require('yoho-jquery'),
2 lazyLoad = require('yoho-jquery-lazyload'); 2 lazyLoad = require('yoho-jquery-lazyload');
3 3
4 -var prompt = $('.fraud-prompt');  
5 -var fraudTip, scrollVal, onePageH, diff, MyMar; 4 +var prompt = $('.fraud-prompt'),
  5 + tipContent = $('.tip-content'),
  6 + tip = $('.tip'),
  7 + fraudTip = $('.fraud-tip');
  8 +
  9 +var tipConWidth = tipContent.width(),
  10 + tipWidth = tip.width(),
  11 + promptWidth = prompt.width();
  12 +
  13 +var scrollVal,
  14 + onePageW,
  15 + diff;
6 16
7 require('../common'); 17 require('../common');
8 18
@@ -18,24 +28,26 @@ if ($('#goods-list').length === 0) { @@ -18,24 +28,26 @@ if ($('#goods-list').length === 0) {
18 $('.maybe-like').hide(); 28 $('.maybe-like').hide();
19 } 29 }
20 30
21 -if ($('.fraud-tip').height() > $('.fraud-prompt').height()) {  
22 - var speed = 40; 31 +if (tipConWidth > promptWidth - tipWidth) {
  32 + var speed = 30;
23 33
24 - $('.fraud-prompt').append('<div class="fraud-tip">' + $('.fraud-tip').html() + '</div>'); 34 + tipContent.width(tipConWidth + (promptWidth / 2));
25 35
26 - fraudTip = $('.fraud-tip').eq(1); 36 + fraudTip.append('<div class="tip-content">' + tipContent.html() + '</div>').css({
  37 + width: 2 * tipContent.width()
  38 + });
27 39
28 function Marquee() { 40 function Marquee() {
29 - prompt.scrollTop(prompt.scrollTop() + 1); 41 + prompt.scrollLeft(prompt.scrollLeft() + 1);
30 42
31 - scrollVal = prompt.scrollTop();  
32 - onePageH = fraudTip[0].offsetTop;  
33 - diff = onePageH - scrollVal; 43 + scrollVal = prompt.scrollLeft();
  44 + onePageW = tipContent.eq(0).width();
  45 + diff = scrollVal - onePageW;
34 46
35 - if (diff <= 0) {  
36 - prompt.scrollTop(Math.abs(diff)); 47 + if (diff > 0) {
  48 + prompt.scrollLeft(Math.abs(diff));
37 } 49 }
38 } 50 }
39 51
40 - MyMar = setInterval(Marquee, speed); 52 + setInterval(Marquee, speed);
41 } 53 }
@@ -115,25 +115,30 @@ @@ -115,25 +115,30 @@
115 .fraud-prompt { 115 .fraud-prompt {
116 height: 62px; 116 height: 62px;
117 line-height: 63px; 117 line-height: 63px;
118 - background-color: #ff7579; 118 + background: #ff797d;
119 color: #fff; 119 color: #fff;
  120 + background-size: 100% 100%;
120 overflow: hidden; 121 overflow: hidden;
121 - background-size: 20% 60%; 122 + width: 100%;
122 } 123 }
123 124
124 .fraud-tip { 125 .fraud-tip {
125 - padding: 0 30px; 126 + margin-left: 60px;
  127 + overflow: hidden;
  128 + display: inline-block;
  129 + white-space: nowrap;
  130 + }
  131 +
  132 + .tip-content {
  133 + float: left;
126 } 134 }
127 135
128 .tip { 136 .tip {
129 - margin-right: 10px;  
130 - width: 20px; 137 + background: resolve("cart/tip.png") no-repeat;
  138 + background-size: 100% 100%;
  139 + width: 60px;
131 height: 62px; 140 height: 62px;
132 - background: resolve("cart/person-tip.png") no-repeat center;  
133 - float: left;  
134 - background-size: 100% 39%;  
135 - line-height: 24px;  
136 - display: inline-block;  
137 - background-position: center; 141 + position: absolute;
  142 + z-index: 3;
138 } 143 }
139 } 144 }