Authored by zhangxiaoru

多行文字滚动

<div class="pay-success">
{{# prompt}}
<div class="fraud-prompt"><div class="tip"></div>{{text}}
<div class="fraud-prompt">
<div class="fraud-tip">
<div class="tip"></div>
{{text}}
</div>
</div>
{{/prompt}}
{{/ prompt}}
<div class="top-tip">
<div class="img-c"></div>
<p class="ok-tip">恭喜您,付款成功!</p>
... ...
var $ = require('yoho-jquery'),
lazyLoad = require('yoho-jquery-lazyload');
var prompt = $('.fraud-prompt'), fraudTip, scrollVal, onePageH, diff, MyMar;
require('../common');
lazyLoad($('img.lazy'));
... ... @@ -14,3 +16,25 @@ require('../channel/maybe-like')(getGender());
if ($('#goods-list').length === 0) {
$('.maybe-like').hide();
}
if ($('.fraud-tip').height() > $('.fraud-prompt').height()) {
var speed = 40;
$('.fraud-prompt').append('<div class="fraud-tip">' + $('.fraud-tip').html() + '</div>');
fraudTip = $('.fraud-tip').eq(1);
function Marquee() {
prompt.scrollTop(prompt.scrollTop() + 1);
scrollVal = prompt.scrollTop();
onePageH = fraudTip[0].offsetTop;
diff = onePageH - scrollVal;
if (diff <= 0) {
prompt.scrollTop(Math.abs(diff));
}
}
MyMar = setInterval(Marquee, speed);
}
\ No newline at end of file
... ...
... ... @@ -10,6 +10,7 @@
border-bottom: solid 1px #e0e0e0;
text-align: center;
background-color: #fff;
z-index: 2;
.img-c {
margin-top: 25px;
... ... @@ -112,18 +113,23 @@
}
.fraud-prompt {
max-height: 62px;
height: 62px;
line-height: 62px;
background-color: #ff7579;
color: #fff;
overflow-y: scroll;
overflow: hidden;
}
.fraud-tip {
padding: 0 30px;
}
.tip {
margin: 15px 10px 0 30px;
width: 24px;
height: 32px;
background: resolve('cart/person-tip.png') no-repeat;
margin: 19px 10px 0 0;
width: 20px;
height: 24px;
background: resolve("cart/person-tip.png") no-repeat;
float: left;
background-size: 100% 100%;
}
}
... ...