Multi-propósito JavaScript Smooth scroller-iscroll
| Autor: | cubiq |
|---|---|
| Views Total: | 3,065 |
| Sitio oficial: | Ir a la web |
| Actualizado: | January 3, 2017 |
| Licencia: | MIT |
Vista prévia
Descripción
iscroll es un potente, móvil táctil de JavaScript Smooth scroller biblioteca para múltiples propósitos.
Con iscroll, puede desplazar cualquier elemento HTML vertical u horizontalmente con efectos suaves en cualquier dispositivo como móvil, escritorio, tableta y mucho más. Se pueden encontrar más ejemplos en la carpeta demos .
Basic Usage (create an image carousel):
Cargue el iscroll. js en el documento HTML.
<script type="text/javascript" src="iscroll.js"></script>
Crea el HTML para un carrusel de imágenes siguiendo la estructura HTML como esta:
<body onload="loaded()"> <div id="viewport"> <div id="wrapper"> <div id="scroller"> <div class="slide"> <div class="painting giotto"></div> </div> <div class="slide"> <div class="painting leonardo"></div> </div> <div class="slide"> <div class="painting gaugin"></div> </div> <div class="slide"> <div class="painting warhol"></div> </div> </div> </div> </div> <div id="indicator"> <div id="dotty"></div> </div> </body>
El CSS para el estilo del carrusel de imágenes.
#viewport {
position: relative;
width: 320px;
height: 240px;
margin: 0 auto;
background: #444;
overflow: hidden;
}
#wrapper {
width: 200px;
height: 240px;
margin: 0 auto;
}
#scroller {
position: absolute;
z-index: 1;
-webkit-tap-highlight-color: rgba(0,0,0,0);
width: 800px;
height: 240px;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
-o-text-size-adjust: none;
text-size-adjust: none;
background-color: #444;
}
.slide {
width: 200px;
height: 240px;
float: left;
}
.painting {
width: 140px;
height: 200px;
border-radius: 10px;
margin: 20px auto;
border: 1px solid #000;
box-shadow: inset 2px 2px 6px rgba(255,255,255,0.6),
inset -2px -2px 6px rgba(0,0,0,0.6),
0 1px 8px rgba(0,0,0,0.8);
}
.giotto {
background: url(giotto.jpg);
}
.leonardo {
background: url(leonardo.jpg);
}
.gaugin {
background: url(gaugin.jpg);
}
.warhol {
background: url(warhol.jpg);
}
#indicator {
position: relative;
width: 110px;
height: 20px;
margin: 10px auto;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAUBAMAAABohZD3AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QUGCDYztyDUJgAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAGFBMVEUAAADNzc3Nzc3Nzc3Nzc3Nzc3Nzc3///8aWwwLAAAABnRSTlMAX5Ks3/nRD0HIAAAAAWJLR0QHFmGI6wAAAFtJREFUGFdjYGBgEHYNMWRAAJE0IHCEc5nSwEABxleD8JOgXMY0KBCA8FlgfAcIXwzGT4TwzWD8ZAjfDcZPgfDDYPxU7Hx09ejmoduH7h5096L7B8O/6OGBGl4APYg8TQ0XAScAAAAASUVORK5CYII=);
}
#dotty {
position: absolute;
width: 20px;
height: 20px;
border-radius: 10px;
background: #777;
} El JavaScript para inicializar el carrusel de imágenes.
<script type="text/javascript">
var myScroll;
function loaded () {
myScroll = new IScroll('#wrapper', {
scrollX: true,
scrollY: false,
momentum: false,
snap: true,
snapSpeed: 400,
keyBindings: true,
indicators: {
el: document.getElementById('indicator'),
resize: false
}
});
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
</script> Registro de cambios
01/03/2017
- Bugfix
