文字、图片左右无缝滚动效果--支持拖拽

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>文字、图片无缝滚动效果--广告</title> <st...
<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <title>文字、图片无缝滚动效果--广告</title>
        <style>
            /*公共*/
            .str_wrap{overflow:hidden;width:100%;font-size:12px;line-height:16px;position:relative;-moz-user-select:none;-khtml-user-select:none;user-select:none;background:#f6f6f6;white-space:nowrap;}
            .str_wrap.str_active{background:#f1f1f1;}
            .str_move{white-space:nowrap;position:absolute;top:0;left:0;cursor:move;}
            .str_move_clone{display:inline-block;vertical-align:top;position:absolute;left:100%;top:0;}
            .str_vertical .str_move_clone{left:0;top:100%;}
            .str_down .str_move_clone{left:0;bottom:100%;}
            .str_vertical .str_move,.str_down .str_move{white-space:normal;width:100%;}
            .str_static .str_move,.no_drag .str_move,.noStop .str_move{cursor:inherit;}

            /*向左或向右*/
            .main { width: 500px; margin: 0 auto; font-size: 14px;}
            .main a { margin: 0 15px; color: #333; text-decoration: none;}

            /*向上滚动*/
            .main-up { width: 500px; height: 200px; margin: 100px auto; font-size: 14px;}
            .main-up ul { margin: 0; line-height: 30px;}
            .main-up a { color: #333; text-decoration: none;}

            /*内容不超出宽度不执行滚动*/
            .main-hide { width: 790px; margin: 150px auto; font-size: 14px;}

            /*图片滚动*/
            .main-img { width: 790px; margin: 100px auto; font-size: 0;}
            .main-img img { width:130px;height:180px;margin-left: 10px; vertical-align: top;}
        </style>
    </head>

    <body>
        <!-- 可以向左或向右滚动 -->
        <div class="main">
            <a href="https://blog.csdn.net/qq_38881495" target='_blank'>测试文字滚动1</a>
            <a href="https://blog.csdn.net/qq_38881495" target='_blank'>无限滚动</a>
            <a href="https://blog.csdn.net/qq_38881495" target='_blank'>我可以左右拖拽哦</a>
            <a href="https://blog.csdn.net/qq_38881495" target='_blank'>无限滚动</a>
            <a href="https://blog.csdn.net/qq_38881495" target='_blank'>我可以左右拖拽哦</a>
            <a href="https://blog.csdn.net/qq_38881495" target='_blank'>无限滚动</a>
            <a href="https://blog.csdn.net/qq_38881495" target='_blank'>我可以左右拖拽哦</a>
            <a href="https://blog.csdn.net/qq_38881495" target='_blank'>无限滚动</a>
            <a href="https://blog.csdn.net/qq_38881495" target='_blank'>我可以左右拖拽哦</a>
        </div>
        
        <!-- 向上滚动 -->
        <div class="main-up">
            <ul>
                <li><a href="https://blog.csdn.net/qq_38881495" target='_blank'>测试文字滚动1</a></li>
                <li><a href="https://blog.csdn.net/qq_38881495" target='_blank'>向上滚动</a></li>
                <li><a href="https://blog.csdn.net/qq_38881495" target='_blank'>测试文字滚动1</a></li>
                <li><a href="https://blog.csdn.net/qq_38881495" target='_blank'>向上滚动</a></li>
                <li><a href="https://blog.csdn.net/qq_38881495" target='_blank'>测试文字滚动1</a></li>
                <li><a href="https://blog.csdn.net/qq_38881495" target='_blank'>向上滚动</a></li>
                <li><a href="https://blog.csdn.net/qq_38881495" target='_blank'>测试文字滚动1</a></li>
                <li><a href="https://blog.csdn.net/qq_38881495" target='_blank'>向上滚动</a></li>
            </ul>
        </div>

        <!-- 内容不超出宽度不执行滚动 -->
        <div class="main-hide">我的内容还没有超出宽度,所以我不会滚动哦~</div>

        <!-- 图片滚动 -->
        <div class="main-img">
            <img src="https://cs.m.xczhihui.com/xcview/images/geren.jpg" alt="" />
            <img src="https://cs.m.xczhihui.com/xcview/images/geren.jpg" alt="" />
            <img src="https://cs.m.xczhihui.com/xcview/images/geren.jpg" alt="" />
            <img src="https://cs.m.xczhihui.com/xcview/images/geren.jpg" alt="" />
            <img src="https://cs.m.xczhihui.com/xcview/images/geren.jpg" alt="" />
            <img src="https://cs.m.xczhihui.com/xcview/images/geren.jpg" alt="" />
            <img src="https://cs.m.xczhihui.com/xcview/images/geren.jpg" alt="" />
            <img src="https://cs.m.xczhihui.com/xcview/images/geren.jpg" alt="" />
        </div>
    </body>
    <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    <script>  //滑动引入文件
        (function ($) {
            var methods = {
                init: function (options) {
                    var p = {
                        direction: 'left',
                        loop: -1,
                        scrolldelay: 0,
                        scrollamount: 50,
                        circular: true,
                        drag: true,
                        runshort: true,
                        hoverstop: true,
                        inverthover: false,
                        xml: false
                    };
                    if (options) {
                        $.extend(p, options);
                    }

                    return this.each(function () {
                        var enterEvent = 'mouseenter';
                        var leaveEvent = 'mouseleave';
                        if(p.inverthover){
                            enterEvent = 'mouseleave';
                            leaveEvent = 'mouseenter';  
                        }
                                   
                        var
                            loop = p.loop,
                            strWrap = $(this).addClass('str_wrap').data({scrollamount:p.scrollamount}),
                            fMove = false;
                            
                        var strWrapStyle = strWrap.attr('style'); 
                        
                        if(strWrapStyle){
                            var wrapStyleArr = strWrapStyle.split(';');
                            var startHeight = false;
                            for(var i=0; i < wrapStyleArr.length; i++){
                                var str = $.trim(wrapStyleArr[i]);                  
                                var tested =  str.search(/^height/g);
                                if(tested != -1){
                                    startHeight = parseFloat(strWrap.css('height'));
                                }
                            }
                        }

                        var code = function () {
                            
                            strWrap.off('mouseleave');
                            strWrap.off('mouseenter');
                            strWrap.off('mousemove');
                            strWrap.off('mousedown');
                            strWrap.off('mouseup');

                            
                            if(!$('.str_move',strWrap).length){
                                strWrap.wrapInner($('<div>').addClass('str_move'));
                            }
                            
                            var
                            strMove = $('.str_move', strWrap).addClass('str_origin'),
                            strMoveClone = strMove.clone().removeClass('str_origin').addClass('str_move_clone'),
                            time = 0;

                            if (!p.hoverstop) {
                                strWrap.addClass('noStop');
                            }

                            var circCloneHor = function(){
                                strMoveClone.clone().css({
                                    left:'100%',
                                    right:'auto',                           
                                    width: strMove.width()
                                }).appendTo(strMove);
                                strMoveClone.css({
                                    right: '100%',
                                    left:'auto',
                                    width: strMove.width()
                                }).appendTo(strMove);
                            }
                            
                            var circCloneVert = function(){
                                strMoveClone.clone().css({
                                    top: '100%',
                                    bottom:'auto',
                                    height: strMove.height()
                                }).appendTo(strMove);
                                strMoveClone.css({
                                    bottom: '100%',
                                    top:'auto',
                                    height:strMove.height()
                                }).appendTo(strMove);
                            }
                            
                            if (p.direction == 'left') {
                                strWrap.height(strMove.outerHeight())
                                if (strMove.width() > strWrap.width()) {
                                    var leftPos = -strMove.width();
                                    
                                    if (p.circular) {
                                        
                                        if (!p.xml) {
                                            circCloneHor()
                                            leftPos = -(strMove.width() + (strMove.width() - strWrap.width()));
                                        }
                                    }
                                    if (p.xml) {
                                        strMove.css({
                                            left:strWrap.width()    
                                        })
                                    }
                                    var
                                    strMoveLeft = strWrap.width(),
                                        k1 = 0,
                                        timeFunc1 = function () {
                                            var
                                            fullS = Math.abs(leftPos),
                                                time = (fullS / strWrap.data('scrollamount')) * 1000;
                                            if (parseFloat(strMove.css('left')) != 0) {
                                                fullS = (fullS + strWrap.width());
                                                time = (fullS - (strWrap.width() - parseFloat(strMove.css('left')))) / strWrap.data('scrollamount') * 1000;
                                            }
                                            return time;
                                        },
                                        moveFuncId1 = false,
                                        moveFunc1 = function () {
                                            if (loop != 0) {
                                                strMove.stop(true).animate({
                                                    left: leftPos
                                                }, timeFunc1(), 'linear', function () {
                                                    $(this).css({
                                                        left: strWrap.width()
                                                    });
                                                    if (loop == -1) {
                                                        moveFuncId1 = setTimeout(moveFunc1, p.scrolldelay);
                                                    } else {
                                                        loop--;
                                                        moveFuncId1 = setTimeout(moveFunc1, p.scrolldelay);
                                                    }
                                                });
                                            }
                                        };
                                        strWrap.data({
                                            moveId: moveFuncId1 ,
                                            moveF : moveFunc1
                                        })
                                        if(!p.inverthover){
                                            moveFunc1();
                                        }
                                    
                                    if (p.hoverstop) {
                                        strWrap.on(enterEvent, function () {
                                            $(this).addClass('str_active');
                                            clearTimeout(moveFuncId1);
                                            strMove.stop(true);
                                        }).on(leaveEvent, function () {
                                            $(this).removeClass('str_active');
                                            $(this).off('mousemove');
                                            moveFunc1();
                                        });

                                        if (p.drag) {
                                            strWrap.on('mousedown', function (e) {
                                                if(p.inverthover){
                                                    strMove.stop(true);
                                                }
                                                //drag
                                                var dragLeft;
                                                var dir = 1;
                                                var newX;
                                                var oldX = e.clientX;
                                                //drag
                                                
                                                strMoveLeft = strMove.position().left;
                                                k1 = strMoveLeft - (e.clientX - strWrap.offset().left);
                                                
                                                $(this).on('mousemove', function (e) {
                                                    fMove = true;
                                                    
                                                    //drag
                                                    newX = e.clientX;
                                                    if(newX > oldX){
                                                        dir = 1
                                                    }else{
                                                        dir = -1
                                                    }
                                                    oldX = newX 
                                                    dragLeft = k1 + (e.clientX - strWrap.offset().left);
                                                    
                                                    if (!p.circular) {
                                                        if(dragLeft < -strMove.width() && dir < 0){
                                                            dragLeft = strWrap.width();
                                                            strMoveLeft = strMove.position().left;
                                                            k1 = strMoveLeft - (e.clientX - strWrap.offset().left);
                                                        }
                                                        if(dragLeft > strWrap.width() && dir > 0){
                                                            dragLeft = -strMove.width();
                                                            strMoveLeft = strMove.position().left;
                                                            k1 = strMoveLeft - (e.clientX - strWrap.offset().left);
                                                        }
                                                    }else{
                                                        if(dragLeft < -strMove.width() && dir < 0){
                                                            dragLeft = 0;
                                                            strMoveLeft = strMove.position().left;
                                                            k1 = strMoveLeft - (e.clientX - strWrap.offset().left);
                                                        }
                                                        if(dragLeft > 0 && dir > 0){
                                                            dragLeft = -strMove.width();
                                                            strMoveLeft = strMove.position().left;
                                                            k1 = strMoveLeft - (e.clientX - strWrap.offset().left);
                                                        }
            
                                                    }
                                                    
                                                    strMove.stop(true).css({
                                                        left: dragLeft
                                                    });
                                                    //drag
                                                    
                                                }).on('mouseup', function () {
                                                    $(this).off('mousemove');
                                                    if(p.inverthover){
                                                        strMove.trigger('mouseenter')
                                                    }
                                                    setTimeout(function () {                             
                                                        fMove = false
                                                    }, 50)
                                                    
                                                });
                                                return false;
                                            })
                                            .on('click', function () {
                                                if (fMove) {
                                                    return false
                                                }
                                            });
                                        } else {
                                            strWrap.addClass('no_drag');
                                        };
                                    }
                                } else {
                                    if (p.runshort) {
                                        strMove.css({
                                            left: strWrap.width()
                                        });
                                        var
                                        strMoveLeft = strWrap.width(),
                                            k1 = 0,
                                            timeFunc = function () {
                                                time = (strMove.width() + strMove.position().left) / strWrap.data('scrollamount') * 1000;
                                                return time;
                                            };
                                        var moveFunc = function () {
                                            var leftPos = -strMove.width();
                                            strMove.animate({
                                                left: leftPos
                                            }, timeFunc(), 'linear', function () {
                                                $(this).css({
                                                    left: strWrap.width()
                                                });
                                                if (loop == -1) {
                                                    setTimeout(moveFunc, p.scrolldelay);
                                                } else {
                                                    loop--;
                                                    setTimeout(moveFunc, p.scrolldelay);
                                                }
                                            });
                                        };
                                        strWrap.data({
                                            moveF : moveFunc
                                        })
                                        if(!p.inverthover){
                                            moveFunc();
                                        }
                                        if (p.hoverstop) {
                                            strWrap.on(enterEvent, function () {
                                                $(this).addClass('str_active');
                                                strMove.stop(true);
                                            }).on(leaveEvent, function () {
                                                $(this).removeClass('str_active');
                                                $(this).off('mousemove');
                                                moveFunc();
                                            });

                                            if (p.drag) {
                                                strWrap.on('mousedown', function (e) {
                                                    if(p.inverthover){
                                                        strMove.stop(true);
                                                    }
                                                    
                                                    //drag
                                                    var dragLeft;
                                                    var dir = 1;
                                                    var newX;
                                                    var oldX = e.clientX;
                                                    //drag
                                                    
                                                    strMoveLeft = strMove.position().left;
                                                    k1 = strMoveLeft - (e.clientX - strWrap.offset().left);
                                                    $(this).on('mousemove', function (e) {
                                                        fMove = true;
                                                        
                                                        //drag
                                                        newX = e.clientX;
                                                        if(newX > oldX){
                                                            dir = 1
                                                        }else{
                                                            dir = -1
                                                        }
                                                        oldX = newX 
                                                        dragLeft = k1 + (e.clientX - strWrap.offset().left);
                                                        
                                                        if(dragLeft < -strMove.width() && dir < 0){
                                                            dragLeft = strWrap.width();
                                                            strMoveLeft = strMove.position().left;
                                                            k1 = strMoveLeft - (e.clientX - strWrap.offset().left);
                                                        }
                                                        if(dragLeft > strWrap.width() && dir > 0){
                                                            dragLeft = -strMove.width();
                                                            strMoveLeft = strMove.position().left;
                                                            k1 = strMoveLeft - (e.clientX - strWrap.offset().left);
                                                        }
                                                        
                                                        strMove.stop(true).css({
                                                            left: dragLeft
                                                        });
                                                        
                                                    }).on('mouseup', function () {
                                                        if(p.inverthover){
                                                            strMove.trigger('mouseenter')
                                                        }
                                                        $(this).off('mousemove');
                                                        setTimeout(function () {                             
                                                            fMove = false
                                                        }, 50)
                                                    });
                                                    return false;
                                                })
                                                .on('click', function () {
                                                    if (fMove) {
                                                        return false
                                                    }
                                                });
                                            } else {
                                                strWrap.addClass('no_drag');
                                            };
                                        }
                                    } else {
                                        strWrap.addClass('str_static');
                                    }
                                };
                            };
                            if (p.direction == 'right') {
                                strWrap.height(strMove.outerHeight())
                                strWrap.addClass('str_right');
                                strMove.css({
                                    left: -strMove.width(),
                                    right: 'auto'
                                })
                                
                                if (strMove.width() > strWrap.width()) {
                                    var leftPos = strWrap.width();
                                    strMove.css({
                                        left: 0
                                    })
                                    if (p.circular) {
                                        if (!p.xml) {
                                            circCloneHor()
                                            //Определяем крайнюю точку
                                            leftPos = strMove.width();
                                        }
                                    }
                                    
                                    var
                                    k2 = 0;
                                    timeFunc = function () {
                                        var
                                        fullS = strWrap.width(), //крайняя точка
                                            time = (fullS / strWrap.data('scrollamount')) * 1000; //время
                                        if (parseFloat(strMove.css('left')) != 0) {
                                            fullS = (strMove.width() + strWrap.width());
                                            time = (fullS - (strMove.width() + parseFloat(strMove.css('left')))) / strWrap.data('scrollamount') * 1000;
                                        }
                                        return time;
                                    };
                                    var moveFunc = function () {

                                        if (loop != 0) {
                                            strMove.animate({
                                                left: leftPos
                                            }, timeFunc(), 'linear', function () {
                                                $(this).css({
                                                    left: -strMove.width()
                                                });
                                                if (loop == -1) {
                                                    setTimeout(moveFunc, p.scrolldelay);
                                                } else {
                                                    loop--;
                                                    setTimeout(moveFunc, p.scrolldelay);
                                                };
                                            });
                                        };
                                    };
                                    strWrap.data({
                                        moveF : moveFunc
                                    })
                            
                                    if(!p.inverthover){
                                        moveFunc();
                                    }
                                    if (p.hoverstop) {
                                        strWrap.on(enterEvent, function () {
                                            $(this).addClass('str_active');
                                            strMove.stop(true);
                                        }).on(leaveEvent, function () {
                                            $(this).removeClass('str_active');
                                            $(this).off('mousemove');
                                            moveFunc();
                                        });

                                        if (p.drag) {
                                            
                                            strWrap.on('mousedown', function (e) {
                                                if(p.inverthover){
                                                    strMove.stop(true);
                                                }
                                                
                                                //drag
                                                var dragLeft;
                                                var dir = 1;
                                                var newX;
                                                var oldX = e.clientX;
                                                //drag
                                                
                                                strMoveLeft = strMove.position().left;
                                                k2 = strMoveLeft - (e.clientX - strWrap.offset().left);
                                                $(this).on('mousemove', function (e) {
                                                    
                                                    fMove = true;
                                                    
                                                    //drag
                                                    newX = e.clientX;
                                                    if(newX > oldX){
                                                        dir = 1
                                                    }else{
                                                        dir = -1
                                                    }
                                                    oldX = newX 
                                                    dragLeft = k2 + (e.clientX - strWrap.offset().left);


                                                    if (!p.circular) {

                                                        if(dragLeft < -strMove.width() && dir < 0){
                                                            dragLeft = strWrap.width();
                                                            strMoveLeft = strMove.position().left;
                                                            k2 = strMoveLeft - (e.clientX - strWrap.offset().left);
                                                        }
                                                        if(dragLeft > strWrap.width() && dir > 0){
                                                            dragLeft = -strMove.width();
                                                            strMoveLeft = strMove.position().left;
                                                            k2 = strMoveLeft - (e.clientX - strWrap.offset().left);
                                                        }
                                                    }else{
                                                        if(dragLeft < -strMove.width() && dir < 0){
                                                            dragLeft = 0;
                                                            strMoveLeft = strMove.position().left;
                                                            k2 = strMoveLeft - (e.clientX - strWrap.offset().left);
                                                        }
                                                        if(dragLeft > 0 && dir > 0){
                                                            dragLeft = -strMove.width();
                                                            strMoveLeft = strMove.position().left;
                                                            k2 = strMoveLeft - (e.clientX - strWrap.offset().left);
                                                        }
            
                                                    }
                                                    
                                                    strMove.stop(true).css({
                                                        left: dragLeft
                                                    });
                                                    

                                                }).on('mouseup', function () {
                                                    if(p.inverthover){
                                                        strMove.trigger('mouseenter')
                                                    }
                                                    $(this).off('mousemove');
                                                    setTimeout(function () {                             
                                                        fMove = false
                                                    }, 50)
                                                });
                                                return false;
                                            })
                                            .on('click', function () {
                                                if (fMove) {
                                                    return false
                                                }
                                            });
                                        } else {
                                            strWrap.addClass('no_drag');
                                        };
                                    }
                                } else {
                                                                
                                    if (p.runshort) {
                                        
                                        var k2 = 0;
                                        var timeFunc = function () {
                                            time = (strWrap.width() - strMove.position().left) / strWrap.data('scrollamount') * 1000;
                                            return time;
                                        };
                                        var moveFunc = function () {
                                            var leftPos = strWrap.width();
                                            strMove.animate({
                                                left: leftPos
                                            }, timeFunc(), 'linear', function () {
                                                $(this).css({
                                                    left: -strMove.width()
                                                });
                                                if (loop == -1) {
                                                    setTimeout(moveFunc, p.scrolldelay);
                                                } else {
                                                    loop--;
                                                    setTimeout(moveFunc, p.scrolldelay);
                                                };
                                            });
                                        };

                                        strWrap.data({
                                            moveF : moveFunc
                                        })

                                        if(!p.inverthover){
                                            moveFunc();
                                        }
                                        if (p.hoverstop) {
                                            strWrap.on(enterEvent, function () {
                                                $(this).addClass('str_active');
                                                strMove.stop(true);
                                            }).on(leaveEvent, function () {
                                                $(this).removeClass('str_active');
                                                $(this).off('mousemove');
                                                moveFunc();
                                            });

                                            if (p.drag) {
                                                strWrap.on('mousedown', function (e) {
                                                    if(p.inverthover){
                                                        strMove.stop(true);
                                                    }
                                                    
                                                    //drag
                                                    var dragLeft;
                                                    var dir = 1;
                                                    var newX;
                                                    var oldX = e.clientX;
                                                    //drag
                                                    
                                                    strMoveLeft = strMove.position().left;
                                                    k2 = strMoveLeft - (e.clientX - strWrap.offset().left);
                                                    $(this).on('mousemove', function (e) {
                                                        fMove = true;
                                                        
                                                        
                                                        
                                                        //drag
                                                        newX = e.clientX;
                                                        if(newX > oldX){
                                                            dir = 1
                                                        }else{
                                                            dir = -1
                                                        }
                                                        oldX = newX 
                                                        dragLeft = k2 + (e.clientX - strWrap.offset().left);
                                                        
                                                        if(dragLeft < -strMove.width() && dir < 0){
                                                            dragLeft = strWrap.width();
                                                            strMoveLeft = strMove.position().left;
                                                            k2 = strMoveLeft - (e.clientX - strWrap.offset().left);
                                                        }
                                                        if(dragLeft > strWrap.width() && dir > 0){
                                                            dragLeft = -strMove.width();
                                                            strMoveLeft = strMove.position().left;
                                                            k2 = strMoveLeft - (e.clientX - strWrap.offset().left);
                                                        }

                                                        strMove.stop(true).css({
                                                            left:dragLeft
                                                        });
                                                        
                                                    }).on('mouseup', function () {
                                                        if(p.inverthover){
                                                            strMove.trigger('mouseenter')
                                                        }
                                                        $(this).off('mousemove');
                                                        setTimeout(function () {                             
                                                            fMove = false
                                                        }, 50)
                                                    });
                                                    return false;
                                                })
                                                .on('click', function () {
                                                    if (fMove) {
                                                        return false
                                                    }
                                                });
                                            } else {
                                                strWrap.addClass('no_drag');
                                            };
                                        }
                                    } else {
                                        strWrap.addClass('str_static');
                                    }
                                };
                            };
                            if (p.direction == 'up') {
                                strWrap.addClass('str_vertical');
                                
                                if (strMove.height() > strWrap.height()) {
                                    var topPos = -strMove.height();
                                    if (p.circular) {
                                        if (!p.xml) {
                                            circCloneVert();                                    
                                            topPos = -(strMove.height() + (strMove.height() - strWrap.height()));
                                        }
                                    }
                                    if (p.xml) {
                                        strMove.css({
                                            top:strWrap.height()    
                                        })
                                    }
                                    var
                                    k2 = 0;
                                    timeFunc = function () {
                                        var
                                        fullS = Math.abs(topPos),
                                            time = (fullS / strWrap.data('scrollamount')) * 1000;
                                        if (parseFloat(strMove.css('top')) != 0) {
                                            fullS = (fullS + strWrap.height());
                                            time = (fullS - (strWrap.height() - parseFloat(strMove.css('top')))) / strWrap.data('scrollamount') * 1000;
                                        }
                                        
                                        return time;
                                    };
                                    var moveFunc = function () {
                                        if (loop != 0) {
                                            strMove.animate({
                                                top: topPos
                                            }, timeFunc(), 'linear', function () {
                                                $(this).css({
                                                    top: strWrap.height()
                                                });
                                                if (loop == -1) {
                                                    setTimeout(moveFunc, p.scrolldelay);
                                                } else {
                                                    loop--;
                                                    setTimeout(moveFunc, p.scrolldelay);
                                                };
                                            });
                                        };
                                    };
                                    
                                    strWrap.data({
                                        moveF : moveFunc
                                    })
                                    
                                    if(!p.inverthover){
                                        moveFunc();
                                    }
                                    if (p.hoverstop) {
                                        strWrap.on(enterEvent, function () {
                                            $(this).addClass('str_active');
                                            strMove.stop(true);
                                        }).on(leaveEvent, function () {
                                            $(this).removeClass('str_active');
                                            $(this).off('mousemove');
                                            moveFunc();
                                        });

                                        if (p.drag) {
                                            strWrap.on('mousedown', function (e) {
                                                if(p.inverthover){
                                                    strMove.stop(true);
                                                }
                                                //drag
                                                var dragTop;
                                                var dir = 1;
                                                var newY;
                                                var oldY = e.clientY;
                                                //drag
                                                strMoveTop = strMove.position().top;
                                                k2 = strMoveTop - (e.clientY - strWrap.offset().top);
                                                $(this).on('mousemove', function (e) {
                                                    
                                                    fMove = true;

                                                    //drag
                                                    newY = e.clientY;
                                                    if(newY > oldY){
                                                        dir = 1
                                                    }else{
                                                        if(newY < oldY){
                                                            dir = -1
                                                        }
                                                    }
                                                    oldY = newY 
                                                    dragTop = k2 + e.clientY - strWrap.offset().top;
                                                    if (!p.circular){
                                                        if(dragTop < -strMove.height() && dir < 0){
                                                            dragTop = strWrap.height();
                                                            strMoveTop = strMove.position().top;
                                                            k2 = strMoveTop - (e.clientY - strWrap.offset().top);
                                                        }
                                                        if(dragTop > strWrap.height() && dir > 0){
                                                            dragTop = -strMove.height();
                                                            strMoveTop = strMove.position().top;
                                                            k2 = strMoveTop - (e.clientY - strWrap.offset().top);
                                                        }   
                                                    }else{
                                                        if(dragTop < -strMove.height() && dir < 0){
                                                            dragTop = 0;
                                                            strMoveTop = strMove.position().top;
                                                            k2 = strMoveTop - (e.clientY - strWrap.offset().top);
                                                        }
                                                        if(dragTop > 0 && dir > 0){
                                                            dragTop = -strMove.height();
                                                            strMoveTop = strMove.position().top;
                                                            k2 = strMoveTop - (e.clientY - strWrap.offset().top);
                                                        }
                                                    }
                                                    strMove.stop(true).css({
                                                        top: dragTop
                                                    });
                                                   
                                                }).on('mouseup', function () {
                                                    if(p.inverthover){
                                                        strMove.trigger('mouseenter')
                                                    }
                                                    $(this).off('mousemove');
                                                    setTimeout(function () {                             
                                                        fMove = false
                                                    }, 50)
                                                });
                                                return false;
                                            })
                                            .on('click', function () {
                                                if (fMove) {
                                                    return false
                                                }
                                            });
                                        } else {
                                            strWrap.addClass('no_drag');
                                        };
                                    }
                                } else {
                                    if (p.runshort) {
                                        strMove.css({
                                            top: strWrap.height()
                                        });
                                        var k2 = 0;
                                        var timeFunc = function () {
                                            
                                            time = (strMove.height() + strMove.position().top) / strWrap.data('scrollamount') * 1000;
                                            
                                            return time;
                                        };
                                        var moveFunc = function () {
                                            var topPos = -strMove.height();
                                            strMove.animate({
                                                top: topPos
                                            }, timeFunc(), 'linear', function () {
                                                $(this).css({
                                                    top: strWrap.height()
                                                });
                                                if (loop == -1) {
                                                    setTimeout(moveFunc, p.scrolldelay);
                                                } else {
                                                    loop--;
                                                    setTimeout(moveFunc, p.scrolldelay);
                                                };
                                            });
                                        };
                                        strWrap.data({
                                            moveF : moveFunc
                                        })
                                        if(!p.inverthover){
                                            moveFunc();
                                        }
                                        if (p.hoverstop) {
                                            strWrap.on(enterEvent, function () {
                                                $(this).addClass('str_active');
                                                strMove.stop(true);
                                            }).on(leaveEvent, function () {
                                                $(this).removeClass('str_active');
                                                $(this).off('mousemove');
                                                moveFunc();
                                            });

                                            if (p.drag) {
                                                strWrap.on('mousedown', function (e) {
                                                    if(p.inverthover){
                                                        strMove.stop(true);
                                                    }
                                                    
                                                    //drag
                                                    var dragTop;
                                                    var dir = 1;
                                                    var newY;
                                                    var oldY = e.clientY;
                                                    //drag
                                                    
                                                    strMoveTop = strMove.position().top;
                                                    k2 = strMoveTop - (e.clientY - strWrap.offset().top);
                                                    $(this).on('mousemove', function (e) {
                                                        
                                                        
                                                        fMove = true;

                                                        //drag
                                                        newY = e.clientY;
                                                        if(newY > oldY){
                                                            dir = 1
                                                        }else{
                                                            if(newY < oldY){
                                                                dir = -1
                                                            }
                                                        }
                                                        oldY = newY 
                                                        dragTop = k2 + e.clientY - strWrap.offset().top;
                                                        
                                                        if(dragTop < -strMove.height() && dir < 0){
                                                            dragTop = strWrap.height();
                                                            strMoveTop = strMove.position().top;
                                                            k2 = strMoveTop - (e.clientY - strWrap.offset().top);
                                                        }
                                                        if(dragTop > strWrap.height() && dir > 0){
                                                            dragTop = -strMove.height();
                                                            strMoveTop = strMove.position().top;
                                                            k2 = strMoveTop - (e.clientY - strWrap.offset().top);
                                                        }   
                                                        //*drag
                                                        
                                                        strMove.stop(true).css({
                                                            top: dragTop
                                                        });
                                                        
                                                        
                                                    }).on('mouseup', function () {
                                                        if(p.inverthover){
                                                            strMove.trigger('mouseenter')
                                                        }
                                                        $(this).off('mousemove');
                                                        setTimeout(function () {                             
                                                            fMove = false
                                                        }, 50)
                                                    });
                                                    return false;
                                                })
                                                .on('click', function () {
                                                    if (fMove) {
                                                        return false
                                                    }
                                                });
                                            } else {
                                                strWrap.addClass('no_drag');
                                            };
                                        }
                                    } else {
                                        strWrap.addClass('str_static');
                                    }
                                };
                            };
                            if (p.direction == 'down') {

                                strWrap.addClass('str_vertical').addClass('str_down');
                                strMove.css({
                                    top: -strMove.height(),
                                    bottom: 'auto'
                                })
                                if (strMove.height() > strWrap.height()) {
                                    var topPos = strWrap.height();
                                    if (p.circular) {
                                        if (!p.xml) {
                                            circCloneVert();                                    
                                            topPos = strMove.height();
                                        }
                                    }
                                    if (p.xml) {
                                        strMove.css({
                                            top:-strMove.height()
                                        })
                                    }
                                    var
                                    k2 = 0;
                                    timeFunc = function () {
                                        var
                                        fullS = strWrap.height(), //крайняя точка
                                            time = (fullS / strWrap.data('scrollamount')) * 1000; //время

                                        if (parseFloat(strMove.css('top')) != 0) {
                                            fullS = (strMove.height() + strWrap.height());
                                            time = (fullS - (strMove.height() + parseFloat(strMove.css('top')))) / strWrap.data('scrollamount') * 1000;
                                        }
                                        return time;
                                    };
                                    var moveFunc = function () {

                                        if (loop != 0) {
                                            strMove.animate({
                                                top: topPos
                                            }, timeFunc(), 'linear', function () {
                                                $(this).css({
                                                    top: -strMove.height()
                                                });
                                                if (loop == -1) {

                                                    setTimeout(moveFunc, p.scrolldelay);
                                                } else {
                                                    loop--;
                                                    setTimeout(moveFunc, p.scrolldelay);
                                                };
                                            });
                                        };
                                    };
                                    strWrap.data({
                                        moveF : moveFunc
                                    })
                                    if(!p.inverthover){
                                        moveFunc();
                                    }
                                    if (p.hoverstop) {
                                        strWrap.on(enterEvent, function () {
                                            $(this).addClass('str_active');
                                            strMove.stop(true);
                                        }).on(leaveEvent, function () {
                                            $(this).removeClass('str_active');
                                            $(this).off('mousemove');
                                            moveFunc();
                                        });

                                        if (p.drag) {
                                            strWrap.on('mousedown', function (e) {
                                                if(p.inverthover){
                                                    strMove.stop(true);
                                                }
                                                
                                                //drag
                                                var dragTop;
                                                var dir = 1;
                                                var newY;
                                                var oldY = e.clientY;
                                                //drag
                                                
                                                
                                                strMoveTop = strMove.position().top;
       
                    

你可能感兴趣的文章

相关问题

0 条评论

请先 登录 后评论
admin
admin

651 篇文章

作家榜 »

  1. admin 651 文章
  2. 粪斗 185 文章
  3. 王凯 92 文章
  4. 廖雪 78 文章
  5. 牟雪峰 12 文章
  6. 李沁雪 9 文章
  7. 全易 2 文章
  8. Stevengring 0 文章