Authored by zhangxiaoru

左右滚动

<div class="pay-success">
{{# prompt}}
<div class="fraud-prompt">
<div class="tip"></div>
<div class="fraud-tip">
<div class="tip"></div>
{{text}}
<div class="tip-content">{{text}}</div>
</div>
</div>
{{/ prompt}}
... ...
<div class="pay-success">
{{# prompt}}
<div class="fraud-prompt">
<div class="tip"></div>
<div class="fraud-tip">
<div class="tip"></div>
{{text}}
<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);
}
\ No newline at end of file
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;
}
}
... ...