|
 CLICK HERE TO SEE THE WORKING EXAMPLE.
This carousel, developed in jQuery, has some interesting features: not only does it make use of several kinds of loop, specifically used, in this example, to iterate over a collection of '<ARTICLE>' items, but it also utilize the 'bind()' method to associate events, and their management, with given 'DOM' items.
The code shows how all the '<ARTICLE>' items get interactive associating them with the 'click' event handling.
The same function is executed whatever '<ARTICLE>' item is clicked on.
Customized properties of an object called 'data' (in turn a property of the object represting the event passed to the handler as parameter) allows you to distinguish which '<ARTICLE>' item underwent the event.
Trigonometric functions, timers to manage animations, run-time associations of style properties are other important programming aspects highlighted in this example.
As far as styling is concerned it is nice to notice the usage of cursor customization when hovering over the '<ARTICLE>' items (to make the classical arrow persist when the cursor itself is currently over the text fields embedded into the '<ARTICLE>' items) and text-shadows.
Some browsers may not support properly some of the style features used in the example.
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>:)</title>
<style>
body
{
padding: 0px;
margin: 0px;
background-color: rgb(210,90,40);
font-family: Helvetica, Arial, Sans-serif;
}
article
{
position: absolute;
display: block;
width: 300px;
height: 87px;
padding-top: 10px;
border: 2px solid rgb(140,129,98);
background-color: rgba(240,240,240);
background-color: rgba(240,240,240,.6);
font-size: 2em;
font-variant: small-caps;
letter-spacing: .05em;
text-shadow: rgba(34,34,34,.8) 3px 3px 6px;
text-align: center;
cursor: pointer;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script> $(document).ready(function()
{
//coded by Luca Bonacorsi.
var articles=jQuery('article');
var counter=0;
var centerX=360;
var centerY=360;
var angle=0;
var radians=0;
var radiusX=180;
var radiusY=260;
var speed=60;
var angleIncrement=1;
var radiansIncrement=(Math.PI*2)/(articles.length);
function initializeArticles()
{
articles.each(function(i)
{
var article=$(this);
var oW=article.outerWidth()/2;
var oH=article.outerHeight()/2;
article.css({left:centerX+(Math.cos(radians)*radiusX)-oW,
top:centerY-(Math.sin(radians)*radiusY)-oH});
radians+=radiansIncrement;
article.bind('click',{text:article.text(),index:i},onClickArticle);
});
}
function moveArticles()
{
$.each(articles,function(i,article)
{
var oW=articles.eq(i).outerWidth()/2;
var oH=articles.eq(i).outerHeight()/2;
var offset=(angle/180)*Math.PI;
var totalAngle=offset+radians;
articles.eq(i).css({left:centerX+(Math.cos(totalAngle)*radiusX)-oW,
top:centerY-(Math.sin(totalAngle)*radiusY)-oH});
radians+=radiansIncrement;
});
angle+=angleIncrement;
}
function onClickArticle(e)
{
if(e.data.index==5)
alert('Logo of Lookahead Mobile!');
else if(e.data.index==10)
alert('Logo of Lookahead Web Development!');
else
alert('The text of the article clicked on is: '+e.data.text);
}
initializeArticles();
radians=0;
setInterval(function(){moveArticles();},speed);
}); </script> </head>
<body>
<section>
<article id="a_1">1) Android SDK!</article>
<article id="a_2">2) Java!</article>
<article id="a_3">3) Objective-C!</article>
<article id="a_4">4) ActionScript 3.0!</article>
<article id="a_5">5) jQuery!</article>
<article id="a_6">
<img src="/images/lookahead_mobile.png" width="194" height="77">
</article>
<article id="a_7">7) jQuery Mobile!</article>
<article id="a_8">8) C#!</article>
<article id="a_9">9) C++!</article>
<article id="a_10">10) C!</article>
<article id="a_11">
<img src="/images/lookahead_web_development.png" width="208" height="77">
</article>
</section>
</body>
</html>
|
