Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
fala galera comecei a montar uma classe em mootools
só na hora de executar da erro
jah fiz di td
a pagina de teste http://www.ourodeofir.com.br/teste.html
configure.js
var ConfigureAlbum = new Class({
options: {
content: "thumb",
scrollbar: "scrollbar",
handle: "handle",
horizontal: true,
ignoreMouse: false
},
/*
Property: initialize
initializes a new configure album
*/
initialize: function(options) {
this.setOptions(options);
this.move();
},
move: function() {
var steps = (this.options.horizontal ? ($(this.options.content).getSize().scrollSize.x - $(this.options.content).getSize().size.x) : ($(this.options.content).getSize().scrollSize.y - $(this.options.content).getSize().size.y));
var slider = new Slider($(this.options.scrollbar), $(this.options.handle), {
steps: steps,
mode: (this.options.horizontal ? 'horizontal' : 'vertical'),
onChange: function(step){
var x = (this.options.horizontal ? step : 0);
var y = (this.options.horizontal ? 0 : step);
$(this.options.content).scrollTo(x, y);
},
}).set(0);
if( !(this.options.ignoreMouse) ){
$$(this.options.content, this.options.scrollbar).addEvent('mousewheel', function(e){
e = new Event(e).stop();
var step = slider.step - e.wheel * 30;
slider.set(step);
});
}
$(document.body).addEvent('mouseleave',function(){slider.drag.stop()});
}
});
ConfigureAlbum.implement(new Events, new Options);
window.addEvent('domready', function(){
new ConfigureAlbum();
});<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="[http://www.w3.org/1999/xhtml">](http://www.w3.org/1999/xhtml)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="configure.js"></script>
<style> width: 100%;
height: 206px;
overflow:hidden;
} width: 1000px;
}
.scrollbar-hor{
height: 20px;
width: 100%;
float:left;
background-color: #ccc;
}
.handle-hor{
height: 20px;
width: 42px;
background-color: #333;
}
</style>
</head>
<body>
<div id="thumb"><p>a</p></div>
<div class="clear"></div>
<div id="scrollbar" class="scrollbar-hor">
<div id="handle" class="handle-hor"></div>
</div>
</body>
</html>Carregando comentários...