前端JS: 滚动事件

1. CSS样式

.scroll{
    width: 360px;
    line-height: 25px;
    overflow: hidden;/* 溢出隐藏 */
}
.height50{
    height: 50px;/* 最大高度 */
}
/* 溢出展示省略号 */
.scroll li{
    height: 25px;
    padding-left: 10px;
    width: 360px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.scroll li:hover{
    cursor: pointer;
    text-shadow: 2px 2px 6px #1F6AFB;
}
.height25 {
    height: 25px;/* 最大高度 */
}
.scrollIcon{
    line-height: 25px;height:25px;vertical-align: -4px;
}
.scrollTxt{
    line-height: 25px;height:25px;vertical-align: middle;
}

 

2.HTML

<!-- scrollIcon样式的span标签，其内容仅为图标 -->

<div class="scroll height50"  id="slideContainer1">
    <ul>
        <li>
            <span class="scrollIcon">
                <svg t="1580809997427" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1119" width="12" height="12"><path d="M512 512m-448 0a448 448 0 1 0 896 0 448 448 0 1 0-896 0Z" fill="#267CFF" p-id="1120"></path></svg></span>
            <span class="scrollTxt">资产最大值(万元:  972.3</span>
        </li>
        <li>
            <span class="scrollIcon"><svg t="1580809997427" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1119" width="12" height="12"><path d="M512 512m-448 0a448 448 0 1 0 896 0 448 448 0 1 0-896 0Z" fill="#267CFF" p-id="1120"></path></svg></span>
            <span class="scrollTxt">资产平均数(元:  100,024.76</span>
        </li>
    </ul>
</div>

 

3.JS

//引入jQuery后，编写如下滚动事件的脚本
<script type="text/javascript">
    (function($) {
        $.fn.extend({
            Scroll: function(opt, callback) {
                //参数初始化
                if (!opt) var opt = {};
                var _this = this.eq(0).find("ul:first");
                var lineH = _this.find("li:first").height(), //获取行高
                    line = opt.line ? parseInt(opt.line, 10) : parseInt(this.height() / lineH, 10), //每次滚动的行数，默认为一屏，即父容器高度
                    speed = opt.speed ? parseInt(opt.speed, 10) : 500, //卷动速度，数值越大，速度越慢（毫秒）
                    timer = opt.timer ? parseInt(opt.timer, 10) : 3000; //滚动的时间间隔（毫秒）
                if (line == 0) line = 1;
                var upHeight = 0 - line * lineH;
                //滚动函数
                scrollUp = function() {
                    _this.animate({
                        marginTop: upHeight
                    }, speed, function() {
                        for (i = 1; i <= line; i++) {
                            _this.find("li:first").appendTo(_this);
                        }
                        _this.css({
                            marginTop: 0
                        });
                    });
                }
                //鼠标事件绑定
                _this.hover(function() {
                    clearInterval(timerID);
                }, function() {
                    timerID = setInterval("scrollUp()", timer);
                }).mouseout();
            }
        });
    })(jQuery);
</script>

<script type="text/javascript">
// 提示: 如需多个滚动栏,则重写上面脚本的Scroll事件即可，变量也需重命名

//绑定滚动事件
$(document).ready(function(){
    $("#slideContainer1").Scroll({
        line: 1,
        speed: 500,
        timer: 2000
    });
});
</script>