[jQuery] Feature List
Este script es genial para mostrar contenido destacado de tu pagina, en la portada de tu sitio!
Primero que nada debemos colocar este codigo entre los tags
y (en caso de PWG colocarlo en texto por encima de la pagina)<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" src="http://jqueryglobe.com/labs/feature_list/jquery.featureList-1.0.0.js"></script>
<style type="text/css">
h3 {
margin: 0;
padding: 7px 0 0 0;
font-size: 16px;
text-transform: uppercase;
}
div#feature_list {
width: 750px;
height: 240px;
overflow: hidden;
position: relative;
}
div#feature_list ul {
position: absolute;
top: 0;
list-style: none;
padding: 0;
margin: 0;
}
ul#tabs {
left: 0;
z-index: 2;
width: 320px;
}
ul#tabs li {
font-size: 12px;
font-family: Arial;
}
ul#tabs li img {
padding: 5px;
border: none;
float: left;
margin: 10px 10px 0 0;
}
ul#tabs li a {
color: #222;
text-decoration: none;
display: block;
padding: 10px;
height: 60px;
outline: none;
}
ul#tabs li a:hover {
text-decoration: underline;
}
ul#tabs li a.current {
background: url('feature-tab-current.png');
color: #FFF;
}
ul#tabs li a.current:hover {
text-decoration: none;
cursor: default;
}
ul#output {
right: 0;
width: 463px;
height: 240px;
position: relative;
}
ul#output li {
position: absolute;
width: 463px;
height: 240px;
}
ul#output li a {
position: absolute;
bottom: 10px;
right: 10px;
padding: 8px 12px;
text-decoration: none;
font-size: 11px;
color: #FFF;
background: #000;
-moz-border-radius: 5px;
}
ul#output li a:hover {
background: #D33431;
}
</style>
<script language="javascript">
$(document).ready(function() {
$.featureList(
$("#tabs li a"),
$("#output li"), {
start_item : 1});});
</script>
Y luego para usarlo debemos utilizar el siguiente codigo (lo debes colocar donde quieras que se vea el efecto)
Demo
Recuerda lo vistes primero en todobanners ;)
Cualquier pregunta los comentarios quedan abiertos ;)
Fuente
Entradas relacionadas
Coloca un link hacia este Post!
