Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
javascript – Wenn Sie js zitieren und den Ordnerpfad ändern, wird ein Fehler gemeldet, wie im Bild und Code unten gezeigt
三叔
三叔 2017-07-05 10:37:05
0
7
820

html in

Ordner

Einen Fehler melden

HTML-Code
<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<title>无缝向上滚动-原生js封装</title>
<!--<link rel="shortcut icon" href="../public/image/favicon.ico" type="images/x-icon"/>-->
<!--<link rel="icon" href="../public/image/favicon.png" type="images/png"/>-->
<!--<link rel="stylesheet" type="text/css" href="../public/style/cssreset-min.css">-->
<!--<link rel="stylesheet" type="text/css" href="../public/style/common.css">-->
<style type="text/css">
    .scrollup-container{
        width: 100%;
        /*border: 3px solid #ababab;*/
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        box-shadow: 2px 2px 10px #ababab;
        /*margin: 30px auto;*/
        /*text-align: left;*/
        padding: 0px 25px;
        height: 40px;
        overflow: hidden;
    }
    .scrollup-list{
        height: 24px;
        line-height: 24px;
    }
</style>
<script type="text/javascript" src="js/scrollup.js"></script>
<!--<script type="text/javascript" src="../code/scrollup.js"></script>-->

</head>
<body>

<p class="scrollup-container" id="scrollup1">
    <ul class="scrollup-content">
        <li class="scrollup-list">list-1</li>
        <li class="scrollup-list">list-2</li>
        <li class="scrollup-list">list-3</li>
        <li class="scrollup-list">list-4</li>
        <li class="scrollup-list">list-5</li>
        <li class="scrollup-list">list-6</li>
        <li class="scrollup-list">list-7</li>
        <li class="scrollup-list">list-8</li>
        <li class="scrollup-list">list-9</li>
    </ul>
</p>

<script type="text/javascript">
    new scrollup("#scrollup1");
</script>

</p>
</body>
</html>

JS-Code

