网站前端制作之列表无缝滚动

列表无缝滚动和列表可切换的无缝滚动，如下图:



 Css如下所示:
<style>
* {
margin: 0;
padding: 0;
}
 
li {
list-style: none;
}

.donation_list .box{
margin-top: 20px;
height: 330px;
overflow: hidden;
background:#F5F5F5;
}
#donation_list{
max-width: 360px;
margin-left: auto;
margin-right: auto;
}
.donation_list ul li{
padding: 15px 0px;
color: #777777;
font-size: 16px;
line-height: 1.7;
border-bottom: dashed #f1f1f1 1px;
overflow: hidden;
}
.donation_list ul li .date,
.donation_list ul li .name,
.donation_list ul li .sum{
float: left;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
.donation_list ul li .date{
width: 100px;
}
.donation_list ul li .sum{
width: 110px;
text-align: right;
}
.donation_list ul li .name{
width: -moz-calc(100% - 210px);
width: -webkit-calc(100% - 210px);
width: calc(100% - 210px);
text-align: center;
}
</style>
Html如下所示:

<script src="js/jquery-1.11.1.min.js"></script>
Js如下所示:
scrollUpDown($('#donation_list'));
        function scrollUpDown(obj) {
            var _height = obj.outerHeight();
            var _html = obj.find('#donation_list ul').html();
            obj.find('#donation_list ul').html(_html);
            function scroll() {
                return setInterval(function() {
                    if (parseFloat(obj.css('margin-top')) > -(_height)) {
                        obj.css({ 'margin-top': parseFloat(obj.css('margin-top')) - 1 });
                    } else {
                        obj.css({ 'margin-top': 0 });
                    }
                }, 60);
            }
            var _interval = scroll();
            obj.hover(function() {
                _interval = clearInterval(_interval);
            }, function() {
                _interval = scroll();
            });
        }
 
如果是要能切换的无缝对接，就如下所示：

Css如下所示：
<style>
* {
margin: 0;
padding: 0;
}
 
li {
list-style: none;
}
 
.list-wrap {
margin: 50px auto 0;
width: 500px;
vertical-align: top;
border: 1px solid rgb(219, 219, 219);
box-shadow: rgb(164, 160, 157) 1px 1px 9px -3px;
background-color: #F5F5F5;
}
 
.list-title {
display: flex;
border-bottom: 2px solid #182248;
height: 60px;
line-height: 40px;
}
 
.list-title li {
text-align: center;
flex: 1 1 1px;
cursor: pointer;
padding: 10px 30px;
color: rgb(51, 51, 51);
}
 
.list-title li.active {
color: #fff;
background-color: #182248;
}
 
.list-con {
padding: 20px;
}
 
.list-con .content {
display: none;
padding: 20px;
background-color: #fff;
}
 
.list-con .content li {
font-size: 12px;
height: 30px;
line-height: 30px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.list-con .content li .date,
.list-con .content li .name,
.list-con .content li .sum{
float: left;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
.list-con .content li .date{
width: 100px;
}
.list-con .content li .sum{
width: 110px;
text-align: right;
}
.list-con .content li .name{
width: -moz-calc(100% - 210px);
width: -webkit-calc(100% - 210px);
width: calc(100% - 210px);
text-align: center;
}
</style>
Html如下所示：



Js如下所示：
~(function ($, window, document, undefined) {
class Scroll {
constructor(eles, opts) {
this.$eles = eles;
opts = opts || {};
this.defaults = {
mode: 'CSS',
cssSpeed: 5,
jsSpeed: 'normal',
};
this.options = $.extend(true, {}, this.defaults, opts);
this.options.jsSpeed = this.handleJsSpeed(this.options.jsSpeed);
this.init();
}
init() {
this.handleEve();
}
handleJsSpeed(sp) {
switch (sp) {
case 'slow':
return 50;
case 'normal':
return 30;
case 'fast':
return 15;
}
}
handleEve() {
const _this = this;
this.$eles.each(function (i, domEle) {
_this.cloneNode(domEle);
_this.initValue(domEle);
_this.wrapDiv(domEle);
_this.createKeyframes();
if (_this.options.mode === 'CSS') {
_this.moveByCss(domEle);
_this.handleHoverByCss(domEle);
} else {
_this.moveByJs(domEle);
_this.handleHoverByJs(domEle);
}
});
}
cloneNode(ele) {
$(ele).children().clone().appendTo($(ele));
}
initValue(ele) {
$(ele).css({
margin: 0,
padding: 0
});
ele.num = 0;
const o = $(ele).parents(":hidden").eq($(ele).parents(":hidden").length - 1);
o.css({
display: 'block'
});
// ele.h = parseInt($(ele).outerHeight(true) / 2);
// To prevent the father setting display: flex; from affecting the height of the child element
let sum = 0;
$(ele).children().each(function (i, item) {
sum += $(item).outerHeight(true);
});
ele.h = parseInt(sum / 2);
o.css({
display: 'none'
});
}
wrapDiv(ele) {
$(ele).wrap($(`<div style="height: ${ele.h}px; overflow: hidden; padding: 0">`));
}
createKeyframes() {
const runkeyframes = `@keyframes IFER_MOVE {
100%{
transform: translateY(-50%);
}
}`;
const style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = runkeyframes;
document.querySelector('head').appendChild(style);
}
moveByCss(ele) {
$(ele).css({
animation: `IFER_MOVE ${this.options.cssSpeed}s linear infinite`
});
}
handleHoverByCss(ele) {
$(ele).hover(function () {
$(this).css('animation-play-state', 'paused');
}, function () {
$(this).css('animation-play-state', 'running');
});
}
moveByJs(ele) {
clearInterval(ele.timer);
ele.timer = setInterval(() => {
if (Math.abs(ele.num) === ele.h) {
ele.num = 0;
} else {
$(ele).css('transform', 'translateY(' + ele.num + 'px)');
}
ele.num--;
}, this.options.jsSpeed);
}
handleHoverByJs(ele) {
const _this = this;
$(ele).hover(function () {
clearInterval(ele.timer);
}, function () {
_this.moveByJs(ele);
});
}
}
$.fn.siScroll = function (options) {
new Scroll(this, options);
};
})(jQuery, window, document);


        $('.list-title li').click(function () {
            $(this).addClass('active').siblings().removeClass('active');
            $('.content').eq($(this).index()).show().siblings('.content').hide();
        });
 
        $(".scroll").siScroll();