Crear el banner de iTunes con jQuery

$(document).ready(function() {
// ############################################################################## Block B code - START

var height = $('#blockB a').height();// get the height of the first image in block B
var timeout = 0;


function nextA() {
clearTimeout(timeout);

$('#blockB').css({bottom: 0});// set style bottom:0px to div with id = blockB
$('#blockB').animate({bottom: -height}, 600);// make image move 73 px to the bottom with animated effect for 600 ms
$('#blockB a:last-child').prependTo('#blockB');// take the last image and add the top in the save div i.e id= blockB
// ############################################################################# Block B code - END

// ######################################################################################## Block A code - START
$myclone = $('#blockB a:last-child').clone();

var image_manipulation = $myclone.html() ; // contains something like :

$big_image = image_manipulation.replace(/_small/, '');
// we now remove the text "_small" from the image src to make it like :
// we did this because we need to point it to the larger image
$('#blockA a').html($big_image);// insert the larger image in our Block A
$('#blockA img').removeClass("min").addClass("max");//remove the class 'min' associated with image and insert class max.
//E.g
$('#blockA img').css({opacity: 0}) // Make the image invisible by adding a css style opacity:0.
//We did that because we want to make the larger image fade in.
.animate({opacity: 1}, 600);//Put back the opacity to 1 in 600 Millisecond => Produce a face in effect


//#################################################################################### Block A code - END
timeout = setTimeout(function() { // call the function nextA() repeatedly evey 5000 ms
nextA();
}, 5000);
}

// mouse events
$('#block-itunes')
.mouseenter(function() {//When user hover cursor on banner
$('#bi-button').stop().animate({opacity: 1});//add the "Arrow" button
})
.mouseleave(function() {//When user move cursor away
$('#bi-button').stop().animate({opacity: 0});//Remove the "Arrow" button
});
$('#bi-button')
.css({opacity: 0})
.bind('keydown mousedown', function(){
$(this).addClass('btn-down');//give the impression button is pressing
})
.bind('keyup blur mouseup mouseleave', function(){
$(this).removeClass('btn-down');//give the impression button is being released
})
.click(function() {//When user clicks the "Arrow" button
nextA(); // make the image 'rotate' through the list
});


nextA();// call function nextA() => This is where it starts ! :)
});
Autor: Hyder - Fuente

Enlaces patrocinados:



Comentarios

Deje un Comentario
[Opcional]
(No se mostrará en el sitio)
[Opcional]
[Opcional]

Ultimos Comentarios

jhonydepp dijo:

excelente recurso gracias por compartirlo

monipodio dijo:

Tu pagina es un horror,... o no es compatible con Chrome, no pude ver absolutamente nada, ni código fuente ni demostrativo. ...

candy neyra dijo:

como puedo obtener el codigo para implementar

Ramesh Sampangi dijo:

Really nice post. I liked it. Keep sharing some more posts again quickly! <a href="https://aipatasala.com/courses/DS@HYD/Data-Science-Course-in-Hyderabad">Data ...

teja aswani dijo:

This is a well-written article. I read the material and found it to be extremely beneficial. Thank you for sharing this information. ...

Artificial Intelligence course in Chennai dijo:

I really enjoy every part and have bookmarked you to see the new things you post. Well done for this excellent article. Please ...

AWS Training in Hyderabad dijo:

Excellent pieces. Keep posting such kind of info on your blog. I?m really impressed by your site. <a href="https://www.kellytechno.com/Hyderabad/Course/amazon-web-services-training">AWS ...

www.amazon.com/mytv dijo:

<a href="https://sites.google.com/view/avgcomenusactivation/" rel="dofollow">avg.com/retail</a> <a ...

Brajput123 dijo:

<a href="https://www.amzoncamzon.com/"> Amazon.com mytv </a> - you merely unboxed a fresh ...

SyntaxHighlighter.config.stripBrs=true;