美しい水平スクロール/スライド効果がここに描かれています: http://www.queness.com/resources/html/scroll/horizontal.html . しかし、私は jQuery よりも普通の JavaScript の方が好きです。バニラフレーバーで似たようなものに出くわした人はいますか? SO で見つけた例はすべて jQuery です。正しい検索文字列を使用しなかった場合は、どの文字列を使用すればよいか教えていただければ幸いです。
質問する
1682 次
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>
scroll.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;
}
そして最後に、楽しい部分です。ご不明な点がございましたら、お気軽にお問い合わせください。私の側では問題なく動作していますが、わかりません。scroll.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);
EDIT いくつかの調整の後、これは現在IE7に戻っています。私は6をテストしません、申し訳ありません。
于 2013-05-30T08:10:54.143 に答える