(Funktion() {

var Scrollup = function(el, opts) {
    var self = this;
    var defaults = {
        interval: false,     //是否开启间隔滚动
        conlistH:1,         //间隔滚动高度
        intimes:2000,
        time:40,
    }
    opts = opts || {};
    for (var w in defaults) {
        if ("undefined" == typeof opts[w]) {
            opts[w] = defaults[w];
        }
    }
    this.params = opts;
    this.container = r(el);
    if (this.container.length > 1) {
        var x = [];
        return this.container.each(function() {
            x.push(new Scrollup(this, opts))
        }), x
    }

    this.containers = this.container[0];
    this.content = this.container.find(".scrollup-content");
    this.conlistH=this.content[0].children[0].offsetHeight;
    this.timer = null;
    this.timers = null;
    this.init();
}
Scrollup.prototype = {
    //初始化
    init: function() {
        var self = this;
        this.copy_con();
    },
    //复制con
    copy_con: function() {
        var self = this;
        var panel = document.createElement("ul");
        panel.className = "scrollup-content";
        panel.innerHTML = this.content[0].innerHTML;
        this.containers.appendChild(panel);
        if (this.params.interval) {
            this.timers = setTimeout(function() {
                self.startScroll();
            }, self.params.intimes);
            self.containers.addEventListener('mouseover', function() {
                clearInterval(self.timer);
                clearTimeout(self.timers);
            }, false);
            self.containers.addEventListener('mouseout', function() {
                if (self.containers.scrollTop % 24 == 0) {
                    clearInterval(self.timer);
                    clearTimeout(self.timers);
                    self.timers = setTimeout(function() {
                        self.startScroll();
                    }, self.params.intimes);
                } else {
                    clearInterval(self.timer);
                    clearTimeout(self.timers);
                    self.startScroll();
                }

            }, false);
        } else {
            this.setInt();
            self.containers.addEventListener('mouseover', function() {
                clearInterval(self.timer);
            }, false);
            self.containers.addEventListener('mouseout', function() {
                self.setInt();
            }, false);
        }
    },
    //定时器
    setInt: function() {
        var self = this;
        this.timer = setInterval(function() {
            self.scrollUp();
        }, self.params.time);
    },
    //滚动
    scrollUp: function() {
        var self = this;
        if (this.containers.scrollTop >= this.content[0].scrollHeight) {
            this.containers.scrollTop = 0;
        } else {
            this.containers.scrollTop++;
        }
    },
    //间隔滚动
    startScroll: function() {
        var self = this;
        this.timer = setInterval(function() {
            self.scrollUpcy();
        }, self.params.time);
        this.containers.scrollTop++;
    },
    scrollUpcy: function() {
        var self = this;
        if (this.containers.scrollTop % (this.conlistH*this.params.conlistH) == 0) {
            clearInterval(this.timer);
            this.timers = setTimeout(function() {
                self.startScroll();
            }, self.params.intimes);
        } else {
            this.containers.scrollTop++;
            if (this.containers.scrollTop >= this.containers.scrollHeight / 2) {
                this.containers.scrollTop = 0;
            }
        }
    }
}

var r = (function() {
    var e = function(e) {
        var a = this,
            t = 0;
        for (t = 0; t < e.length; t++) {
            a[t] = e[t];
        }
        return a.length = e.length, this
    };
    e.prototype = {
        addClass: function(e) {
            if ("undefined" == typeof e) return this;
            for (var a = e.split(" "), t = 0; t < a.length; t++)
                for (var r = 0; r < this.length; r++) this[r].classList.add(a[t]);
            return this
        },
        each: function(e) {
            for (var a = 0; a < this.length; a++) e.call(this[a], a, this[a]);
            return this
        },
        html: function(e) {
            if ("undefined" == typeof e) return this[0] ? this[0].innerHTML : void 0;
            for (var a = 0; a < this.length; a++) this[a].innerHTML = e;
            return this
        },
        find: function(a) {
            for (var t = [], r = 0; r < this.length; r++)
                for (var i = this[r].querySelectorAll(a), s = 0; s < i.length; s++) t.push(i[s]);
            return new e(t)
        },
        append: function(a) {
            var t, r;
            for (t = 0; t < this.length; t++)
                if ("string" == typeof a) {
                    var i = document.createElement("p");
                    for (i.innerHTML = a; i.firstChild;) this[t].appendChild(i.firstChild)
                } else if (a instanceof e)
                for (r = 0; r < a.length; r++) this[t].appendChild(a[r]);
            else this[t].appendChild(a);
            return this
        },
    }
    var a = function(a, t) {
        var r = [],
            i = 0;
        if (a && !t && a instanceof e) {
            return a;
        }
        if (a) {
            if ("string" == typeof a) {
                var s, n, o = a.trim();
                if (o.indexOf("<") >= 0 && o.indexOf(">") >= 0) {
                    var l = "p";
                    for (0 === o.indexOf("<li") && (l = "ul"), 0 === o.indexOf("<tr") && (l = "tbody"), (0 === o.indexOf("<td") || 0 === o.indexOf("<th")) && (l = "tr"), 0 === o.indexOf("<tbody") && (l = "table"), 0 === o.indexOf("<option") && (l = "select"), n = document.createElement(l), n.innerHTML = a, i = 0; i < n.childNodes.length; i++) r.push(n.childNodes[i])
                } else
                    for (s = t || "#" !== a[0] || a.match(/[ .<>:~]/) ? (t || document).querySelectorAll(a) : [document.getElementById(a.split("#")[1])], i = 0; i < s.length; i++) s[i] && r.push(s[i])
            } else if (a.nodeType || a === window || a === document) {
                r.push(a);
            } else if (a.length > 0 && a[0].nodeType) {
                for (i = 0; i < a.length; i++) {
                    r.push(a[i]);
                }
            }
        }
        return new e(r)
    };
    return a;
}())

window.scrollup = Scrollup;

})()

三叔
三叔

Antworte allen(7)
女神的闺蜜爱上我
女神的闺蜜爱上我2017-07-05 10:39:05 7 Etage

因为你的路径没有写对啊

<script type="text/javascript" src="../js/scrollup.js"></script>
Wie +0
Antwort hinzufügen
巴扎黑
巴扎黑2017-07-05 10:39:05 6 Etage


为什么少了两个点

Wie +0
Antwort hinzufügen
给我你的怀抱
给我你的怀抱2017-07-05 10:39:05 5 Etage

少了../

Wie +0
Antwort hinzufügen
漂亮男人
漂亮男人2017-07-05 10:39:05 4 Etage

建议你先去了解一下相对路径和绝对路径的概念

Wie +0
Antwort hinzufügen
刘奇
刘奇2017-07-05 10:39:05 3 Etage

src="../js/scrollup.js" 这个样子的 你的路径问题还是很明显的 建议去学习一下 这也是很重要的一点

Wie +0
Antwort hinzufügen
Ty80
Ty802017-07-05 10:39:05 2 Etage

楼主，你这不是明显的少了..，看来你得了解一下相对路径这个概念了

Wie +0
Antwort hinzufügen
ringa_lee
ringa_lee2017-07-05 10:39:05 1 Etage

./当前路径,
../上级路径,
./../

Wie +0
Antwort hinzufügen
Beliebte Themen
Mehr>
Populäre Artikel
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage