以下是 jQuery仿苹果Skype应用程序 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1"/>
<title>CSS3 and jQuery Skype Menu for Mac</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div id="wrapper">
<h1>CSS3 and jQuery Skype Menu for Mac</h1>
<p>Below you'll find the menu of the Mac version of the Skype application. It was created by Marcofolio.net and combines (once again) the use of CSS3 (<code>box-shadow</code> and <code>text-shadow</code>) and <a href="http://jquery.com/">jQuery</a>. The <a href="https://developer.skype.com/Download/SkypeIcons">icons used are from Skype</a>.</p>
<br />
<p>Although this demonstration is nothing more than a proof of concept, it does show a great example on what can be created using CSS3 and jQuery.</p>
<div id="skypemenu">
<img src="images/skype_logo.png" alt="Skype Logo" />
<div class="skypeperson">
<div class="skypename skypeonline">Marco Kuiper</div>
<div class="skypeinfo">
<img src="http://s3.amazonaws.com/twitter_production/profile_images/65880668/twitter-ava_bigger.png" alt="" class="skypeavatar" />
<p class="skypedetails">Marcofolio.net - The place to be! This crazy Skype example was created by me.</p>
<br class="break" />
<p class="skypelocation">(GMT+2) Arnhem, The Netherlands</p>
<p class="skypeicons">
<a href="http://twitter.com/marcofolio"><img src="images/Message_24x24.png" alt="Message" /></a>
<a href="http://www.marcofolio.net/"><img src="images/CallStart_24x24.png" alt="Start Call" /></a>
</p>
<br class="break" />
</div>
</div>
<div class="skypeperson">
<div class="skypename skypeoffline">Adelle Charles</div>
<div class="skypeinfo">
<img src="http://s3.amazonaws.com/twitter_production/profile_images/71314365/FBG-Adelle-4_bigger.jpg" alt="" class="skypeavatar" />
<p class="skypedetails">Co-Founder + Creative Director at Fuel Brand Inc / Creators of the fuelbrandnetwork.com</p>
<br class="break" />
<p class="skypelocation">New York City</p>
<p class="skypeicons">
<a href="http://twitter.com/adellecharles"><img src="images/Message_24x24.png" alt="Message" /></a>
<a href="http://fuelbrandgroup.com/"><img src="images/CallStart_24x24.png" alt="Start Call" /></a>
</p>
<br class="break" />
</div>
</div>
<div class="skypeperson">
<div class="skypename skypebusy">Angie Bowen</div>
<div class="skypeinfo">
<img src="http://s3.amazonaws.com/twitter_production/profile_images/301256520/Creativity-Angie_bigger.jpg" alt="" class="skypeavatar" />
<p class="skypedetails">I'm a 32 year old artist, designer & web developer living in the mountains of Colorado.</p>
<br class="break" />
<p class="skypelocation">Mountains of Colorado</p>
<p class="skypeicons">
<a href="http://twitter.com/angbowen"><img src="images/Message_24x24.png" alt="Message" /></a>
<a href="http://arbent.net/"><img src="images/CallStart_24x24.png" alt="Start Call" /></a>
</p>
<br class="break" />
</div>
</div>
<div class="skypeperson">
<div class="skypename skypebusy">Aravind Ajith</div>
<div class="skypeinfo">
<img src="http://s3.amazonaws.com/twitter_production/profile_images/282148598/avatar_copy_bigger.jpg" alt="" class="skypeavatar" />
<p class="skypedetails">Hard core designer, blogger, coder. Loves Drupal and Wordpress. </p>
<br class="break" />
<p class="skypelocation">India</p>
<p class="skypeicons">
<a href="http://twitter.com/aravindajith"><img src="images/Message_24x24.png" alt="Message" /></a>
<a href="http://thedesignsuperhero.com/"><img src="images/CallStart_24x24.png" alt="Start Call" /></a>
</p>
<br class="break" />
</div>
</div>
<div class="skypeperson">
<div class="skypename skypeoffline">Chris Coyier</div>
<div class="skypeinfo">
<img src="http://s3.amazonaws.com/twitter_production/profile_images/54797231/avatar_bigger.jpg" alt="" class="skypeavatar" />
<p class="skypedetails">Lead cascader. Head tag closer.</p>
<br class="break" />
<p class="skypelocation">Chicago, IL</p>
<p class="skypeicons">
<a href="http://twitter.com/chriscoyier"><img src="images/Message_24x24.png" alt="Message" /></a>
<a href="http://css-tricks.com/"><img src="images/CallStart_24x24.png" alt="Start Call" /></a>
</p>
<br class="break" />
</div>
</div>
<div class="skypeperson">
<div class="skypename skypeoffline">Chris Spooner</div>
<div class="skypeinfo">
<img src="http://s3.amazonaws.com/twitter_production/profile_images/281960515/chrisspooner-sq_bigger.jpg" alt="" class="skypeavatar" />
<p class="skypedetails">I'm a freelance graphic and web designer, who enjoys publishing design tutorials and articles on his site.</p>
<br class="break" />
<p class="skypelocation">Sheffield, UK</p>
<p class="skypeicons">
<a href="http://twitter.com/chrisspooner"><img src="images/Message_24x24.png" alt="Message" /></a>
<a href="http://www.blog.spoongraphics.co.uk/"><img src="images/CallStart_24x24.png" alt="Start Call" /></a>
</p>
<br class="break" />
</div>
</div>
<div class="skypeperson">
<div class="skypename skypeoffline">David Leggett</div>
<div class="skypeinfo">
<img src="http://s3.amazonaws.com/twitter_production/profile_images/115356351/t9ava_bigger.jpg" alt="" class="skypeavatar" />
<p class="skypedetails">Tutorial9 is a blog that teaches about Photoshop, Blogging, and Photography. We share loads of freebies.</p>
<br class="break" />
<p class="skypelocation"> </p>
<p class="skypeicons">
<a href="http://twitter.com/tutorial9"><img src="images/Message_24x24.png" alt="Message" /></a>
<a href="http://www.tutorial9.net/"><img src="images/CallStart_24x24.png" alt="Start Call" /></a>
</p>
<br class="break" />
</div>
</div>
<div class="skypeperson">
<div class="skypename skypeaway">Francesco Mugnai</div>
<div class="skypeinfo">
<img src="http://s3.amazonaws.com/twitter_production/profile_images/69348347/superthumb_bigger.jpg" alt="" class="skypeavatar" />
<p class="skypedetails">I'm a web/graphic designer and currently, I teach Graphic Design in a renowned Italian institute of Art and Design</p>
<br class="break" />
<p class="skypelocation">Florence, Italy</p>
<p class="skypeicons">
<a href="http://twitter.com/francescomugnai"><img src="images/Message_24x24.png" alt="Message" /></a>
<a href="http://blogof.francescomugnai.com/"><img src="images/CallStart_24x24.png" alt="Start Call" /></a>
</p>
<br class="break" />
</div>
</div>
<div class="skypeperson">
<div class="skypename skypeonline">Franz Jeitz</div>
<div class="skypeinfo">
<img src="http://s3.amazonaws.com/twitter_production/profile_images/67215302/fudgegraphics_avatar_4_bigger.jpg" alt="" class="skypeavatar" />
<p class="skypedetails">Freelance graphic designer. Founder of the design blog fudgegraphics. Tea lover.</p>
<br class="break" />
<p class="skypelocation">London, Luxembourg</p>
<p class="skypeicons">
<a href="http://twitter.com/fudgegraphics"><img src="images/Message_24x24.png" alt="Message" /></a>
<a href="http://www.fudgegraphics.com/"><img src="images/CallStart_24x24.png" alt="Start Call" /></a>
</p>
<br class="break" />
</div>
</div>
<div class="skypeperson">
<div class="skypename skypeonline">Gaya Kessler</div>
<div class="skypeinfo">
<img src="http://s3.amazonaws.com/twitter_production/profile_images/266737708/horseavaIRAN_bigger.jpg" alt="" class="skypeavatar" />
<p class="skypedetails">eb developer, Nintendo fan, CMD dude, likes jQuery, part of Fuel Brand Network and writer / owner of Gaya Design</p>
<br class="break" />
<p class="skypelocation">(GMT+2) Boxmeer, The Netherlands</p>
<p class="skypeicons">
<a href="http://twitter.com/gayadesign"><img src="images/Message_24x24.png" alt="Message" /></a>
<a href="http://www.gayadesign.nl/"><img src="images/CallStart_24x24.png" alt="Start Call" /></a>
</p>
<br class="break" />
</div>
</div>
<div class="skypeperson">
<div class="skypename skypebusy">Jacob Gube</div>
<div class="skypeinfo">
<img src="http://s3.amazonaws.com/twitter_production/profile_images/53104312/jake_avatar_bigger.jpg" alt="" class="skypeavatar" />
<p class="skypedetails">Web developer/designer and founder of Six Revisions.</p>
<br class="break" />
<p class="skypelocation">Bloomington</p>
<p class="skypeicons">
<a href="http://twitter.com/sixrevisions"><img src="images/Message_24x24.png" alt="Message" /></a>
<a href="http://sixrevisions.com/"><img src="images/CallStart_24x24.png" alt="Start Call" /></a>
</p>
<br class="break" />
</div>
</div>
<div class="skypeperson">
<div class="skypename skypeoffline">Janko Jovanovic</div>
<div class="skypeinfo">
<img src="http://s3.amazonaws.com/twitter_production/profile_images/87823445/twitter_pic_bigger.png" alt="" class="skypeavatar" />
<p class="skypedetails">Solutions architect, developer and web designer, dad and husband that writes on JankoAtWarpSpeed.com.</p>
<br class="break" />
<p class="skypelocation">Belgrade</p>
<p class="skypeicons">
<a href="http://twitter.com/jankowarpspeed"><img src="images/Message_24x24.png" alt="Message" /></a>
<a href="http://www.jankoatwarpspeed.com/"><img src="images/CallStart_24x24.png" alt="Start Call" /></a>
</p>
<br class="break" />
</div>
</div>
<div class="skypeperson">
<div class="skypename skypeoffline">Max Stanworth</div>
<div class="skypeinfo">
<img src="http://s3.amazonaws.com/twitter_production/profile_images/70188834/twitmebw_bigger.jpg" alt="" class="skypeavatar" />
<p class="skypedetails">Lover of Typography, Web Design, CSS, XHTML , Illustration, Rock Music</p>
<br class="break" />
<p class="skypelocation">York, United Kingdom</p>
<p class="skypeicons">
<a href="http://twitter.com/designshard"><img src="images/Message_24x24.png" alt="Message" /></a>
<a href="http://www.designshard.com/"><img src="images/CallStart_24x24.png" alt="Start Call" /></a>
</p>
<br class="break" />
</div>
</div>
<div class="skypeperson">
<div class="skypename skypeaway">Navdeep Raj</div>
<div class="skypeinfo">
<img src="http://s3.amazonaws.com/twitter_production/profile_images/62925971/DFWALL_bigger.jpg" alt="" class="skypeavatar" />
<p class="skypedetails">Web Design Freak... oh! and a Practice Lead.</p>
<br class="break" />
<p class="skypelocation">Bangalore, India</p>
<p class="skypeicons">
<a href="http://twitter.com/3drockz/"><img src="images/Message_24x24.png" alt="Message" /></a>
<a href="http://www.dezinerfolio.com/"><img src="images/CallStart_24x24.png" alt="Start Call" /></a>
</p>
<br class="break" />
</div>
</div>
<div class="skypeperson">
<div class="skypename skypeoffline">Noura Yehia</div>
<div class="skypeinfo">
<img src="http://s3.amazonaws.com/twitter_production/profile_images/61625605/noupe_bigger.jpg" alt="" class="skypeavatar" />
<p class="skypedetails">Noupe.com passionately delivers stylish and dynamic news for designers and web-developers on all subjects of design</p>
<br class="break" />
<p class="skypelocation">Egypt</p>
<p class="skypeicons">
<a href="http://twitter.com/nourayehia"><img src="images/Message_24x24.png" alt="Message" /></a>
<a href="http://www.noupe.com/"><img src="images/CallStart_24x24.png" alt="Start Call" /></a>
</p>
<br class="break" />
</div>
</div>
</div>
</div>
</body>
</html>JS代码(script.js):
/** Author:Marco Kuiper (http://www.marcofolio.net/)*/
google.load("jquery","1.3.1");
google.setOnLoadCallback(function(){
addSkypeDetails();
// When a skype name is click,expand it$(".skypename").click(function (){
expandSkype($(this));
}
);
}
);
function expandSkype(parentElem){
addSkypeDetails();
$(parentElem).children().remove();
$(".expanded").removeClass("expanded");
$(".expandeduser").removeClass("expandeduser");
$(".skypeinfo").hide();
$(parentElem).parent().addClass("expandeduser");
$(parentElem).addClass("expanded").next().show();
}
function addSkypeDetails(){
$(".extrainfo").remove();
// Copy the "skypedetails" when not expanded$(".skypedetails").each(function(){
var detailText = $(this).text();
if(detailText.length > 40){
detailText = detailText.substring(0,40) + "...";
}
$(this).parent().prev().append('<span class="extrainfo">'+ detailText +'</span>');
}
);
}
CSS代码(style.css):
/* __ _ _ _ / _| | (_) | | _ __ ___ __ _ _ __ ___ ___ | |_ ___ | |_ ___ _ __ ___| |_| '_ ` _ \ / _` | '__/ __/ _ \| _/ _ \| | |/ _ \ | '_ \ / _ \ __|| | | | | | (_| | | | (_| (_) | || (_) | | | (_) || | | | __/ |_|_| |_| |_|\__,_|_| \___\___/|_| \___/|_|_|\___(_)_| |_|\___|\__|*/
/* BASIC RESET */
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input{margin:0;padding:0;}
/* HTML ELEMENTS */
body{background-color:#eeeeee;font-family:Georgia,serif;font-size:13px;background-image:url(../images/bg.jpg);color:#ccc;}
h1{margin:20px 0px;padding:15px;border-left-width:10px;border-left-color:#eeeeee;border-left-style:solid;}
img{border:0;}
a{color:#ccc;}
ul{margin:0 0 10px 10px;}
/* COMMON CLASSES */
.break{clear:both;}
/* WRAPPER */
#wrapper{width:700px;margin:0 auto;}
/* SKYPE MENU */
#skypemenu{width:355px;margin:20px auto;padding:10px;font-family:"Tahoma";font-size:12px;-moz-box-shadow:0 0 10px #adadad;-moz-border-radius:5px;-webkit-box-shadow:0 0 10px #adadad;-webkit-border-radius:5px;background-color:#fff;}
.skypeperson{}
.skypeonline{background-image:url("../images/PresenceOnline_16x16.png");}
.skypeoffline{background-image:url("../images/PresenceOffline_16x16.png");}
.skypeaway{background-image:url("../images/PresenceAway_16x16.png");}
.skypebusy{background-image:url("../images/PresenceDoNotDisturb_16x16.png");}
.skypename{cursor:pointer;padding:3px 0 5px 30px;background-repeat:no-repeat;background-position:left;text-shadow:#fff 0 1px 0;color:#000;}
.skypeinfo{display:none;}
.skypeavatar{margin:5px;-moz-box-shadow:0 0 3px #adadad;-webkit-box-shadow:0 0 3px #adadad;float:left;width:48px;height:48px;}
.skypedetails{background-image:url("../images/moreinfo.png");background-repeat:no-repeat;width:263px;height:38px;float:left;margin:4px 5px 10px 0;padding:5px 0 0 15px;font-size:10px;color:#7D6666;}
.expanded{background-color:#A9D7FF;}
.expandeduser{margin:5px;border:1px solid white;-moz-box-shadow:0 0 4px #adadad;-moz-border-radius:3px;-webkit-box-shadow:0 0 4px #adadad;-webkit-border-radius:3px;}
.skypelocation{color:#7D6666;float:left;margin:0 0 2px 3px;}
.skypeicons{float:right;margin-right:10px;}
.skypeicons img{margin-top:-20px;}
.extrainfo{color:#7D6666;padding-left:2px;font-size:10px;}
分享到QQ
分享到微博
微信扫一扫
