0

这里描绘了一个漂亮的水平滚动/滑动效果：http ://www.queness.com/resources/html/scroll/horizo​​ntal.html 。但我更喜欢香草 javascript 而不是 jQuery。有没有人遇到过类似香草味的东西？我在 SO 上找到的示例都是 jQuery。如果我没有使用正确的搜索字符串，我会很高兴知道我应该使用哪个字符串。

4

1 回答 1

3

好吧，这不是我最漂亮的作品；但它会成功的。HTML：

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <title>Scroll Horizontally</title>
        <meta charset="UTF-8" />
        <link rel="stylesheet" type="text/css" media="screen" href="scroll.css" />
        <script type="text/javascript" src="scroll.js"></script>
    </head>
    <body>
        <div id="wrapper">
            <div id="mask">
                <div id="item1" class="item">
                    <a name="item1"></a>
                    <div class="content">item1
                        <a href="#item1" class="panel">1</a> |
                        <a href="#item2" class="panel">2</a> |
                        <a href="#item3" class="panel">3</a> |
                        <a href="#item4" class="panel">4</a> |
                        <a href="#item5" class="panel">5</a>
                    </div>
                </div>
                <div id="item2" class="item">
                    <a name="item2"></a>
                    <div class="content">
                        item2 <a href="#item1" class="panel">back</a>
                    </div>
                </div>
                <div id="item3" class="item">
                    <a name="item3"></a>
                    <div class="content">
                        item3 <a href="#item1" class="panel">back</a>
                    </div>
                </div>
                <div id="item4" class="item">
                    <a name="item4"></a>
                    <div class="content">
                        item4 <a href="#item1" class="panel">back</a>
                    </div>
                </div>
                <div id="item5" class="item">
                    <a name="item5"></a>
                    <div class="content">
                        item5 <a href="#item1" class="panel">back</a>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

滚动.css

@charset "UTF-8";
body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
    overflow:hidden;
}
#wrapper {
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    background-color:#ccc;
    overflow:hidden;
}
#mask {
    width:500%;
    height:100%;
    background-color:#eee;
}
.item {
    width:20%;
    height:100%;
    float:left;
    background-color:#ddd;
}
.content {
    width:400px;
    height:300px;
    top:20%;
    margin:0 auto;
    background-color:#aaa;
    position:relative;
}
.selected {
    background:#fff;
    font-weight:700;
}
.clear {
    clear:both;
}

最后，有趣的部分。如果您有任何问题，请告诉我。它在我这边工作得很好，但你永远不知道。滚动.js

(function(d, w){
    var modern = function(){
        return(d.addEventListener);
    }, event = function(elem, evt, fn){
        if(modern()) {
            elem.addEventListener(evt, fn, false);
        } else {
            elem.attachEvent("on" + evt, fn);
        }
    }, wh = function(elem, width, height){
        elem.style.width = width + "px";
        elem.style.height = height + "px";
    }, width = function(){
        return(parseInt(w.innerWidth || d.documentElement.clientWidth || d.getElementsByTagName("body")[0].clientWidth, 10));
    }, height = function(){
        return(parseInt(w.innerHeight|| d.documentElement.clientHeight|| d.getElementsByTagName("body")[0].clientHeight, 10));
    }, remove_class = function(elem, remove) {
        var new_name = "", classes = elem.className.split(" ");
        for(var i = 0, len = classes.length; i < len; i++) {
            if(classes[i] !== remove) {
                new_name += classes[i] + " ";
            }
        }
        elem.className = new_name;
    }, reSize = function(){
        var items = d.getElementsByClassName("item"), len = items.length, wid = width(), hei = height(), wrapper = d.getElementById("wrapper"), count;
        for(var i = 0; i < len; i++) {
            wh(items[i], wid, hei);
            if(items[i].getElementsByClassName("selected").length > 1) {
                count = i;
            }
        }
        wh(wrapper, wid, hei);
        wh(d.getElementById("mask"), parseInt(wid * len, 10), hei);
        scroll_to(wrapper, count, 0);
    }, scroll_to = function(elem, num, speed){
        if(speed > 0) {
            w.setTimeout(function(){
                elem.scrollLeft += ((num * width()) - elem.scrollLeft) / speed * 10;
                scroll_to(elem, num, speed - 5);
            }, 5);
        }
    }, init = function(){
        event(w, "resize", reSize);
        event(d, "click", function(e){
            var e = e || window.event, target = e.target || e.srcElement, panels = d.getElementsByClassName("panel"), parts = null;
            if(target.className.match(/panel/)) {
                for(var i = 0, len = panels.length; i < len; i++) {
                    remove_class(panels[i], "selected");
                }
                target.className += " selected";
                parts = target.href.split("");
                scroll_to(d.getElementById("wrapper"), parseInt(parts[parts.length-1], 10) - 1, 800);
                if(e.preventDefault) {
                    e.preventDefault();
                } else {
                    event.returnValue = false;
                }
                return(false);
            }
        });
    };
    // getElementsByClassName hack
    if(!d.getElementsByClassName) {
        d.getElementsByClassName = function(class_name){
            var elems = [], all = d.getElementsByTagName("*"), reg_ex = new RegExp("(^|\\s)" + class_name + "(\\s|$)");
            for(var i = 0, len = all.length; i < len; i++) {
                if(reg_ex.test(all[i].className)) {
                    elems.push(all[i]);
                }
            }
            return(elems);
        };
    }
    // Attach onload events
    if(modern()) {
        d.addEventListener("DOMContentLoaded", init, false);
    } else {
        d.attachEvent("onreadystatechange", function(){
            if(d.readyState === "complete") {
                init();
            }
        });
    }
})(document, window);

编辑 经过一些调整，现在可以回到 IE7。我不会测试6，对不起，伙计。

于 2013-05-30T08:10:54.143 回答