Skip to content

Instantly share code, notes, and snippets.

@hisasann

hisasann/addCommand - scrollbar.html

Created September 21, 2009 07:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save hisasann/190118 to your computer and use it in GitHub Desktop.
Save hisasann/190118 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
addCommand - scrollbar.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>untitled</title>
<meta name="generator" content="TextMate http://macromates.com/">
<meta name="author" content="">
<style type="text/css" media="screen">
* {
margin: 0px;
padding: 0px;
}
body {
overflow: hidden;
}
#wrap {
width: 100%;
height: 100%;
}
</style>
<script src="../js/jquery-1.3.2.js"></script>
<script src="../js/jquery.easing.1.3.js"></script>
<script src="../js/addCommand.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
var WIDTH = 16,
TIMES = 5,
winWidth = $(window).width(),
winHeight = $(window).height(),
scrWidth = WIDTH,
sumWidth = 0,
maxLength = 0;
for (var i=0; i < 1000; ++i) {
sumWidth += scrWidth;
if(winWidth <= sumWidth){
maxLength = i;
break;
}
(function() {
var index = i;
$("<div>")
.css({
float: "left",
width: WIDTH + "px", height: winHeight + "px",
overflow: "auto"
})
.append($("<div>").css({ height: (winHeight * TIMES) + "px" }))
.appendTo("#wrap");
})();
};
$.addCommand.define();
$("#wrap").find("div").each(function(index, elem) {
var $this = $(this);
(function() {
var callee = arguments.callee;
addCommand(
Prop($this.find("div"), {
backgroundColor: "#FFE635"
}),
DoTweener($this, {
scrollTop: (winHeight * TIMES - winHeight) + "px"
}, 1000, "easeInOutCirc", function() {
}, 10 * index
),
Prop($this.find("div"), {
backgroundColor: "#CDFF35"
}),
DoTweener($this, {
scrollTop: 0 + "px"
}, 1000, "easeInExpo", function() {
}, 10 * index
),
Prop($this.find("div"), {
backgroundColor: "#35FFBD"
}),
DoTweener($this, {
scrollTop: index * 50 + "px"
}, 1000, "easeOutQuad", function() {
}, 10 * index
),
Prop($this.find("div"), {
backgroundColor: "#FF3535"
}),
DoTweener($this, {
scrollTop: (maxLength - index) * 50 + "px"
}, 1000, "easeInQuint", function() {
}, 10 * index
),
Prop($this.find("div"), {
backgroundColor: "#FF35BD"
}),
DoTweener($this, {
scrollTop: 0 + "px"
}, 1000, "easeInSine", function() {
}, 10 * index
),
function() {
setTimeout(callee, 100);
}
);
})();
});
});
</script>
</head>
<body>
<div id="wrap">
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment