以下是 jQuery社交网站图标展示 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery社交网站图标展示</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div id="wrapper">
<div id="content">
<h3>Pure CSS3</h3>
<!-- Social Media Buttons - CSS3 -->
<ul class="social" id="css3">
<li class="delicious">
<a href="#"><strong>sharejs</strong></a>
</li>
<li class="digg">
<a href="#"><strong>Digg</strong></a>
</li>
<li class="facebook">
<a href="#"><strong>Facebook</strong></a>
</li>
<li class="flickr">
<a href="#"><strong>Flickr</strong></a>
</li>
<li class="linkedin">
<a href="#"><strong>LinkedIn</strong></a>
</li>
<li class="reddit">
<a href="#"><strong>Reddit</strong></a>
</li>
<li class="rss">
<a href="#"><strong>RSS</strong></a>
</li>
<li class="twitter">
<a href="#"><strong>Twitter</strong></a>
</li>
</ul>
<!-- /Social Media Buttons - CSS3 -->
<h3>jQuery</h3>
<!-- Social Media Buttons - jQuery -->
<ul class="social" id="jquery">
<li class="delicious">
<a href="#"><strong>sharejs</strong></a>
</li>
<li class="digg">
<a href="#"><strong>Digg</strong></a>
</li>
<li class="facebook">
<a href="#"><strong>Facebook</strong></a>
</li>
<li class="flickr">
<a href="#"><strong>Flickr</strong></a>
</li>
<li class="linkedin">
<a href="#"><strong>LinkedIn</strong></a>
</li>
<li class="reddit">
<a href="#"><strong>Reddit</strong></a>
</li>
<li class="rss">
<a href="#"><strong>RSS</strong></a>
</li>
<li class="twitter">
<a href="#"><strong>Twitter</strong></a>
</li>
</ul>
<!-- /Social Media Buttons - jQuery -->
</div>
</div>
<br><br><br><br>
</body>
</html>JS代码(script.js):
/** Author:Marco Kuiper (http://www.marcofolio.net/)*/
$(document).ready(function(){
// Hide all the tooltips$("#jquery li").each(function(){
$("a strong",this).css("opacity","0");
}
);
$("#jquery li").hover(function(){
// Mouse over$(this).stop().fadeTo(500,1).siblings().stop().fadeTo(500,0.2);
$("a strong",this).stop().animate({
opacity:1,top:"-10px"}
,300);
}
,function(){
// Mouse out$(this).stop().fadeTo(500,1).siblings().stop().fadeTo(500,1);
$("a strong",this).stop().animate({
opacity:0,top:"-1px"}
,300);
}
);
}
);
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-image:url("../images/texture.gif");font-family:"Segoe UI","HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Arial,Tahoma,Verdana,sans-serif;font-size:13px;}
h1{font:bold 65px/60px Helvetica,Arial,Sans-serif;text-align:center;color:#121621;text-shadow:0px 2px 6px #333;}
h1 small{font-size:20px;text-transform:uppercase;letter-spacing:14px;display:block;color:#000000;}
h2 a{display:block;text-decoration:none;margin:0 0 30px 0;font:italic 45px Georgia,Times,Serif;text-align:center;color:#312400;text-shadow:0px 2px 6px #333;}
h2 a:hover{color:#AF7F00;}
h3{clear:both;padding:20px 0 0 60px;}
p{padding:5px 10px;}
a{color:#AF7F00;text-decoration:underline;}
a:hover{text-decoration:none;}
/* COMMON CLASSES */
.break{clear:both;}
/* WRAPPER */
#wrapper{width:800px;margin:40px auto;}
/* SOCIAL ICONS - GENERAL */
.social{list-style:none;margin:30px auto;width:464px;}
.social li{display:inline;float:left;background-repeat:no-repeat;}
.social li a{display:block;width:48px;height:48px;padding-right:10px;position:relative;text-decoration:none;}
.social li a strong{font-weight:normal;position:absolute;left:20px;top:-1px;color:#fff;padding:3px;z-index:9999;text-shadow:1px 1px 0 rgba(0,0,0,0.75);background-color:rgba(0,0,0,0.7);-moz-border-radius:3px;-moz-box-shadow:0 0 5px rgba(0,0,0,0.5);-webkit-border-radius:3px;-webkit-box-shadow:0 0 5px rgba(0,0,0,0.5);border-radius:3px;box-shadow:0 0 5px rgba(0,0,0,0.5);}
li.delicious{background-image:url("../images/delicious.png");}
li.digg{background-image:url("../images/digg.png");}
li.facebook{background-image:url("../images/facebook.png");}
li.flickr{background-image:url("../images/flickr.png");}
li.linkedin{background-image:url("../images/linkedin.png");}
li.reddit{background-image:url("../images/reddit.png");}
li.rss{background-image:url("../images/rss.png");}
li.twitter{background-image:url("../images/twitter.png");}
/* SOCIAL ICONS - CSS3 */
#css3:hover li{opacity:0.2;}
#css3 li{-webkit-transition-property:opacity;-webkit-transition-duration:500ms;-moz-transition-property:opacity;-moz-transition-duration:500ms;}
#css3 li a strong{opacity:0;-webkit-transition-property:opacity,top;-webkit-transition-duration:300ms;-moz-transition-property:opacity,top;-moz-transition-duration:300ms;}
#css3 li:hover{opacity:1;}
#css3 li:hover a strong{opacity:1;top:-10px;}
分享到QQ
分享到微博
微信扫一扫
