基于JQ的无缝滚动封装

公司最近项目无缝滚动效果比较多，趁闲的时候写了一个小的插件。方便实用，这里分享给大家。

可以实现左右无缝滚动，上下无缝滚动，还可以调整滚动的速度，鼠标悬停功能。

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script src="seamless.js"></script>
    <style>
        *{margin: 0;padding: 0}
    </style>
</head>
<body>
<div id="seamWrap" style="width: 100px;height: 100px;overflow:hidden;">
    <ul id="seamless">
        <li>无缝滚动-1</li>
        <li>无缝滚动-2</li>
        <li>无缝滚动-3</li>
        <li>无缝滚动-4</li>
        <li>无缝滚动-5</li>
        <li>无缝滚动-6</li>
        <li>无缝滚动-7</li>
        <li>无缝滚动-8</li>
        <li>无缝滚动-9</li>
        <li>无缝滚动-10</li>
    </ul>
</div>
    <script>
        $('#seamless').initSeam({
            "direction":"left",   // 方向：left(左),right(右),top(上),bottom(下)
            "speed":50,   //速度
            "movepx": 1, // 每次移动距离
            "hover": seamHover, //鼠标悬浮事件  参数:true时，鼠标放上停止滚动，移除继续。
            "click":seamClik  //鼠标点击事件
        });
        function seamHover() {
            console.log($(this).html())
        }
        function seamClik() {
           console.log($(this).html())
        }
    </script>
</body>
</html>

JS代码：

/**
 Created by 王永存 on 2018/7/20.
 使用方法：
 $('#seamless').initSeam({
            "direction":"left",   // 方向：left(左),right(右),top(上),bottom(下)
            "speed":50,   //速度
            "movepx": 1, // 每次移动距离
            "hover": seamHover, //鼠标悬浮事件  参数:true时，鼠标放上停止滚动，移除继续。
            "click":seamClik  //鼠标点击事件
        });
 *
 * **/
$.fn.extend({
    "initSeam":function(opt) {
        if (typeof opt != "object") {
            alert('参数错误!');
            return false;
        }
        var seamId = $(this).attr("id");
        if(!seamId){
            alert("设定参数id!");
            return false;
        }
        var MyMar =null;
        //获取包裹层宽高
        var parId = $(this).parent();
        var wrapHeight = parId.outerHeight();
        var wrapWidth = parId.outerWidth();
        //获取元素的宽高
        var eleHeight = $(this).outerHeight();
        if((opt.direction =='top'||opt.direction =='bottom')&&wrapHeight>=eleHeight){
            return false;
        }
        if(opt.direction =='top'){
            parId.append( $('<ul></ul>').html($(this).html()));
            MyMar=setInterval(Marquee,opt.speed);
            function Marquee(){
                if (parId.scrollTop() >= eleHeight) {
                    parId.scrollTop(parId.scrollTop()-eleHeight);
                }else{
                    parId.scrollTop(parId.scrollTop()+opt.movepx);
                }
            }
        }
        if(opt.direction =='left'){
            var liWidth = 0;
            var allWidth = 0;
            $(this).css('float',"left");
            $(this).find('li').css('float',"left");
            $(this).find('li').each(function (index,item) {
                liWidth+=$(this).outerWidth();
            });
            if(liWidth<wrapWidth){
                return false;
            }
            allWidth = liWidth*2+2;
            $(this).append($(this).html());
            $(this).css('width',allWidth);
            MyMar=setInterval(Marquee,opt.speed);
            function Marquee(){
                if (parId.scrollLeft() >= liWidth) {
                    parId.scrollLeft(parId.scrollLeft()-liWidth);
                }else{
                    parId.scrollLeft(parId.scrollLeft()+opt.movepx);
                }
            }
        }
        //悬停事件
        if(opt.hover === true){
            $(this).find('li').hover(function () {
                clearInterval(MyMar);
            },function () {
                MyMar=setInterval(Marquee,opt.speed);
            })
        };

        //悬停事件
        if(opt.hover&&typeof opt.hover ==="function"){
            $(this).find('li').hover(opt.hover)
        };
        //点击事件
        if(opt.click&&typeof opt.click ==="function"){
            $(this).find('li').click(opt.click)
        }
    }
});

基于JQ的无缝滚动封装

猜你喜欢