jzMarquee
This plugin makes a marqee like animation, but insted of simple text, it can be used blocks of images text and links.
<!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" xml:lang="en" lang="en">
<head>
<title>jzmarquee</title>
<script type="text/javascript" src="jquery.js"></script>
<style>
#playJzMarquee{ cursor:pointer; }
#pauseJzMarquee{ cursor:pointer; }
#playJzMarquee.active{ color:red; }
#pauseJzMarquee.active{ color:red; }
#jzframe{ font:#666 Arial; width:748px; height:150px; position:relative; overflow:hidden; borde}
#jzframeContainer{ position:absolute; left:0px; width:200%; height:150px; }
.jzblock{ float:left; width:236px; height:150px; overflow:hidden; margin-right:20px; background:#CAEDC4; }
.jzblock img{ width:100%; height:70px; overflow:hidden; }
.jzblock h4{ width:100%; height:20px; margin:5px; overflow:hidden; }
.jzblock p{ width:100%; height:60px; margin:5px; overflow:hidden; }
</style>
<script type="text/javascript">
$(document).ready(function() {
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
*
* jzmarquee - START
*
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
var blocoWidth = 256;
var speed = 5000;
var auxObj = null;
var isPaused = false;
var actualPosition = 0;
function jzmarquee(option, startPosition){
//alert($('#jzframe').width());
if($('#jzframeContainer .jzblock').length<=3){ return; }
// PLAY
if(option=="play")
$('#jzframeContainer').animate(, ((speed*(blocoWidth+startPosition))/blocoWidth), 'linear', function() {
auxObj = $('#jzframeContainer .jzblock:first-child');
$('#jzframeContainer .jzblock:first-child').remove();
$('#jzframeContainer').append(auxObj);
$('#jzframeContainer').css('left', 0);
jzmarquee('play', 0);
});
// PAUSE
if(option=="pause") {
$('#jzframeContainer').stop();
actualPosition = parseInt($('#jzframeContainer').css('left'));
$('#pauseJzMarquee').addClass('active');
$('#playJzMarquee').removeClass('active');
}
// RESUME
if(option=="resume") {
jzmarquee('play', actualPosition);
$('#playJzMarquee').addClass('active');
$('#pauseJzMarquee').removeClass('active');
}
}
$('#jzframe').mouseover(function() {
jzmarquee('pause', 0);
});
$('#jzframe').mouseout(function() {
if(!isPaused)
jzmarquee('resume', 0);
});
$('#pauseJzMarquee').click(function(){
if(!isPaused){
jzmarquee('pause', 0);
isPaused = true;
}
});
$('#playJzMarquee').click(function(){
if(isPaused){
jzmarquee('resume', 0);
isPaused = false;
}
});
jzmarquee("play", 0);
/* jzmarquee - end
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
});
</script>
</head>
<body>
<h2>jzMarquee</h2>
<p>
<a id="playJzMarquee" class="active">Play</a>
<a id="pauseJzMarquee">Pause</a>
</p>
<div id="jzframe">
<div id="jzframeContainer">
<div class="jzblock"><img src="img1.jpg"><h4>TITLE 1</h4><p>Description of element 1</p></div>
<div class="jzblock"><img src="img2.jpg"><h4>TITLE 2</h4><p>Description of element 2</p></div>
<div class="jzblock"><img src="img3.jpg"><h4>TITLE 3</h4><p>Description of element 3</p></div>
<div class="jzblock"><img src="img4.jpg"><h4>TITLE 4</h4><p>Description of element 4</p></div>
</div>
</div>
</body>
</html>
Go Back