Here is a simple Mootols-based slidey-scroll. it scrolls 3 images per click. (scroll while Mouseover is not a great way to do it, IMHO) Go to http://mootools.net/download/svn and check Fx.Style & Fx.Styles, then download and link the js where I have "mootools.r381.js". You may need to fiddle with the CSS to get exactly 3 images per "page". IE is rendering it a little differently, but you get the idea.
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title>Untitled Page</title>
<style type="text/css" media="screen"><!--
* {
margin: 0;
padding: 0;
}
#scroller {
color: #fff;
background-color: #37241a;
text-align: center;
width: 160px;
border: solid 1px #d36b37
}
#scrollarea {
height: 321px;
overflow: hidden
}
#scrollarea img {
margin-bottom: 5px;
border: solid 1px #d36b37
}
#scrollitems {
position: relative;
top: 0;
}
--></style>
<script type="text/javascript" src="mootools.r381.js"></script>
<script type="text/javascript"><!--
function setupScroller() {
if (Fx) {
theScroller = document.getElementById("scroller");
theScrollArea = document.getElementById("scrollarea");
theScrollItems = document.getElementById("scrollitems");
document.getElementById("scrollUp").onclick = scroll;
document.getElementById("scrollDown").onclick = scroll;
theScrollItems.style.top = "0px";
tEffect = new Fx.Style(theScrollItems, "top", {duration:350});
}
}
function scroll() {
currentTop = parseInt(theScrollItems.style.top);
currentHeight = parseInt(theScrollArea.offsetHeight);
if (this.id == "scrollUp") {
to = parseInt(theScrollItems.style.top) + currentHeight;
} else if (this.id == "scrollDown") {
to = parseInt(theScrollItems.style.top) - currentHeight;
}
if (-to < parseInt(theScrollItems.offsetHeight) && to <= 0) {
tEffect.custom(currentTop,to);
}
}
window.onload = setupScroller;
//-->
</script>
</head>
<body>
<div id="scroller">
<button id="scrollUp">Scroll Up</button>
<div id="scrollarea">
<div id="scrollitems">
<img src="1.jpg" alt="Image 1" height="100" width="130">
<img src="2.jpg" alt="Image 2" height="100" width="130">
<img src="3.jpg" alt="Image 3" height="100" width="130">
<img src="4.jpg" alt="Image 4" height="100" width="130">
<img src="5.jpg" alt="Image 5" height="100" width="130">
<img src="6.jpg" alt="Image 6" height="100" width="130">
<img src="7.jpg" alt="Image 7" height="100" width="130">
<img src="8.jpg" alt="Image 8" height="100" width="130">
</div>
</div>
<button id="scrollDown">Scroll Down</button>
</div>
</body>
</html>
Bookmarks