以下是 jq 3D旋转木马特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<title>jq 3D旋转木马</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.8.0.js"></script>
<script type="text/JavaScript" src="js/cloud-carousel.1.0.5.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#da-vinci-carousel").CloudCarousel( {
reflHeight: 56,
reflGap:2,
titleBox: $('#da-vinci-title'),
altBox: $('#da-vinci-alt'),
buttonLeft: $('#but1'),
buttonRight: $('#but2'),
yRadius:40,
xPos: 285,
yPos: 120,
speed:0.15,
mouseWheel:true
});
$("#carousel2").CloudCarousel({
xPos:280,
yPos:80,
buttonLeft: $('#but3'),
buttonRight: $('#but4'),
FPS:30,
autoRotate: 'left',
autoRotateDelay: 1200,
speed:0.2,
mouseWheel:true,
bringToFront:true
});
});
</script>
</head>
<body>
<center>
<br><br><br>
<div id="da-vinci-carousel" style="width:570px; height:384px;background: url(images/bg.jpg);overflow:scroll;">
<a href="images/382px-Leonardo_self.jpg" rel='lightbox' title="Leonardo Da Vinci"><img class="cloudcarousel" src="images/test9.png" width="128" height="164" alt="Self-portrait in red chalk, circa 1512-1515." title="Leonardo Da Vinci" /></a>
<a href="images/396px-Mona_Lisa.jpg" rel='lightbox' title="Mona Lisa"><img class="cloudcarousel" src="images/test1.png" width="128" height="164" alt="Oil on cotton wood, circa 1503–1505." title="Mona Lisa" /></a>
<a href='images/439px-The_Lady_with_an_Ermine.jpg' rel='lightbox' title="Lady with an Ermine"><img class="cloudcarousel" src="images/test2.png" width="128" height="164" alt="Oil on wood panel, 1485." title="Lady with an Ermine" /></a>
<a href="images/Madonna_of_the_Yarnwinder.jpg" rel="lightbox" title="Madonna of the Yarnwinder"><img class="cloudcarousel" src="images/test3.png" width="128" height="164" alt="Oil on canvas, circa 1501." title="Madonna of the Yarnwinder" /></a>
<a href="images/470px-Madonna_Litta.jpg" rel="lightbox" title="Madonna and the Child"><img class="cloudcarousel" src="images/test4.png" width="128" height="164" alt="Oil on canvas (transferred from panel), circa 1490." title="Madonna and the Child" /></a>
<a href="images/390px-Bacchus_painting.jpg" rel="lightbox" title="Bacchus"><img class="cloudcarousel" src="images/test5.png" width="128" height="164" alt="Oil on walnut panel transferred to canvas, circa 1510–1515." title="Bacchus" /></a>
<a href = "images/452px-Madonna_of_the_carnation_EUR.jpg" rel="lightbox" title="Madonna of the Carnation" ><img class="cloudcarousel" src="images/test6.png" width="128" height="164" alt="Oil on panel, circa 1478–1480." title="Madonna of the Carnation" /></a>
<a href="images/454px-Leonardo_-_St._Anne_cartoon-alternative-downsampled.jpg" rel="lightbox" title="The Virgin and Child with St. Anne and St. John the Baptist"><img class="cloudcarousel" src="images/test7.png" width="128" height="164" alt="
Charcoal, black and white chalk on tinted paper, circa 1499–1500." title="The Virgin and Child with St. Anne and St. John the Baptist" /></a>
<a href="images/FileLeonardo-da-Vinci-020.jpg" rel="lightbox" title="The Virgin and Child with St. Anne"><img class="cloudcarousel" src="images/test8.png" width="128" height="164" alt="Oil on panel, circa 1510." title="The Virgin and Child with St. Anne" /></a>
<div id="da-vinci-title" ></div>
<div id="da-vinci-alt" ></div>
<div id="but1" class="carouselLeft" style="position:absolute;top:20px;right:64px;"></div>
<div id="but2" class="carouselRight" style="position:absolute;top:20px;right:20px;"></div>
</div>
</center>
</body>
</html>
JS代码(cloud-carousel.1.0.5.js):
//////////////////////////////////////////////////////////////////////////////////// CloudCarousel V1.0.5// (c) 2011 by R Cecco. <http://www.professorcloud.com>// MIT License//// Reflection code based on plugin by Christophe Beyls <http://www.digitalia.be>//// Please retain this copyright header in all versions of the software//////////////////////////////////////////////////////////////////////////////////(function($){
// START Reflection object.// Creates a reflection for underneath an image.// IE uses an image with IE specific filter properties,other browsers use the Canvas tag.// The position and size of the reflection gets updated by updateAll() in Controller.function Reflection(img,reflHeight,opacity){
varreflection,cntx,imageWidth = img.width,imageHeight = img.width,gradient,parent;
parent = $(img.parentNode);
this.element = reflection = parent.append("<canvas class='reflection' style='position:absolute'/>").find(':last')[0];
if ( !reflection.getContext && $.browser.msie){
this.element = reflection = parent.append("<img class='reflection' style='position:absolute'/>").find(':last')[0];
reflection.src = img.src;
reflection.style.filter = "flipv progid:DXImageTransform.Microsoft.Alpha(opacity=" + (opacity * 100) + ",style=1,finishOpacity=0,startx=0,starty=0,finishx=0,finishy=" + (reflHeight / imageHeight * 100) + ")";
}
else{
cntx = reflection.getContext("2d");
try{
$(reflection).attr({
width:imageWidth,height:reflHeight}
);
cntx.save();
cntx.translate(0,imageHeight-1);
cntx.scale(1,-1);
cntx.drawImage(img,0,0,imageWidth,imageHeight);
cntx.restore();
cntx.globalCompositeOperation = "destination-out";
gradient = cntx.createLinearGradient(0,0,0,reflHeight);
gradient.addColorStop(0,"rgba(255,255,255," + (1 - opacity) + ")");
gradient.addColorStop(1,"rgba(255,255,255,1.0)");
cntx.fillStyle = gradient;
cntx.fillRect(0,0,imageWidth,reflHeight);
}
catch(e){
return;
}
}
// Store a copy of the alt and title attrs into the reflection$(reflection).attr({
'alt':$(img).attr('alt'),title:$(img).attr('title')}
);
}
//END Reflection object// START Item object.// A wrapper object for items within the carousel.varItem = function(imgIn,options){
this.orgWidth = imgIn.width;
this.orgHeight = imgIn.height;
this.image = imgIn;
this.reflection = null;
this.alt = imgIn.alt;
this.title = imgIn.title;
this.imageOK = false;
this.options = options;
this.imageOK = true;
if (this.options.reflHeight > 0){
this.reflection = new Reflection(this.image,this.options.reflHeight,this.options.reflOpacity);
}
$(this.image).css('position','absolute');
// Bizarre. This seems to reset image width to 0 on webkit!}
;
// END Item object// Controller object.// This handles moving all the items,dealing with mouse clicks etc.var Controller = function(container,images,options){
varitems = [],funcSin = Math.sin,funcCos = Math.cos,ctx=this;
this.controlTimer = 0;
this.stopped = false;
//this.imagesLoaded = 0;
this.container = container;
this.xRadius = options.xRadius;
this.yRadius = options.yRadius;
this.showFrontTextTimer = 0;
this.autoRotateTimer = 0;
if (options.xRadius === 0){
this.xRadius = ($(container).width()/2.3);
}
if (options.yRadius === 0){
this.yRadius = ($(container).height()/6);
}
this.xCentre = options.xPos;
this.yCentre = options.yPos;
this.frontIndex = 0;
// Index of the item at the front// Start with the first item at the front.this.rotation = this.destRotation = Math.PI/2;
this.timeDelay = 1000/options.FPS;
// Turn on the infoBoxif(options.altBox !== null){
$(options.altBox).css('display','block');
$(options.titleBox).css('display','block');
}
// Turn on relative position for container to allow absolutely positioned elements// within it to work.$(container).css({
position:'relative',overflow:'hidden'}
);
$(options.buttonLeft).css('display','inline');
$(options.buttonRight).css('display','inline');
// Setup the buttons.$(options.buttonLeft).bind('mouseup',this,function(event){
event.data.rotate(-1);
return false;
}
);
$(options.buttonRight).bind('mouseup',this,function(event){
event.data.rotate(1);
return false;
}
);
// You will need this plugin for the mousewheel to work:http://plugins.jquery.com/project/mousewheelif (options.mouseWheel){
$(container).bind('mousewheel',this,function(event,delta){
event.data.rotate(delta);
return false;
}
);
}
$(container).bind('mouseover click',this,function(event){
clearInterval(event.data.autoRotateTimer);
// Stop auto rotation if mouse over.vartext = $(event.target).attr('alt');
// If we have moved over a carousel item,then show the alt and title text.if ( text !== undefined && text !== null ){
clearTimeout(event.data.showFrontTextTimer);
$(options.altBox).html( ($(event.target).attr('alt') ));
$(options.titleBox).html( ($(event.target).attr('title') ));
if ( options.bringToFront && event.type == 'click' ){
varidx = $(event.target).data('itemIndex');
varfrontIndex = event.data.frontIndex;
//vardiff = idx - frontIndex;
var diff = (idx - frontIndex) % images.length;
if (Math.abs(diff) > images.length / 2){
diff += (diff > 0 ? -images.length:images.length);
}
event.data.rotate(-diff);
}
}
}
);
// If we have moved out of a carousel item (or the container itself),// restore the text of the front item in 1 second.$(container).bind('mouseout',this,function(event){
varcontext = event.data;
clearTimeout(context.showFrontTextTimer);
context.showFrontTextTimer = setTimeout( function(){
context.showFrontText();
}
,1000);
context.autoRotate();
// Start auto rotation.}
);
// Prevent items from being selected as mouse is moved and clicked in the container.$(container).bind('mousedown',this,function(event){
event.data.container.focus();
return false;
}
);
container.onselectstart = function (){
return false;
}
;
// For IE.this.innerWrapper = $(container).wrapInner('<div style="position:absolute;
width:100%;
height:100%;
"/>').children()[0];
// Shows the text from the front most item.this.showFrontText = function(){
if ( items[this.frontIndex] === undefined ){
return;
}
// Images might not have loaded yet.$(options.titleBox).html( $(items[this.frontIndex].image).attr('title'));
$(options.altBox).html( $(items[this.frontIndex].image).attr('alt'));
}
;
this.go = function(){
if(this.controlTimer !== 0){
return;
}
varcontext = this;
this.controlTimer = setTimeout( function(){
context.updateAll();
}
,this.timeDelay);
}
;
this.stop = function(){
clearTimeout(this.controlTimer);
this.controlTimer = 0;
}
;
// Starts the rotation of the carousel. Direction is the number (+-) of carousel items to rotate by.this.rotate = function(direction){
this.frontIndex -= direction;
this.frontIndex %= items.length;
this.destRotation += ( Math.PI / items.length ) * ( 2*direction );
this.showFrontText();
this.go();
}
;
this.autoRotate = function(){
if ( options.autoRotate !== 'no' ){
vardir = (options.autoRotate === 'right')? 1:-1;
this.autoRotateTimer = setInterval( function(){
ctx.rotate(dir);
}
,options.autoRotateDelay );
}
}
;
// This is the main loop function that moves everything.this.updateAll = function(){
varminScale = options.minScale;
// This is the smallest scale applied to the furthest item.var smallRange = (1-minScale) * 0.5;
varw,h,x,y,scale,item,sinVal;
varchange = (this.destRotation - this.rotation);
varabsChange = Math.abs(change);
this.rotation += change * options.speed;
if ( absChange < 0.001 ){
this.rotation = this.destRotation;
}
varitemsLen = items.length;
varspacing = (Math.PI / itemsLen) * 2;
//varwrapStyle = null;
varradians = this.rotation;
varisMSIE = $.browser.msie;
// Turn off display. This can reduce repaints/reflows when making style and position changes in the loop.// See http://dev.opera.com/articles/view/efficient-javascript/?page=3this.innerWrapper.style.display = 'none';
varstyle;
varpx = 'px',reflHeight;
var context = this;
for (var i = 0;
i<itemsLen;
i++){
item = items[i];
sinVal = funcSin(radians);
scale = ((sinVal+1) * smallRange) + minScale;
x = this.xCentre + (( (funcCos(radians) * this.xRadius) - (item.orgWidth*0.5)) * scale);
y = this.yCentre + (( (sinVal * this.yRadius) ) * scale);
if (item.imageOK){
varimg = item.image;
w = img.width = item.orgWidth * scale;
h = img.height = item.orgHeight * scale;
img.style.left = x + px;
img.style.top = y + px;
img.style.zIndex = "" + (scale * 100)>>0;
// >>0 = Math.foor(). Firefox doesn't like fractional decimals in z-index.if (item.reflection !== null){
reflHeight = options.reflHeight * scale;
style = item.reflection.element.style;
style.left = x + px;
style.top = y + h + options.reflGap * scale + px;
style.width = w + px;
if (isMSIE){
style.filter.finishy = (reflHeight / h * 100);
}
else{
style.height = reflHeight + px;
}
}
}
radians += spacing;
}
// Turn display back on.this.innerWrapper.style.display = 'block';
// If we have a preceptable change in rotation then loop again next frame.if ( absChange >= 0.001 ){
this.controlTimer = setTimeout( function(){
context.updateAll();
}
,this.timeDelay);
}
else{
// Otherwise just stop completely.this.stop();
}
}
;
// END updateAll// Create an Item object for each image//func = function(){
return;
ctx.updateAll();
}
;
// Check if images have loaded. We need valid widths and heights for the reflections.this.checkImagesLoaded = function(){
vari;
for(i=0;
i<images.length;
i++){
if ( (images[i].width === undefined) || ( (images[i].complete !== undefined) && (!images[i].complete) )){
return;
}
}
for(i=0;
i<images.length;
i++){
items.push( new Item( images[i],options ) );
$(images[i]).data('itemIndex',i);
}
// If all images have valid widths and heights,we can stop checking.clearInterval(this.tt);
this.showFrontText();
this.autoRotate();
this.updateAll();
}
;
this.tt = setInterval( function(){
ctx.checkImagesLoaded();
}
,50);
}
;
// END Controller object// The jQuery plugin part. Iterates through items specified in selector and inits a Controller class for each one.$.fn.CloudCarousel = function(options){
this.each( function(){
options = $.extend({
}
,{
reflHeight:0,reflOpacity:0.5,reflGap:0,minScale:0.5,xPos:0,yPos:0,xRadius:0,yRadius:0,altBox:null,titleBox:null,FPS:30,autoRotate:'no',autoRotateDelay:1500,speed:0.2,mouseWheel:false,bringToFront:false}
,options );
// Create a Controller for each carousel.$(this).data('cloudcarousel',new Controller( this,$('.cloudcarousel',$(this)),options) );
}
);
return this;
}
;
}
)(jQuery);
CSS代码(main.css):
/* CSS Document */
*{margin:0px;}
body{background:#E9F0F5 url(cloud-bg2.png) repeat-x 20% 0;font-family:Arial,Helvetica,sans-serif;font-size:13px;margin:0px;padding:0px;}
div#midground{background:transparent url(cloud-bg3.png) 30% 128px repeat-x;margin:0;padding:0;width:100%;}
div#foreground{background:transparent url(cloud-bg4.png) 40% 180px repeat-x;margin:0;padding:0;width:100%;}
/* Fix for Google Chrome clipped background bug */
html{background-color:#E9F0F5;}
img{border:none;}
h1,h2{border-bottom:2px dotted #cc6600;margin-top:20px;margin-bottom:10px;padding-top:0px;padding-bottom:5px;font-size:18px;font-weight:bold;color:#f90;font-family:Tahoma,Geneva,sans-serif;letter-spacing:1px;}
h2{font-size:13px;text-transform:uppercase;font-family:Tahoma,Geneva,sans-serif;font-weight:bold;letter-spacing:2px;color:#333333;border-bottom:2px solid #cccccc;}
h3{font-family:Tahoma,Geneva,sans-serif;font-size:14px;color:#333;letter-spacing:1px;margin-top:10px;margin-bottom:10px;}
p{margin-bottom:10px;margin-top:10px;line-height:140%;}
.tip{border-bottom:2px dashed #e00;cursor:help;}
.showhide,.showhideopen{cursor:pointer;font-weight:bold;padding:5px;background:#f90;border:#666;margin-bottom:10px;display:block;font-size:13px;background-image:url(showhide-arrow-right.png);background-repeat:no-repeat;background-position:left;padding-left:20px;}
.showhide:hover,.showhideopen:hover{color:#FFF;}
.showhideopen{background-image:url(showhide-arrow-down.png);}
.codeblock,.codeblock-noscroll{font-family:"Courier New",Courier,monospace;font-size:11px;padding:10px;color:#000;background:#eee;border:1px solid #CCC;line-height:1.5em;overflow:auto;}
.codeblock-noscroll{height:auto;}
.codeblock .comment,.codeblock-noscroll .comment{color:#777;}
#container{width:800px;margin-left:auto;margin-right:auto;/*background-color:#fff;*/
}
/* Feature section in ZoomEngine page */
.zoom-section{clear:both;margin-top:20px;}
* html .zoom-section{display:inline;clear:both;}
/* Feature descriptions in ZoomEngine page */
.zoom-desc{float:left;margin-left:10px;width:310px;margin-bottom:20px;}
.zoom-small-image{border:4px solid #CCC;float:left;margin-bottom:20px;}
.zoom-tiny-image{border:1px solid #CCC;margin:0px;}
.zoom-tiny-image:hover{border:1px solid #C00;}
#banner{background-repeat:no-repeat;height:105px;background:url(banner2.png);position:relative;z-index:10;}
#footer{position:relative;text-align:center;color:#333;font-size:10px;background:url(footer-bot.png);background-repeat:no-repeat;background-position:bottom;height:40px;/*padding:10px;*/
padding-top:2px;padding-bottom:10px;}
#footer-top{height:30px;display:block;background:url(footer-top.png);background-repeat:no-repeat;margin:0px;clear:both;}
#footer-validation{position:absolute;top:-3px;right:20px;width:75px;}
#footer-validation img{margin:0px;padding:0px;margin-bottom:-3px;}
#bannertext{display:none;font-size:14px;font-weight:bold;letter-spacing:1px;position:absolute;left:256px;top:60px;color:#f90;font-family:Tahoma,Geneva,sans-serif;}
#logo{position:absolute;display:inline-block;left:20px;top:0px;width:256px;height:56px;border:none;cursor:pointer;float:left;z-index:11;}
#logo span{display:none;}
#content-container{background-color:#fff;overflow:hidden;/* force div to expand vertically to accomodate content (not IE6) */
background-image:url(middle.png);}
/* force div to expand vertically to accomodate content (for IE6) */
* html #content-container{height:1%;}
#rightcontent{height:auto;float:left;width:168px;padding-left:10px;margin-top:30px;}
#maincontent{padding-left:20px;padding-right:10px;padding-bottom:10px;float:left;width:570px;}
#maincontent a{}
#maincontent a:hover{color:#C00;}
/*****************************************************/
/* General */
#cssdropdown{position:absolute;top:6px;left:330px;z-index:10000;background:none;font-family:Arial,Helvetica,sans-serif;font-weight:bold;letter-spacing:0px;font-size:12px;}
#cssdropdown,#cssdropdown ul{list-style:none;}
#cssdropdown,#cssdropdown *{padding:0;margin:0;}
/* Head links */
#cssdropdown li.headlink{float:left;width:auto;display:block;}
#cssdropdown li.headlink a{display:block;color:#444;padding:4px;padding-bottom:10px;text-decoration:none;padding-right:20px;}
#cssdropdown li.headlink a:hover{color:#fff;}
/* Child lists and links */
/* the abs position allows the drop down to have its own width without affecting the tab widths */
#cssdropdown li.headlink ul{display:none;text-align:left;position:absolute;width:174px;}
/* this is the image width */
#cssdropdown li.headlink:hover ul{display:block;}
/* Links within the menu */
#cssdropdown li.headlink ul li a{padding:5px 10px 3px 10px;margin:0px;color:#333;text-decoration:none;width:156px;/* this is the space available for text */
font-weight:normal;font-size:12px;font-weight:bold;text-transform:none;}
#cssdropdown li.headlink ul li a:hover{text-decoration:none;background-color:#cc6600;width:146px;}
/* Pretty styling */
/*#cssdropdown a{color:black;}
*/
#cssdropdown ul li a:hover{text-decoration:none;}
/* The drop down menu itself. */
#cssdropdown li.headlink ul{z-index:10000;background-image:url(dropmenu.png);background-position:bottom;padding-bottom:15px;background-repeat:no-repeat;}
/*****************************************************/
textarea,.codeinput{/*background:#000;color:#090;font-size:12px;font-weight:bold;font-family:"Courier New",Courier,monospace;clear:both;border:none;padding:10px;*/
}
/****************************/
#viewport{margin-left:auto;margin-right:auto;border:none;}
#planetLinks{margin:0px;padding:0px;height:64px;}
.tickul{list-style-type:none;padding:0px;margin:0px;margin-bottom:20px;}
.tickul li{margin-left:20px;margin-bottom:5px;padding-left:25px;background:no-repeat url(tick.gif);background-position:0px 3px;font-size:12px;}
#download_table{border-collapse:collapse;border:1px solid #cccccc;}
#download_table td{border-collapse:inherit;border:1px solid #cccccc;padding:5px;}
#download_table th{font-weight:bold;text-align:left;padding:5px;background-color:#eee;}
.carouselLeft{display:none;background:url(rotate-left.png);width:40px;height:40px;background-position:0px 0px;}
.carouselLeft:hover{width:40px;height:40px;background-position:0px 40px;cursor:auto;}
.carouselRight{display:none;background:url(rotate-right.png);width:40px;height:40px;background-position:0px 0px;}
.carouselRight:hover{width:40px;height:40px;background-position:0px 40px;}
/****************************************/
#da-vinci-title{display:none;color:#f90;font-family:Georgia,"Times New Roman",Times,serif;font-size:17px;font-weight:bold;margin:20px;text-transform:uppercase;letter-spacing:1px;margin-bottom:10px;width:80%;}
#da-vinci-alt{display:none;color:#ddd;margin:20px;margin-top:0px;font-size:14px;font-weight:bold;}
a,a:focus,a:active{outline:0 none;border:none;}
/*****************************************************/
form.cmxform fieldset{margin:0px;/*margin-bottom:10px;*/
border:1px solid #CCC;padding:0px;background:url(contact-bg.png);background-position:bottom;background-repeat:repeat-x;padding:20px;padding-top:0px;/* padding:20px;*/
}
form.cmxform legend{font-weight:bold;}
form.cmxform label{display:inline-block;line-height:1.8;vertical-align:top;text-align:right;}
form.cmxform fieldset ol{margin:0;padding:0;}
form.cmxform fieldset li{list-style:none;padding:5px;margin:0;margin-top:10px;border-bottom:1px solid #ccc;}
/*form.cmxform fieldset fieldset{border:1px solid;margin:3px 0 0;}
form.cmxform fieldset fieldset legend{padding:0 0 5px;font-weight:normal;}
form.cmxform fieldset fieldset label{display:block;width:auto;}
*/
form.cmxform em{font-weight:bold;font-style:normal;color:#f00;}
form.cmxform label{width:140px;/* Width of labels */
}
form.cmxform fieldset fieldset label{margin-left:140px;/* Width plus 3 (html space) */
text-align:left;}
form.cmxform textarea{width:256px;height:128px;}
form.cmxfrom button{}
form.cmxform .error,form.cmxform .ok{font-weight:bold;margin-left:150px;color:#e00;}
form.cmxform .ok{color:#333;}
/*****************************************************/
table{border-collapse:collapse;border:1px solid #CCC;margin-bottom:20px;}
td,th{padding:10px;vertical-align:top;border:1px dotted #CCC;}
th{background-color:#eee;}
td.noWrap{white-space:nowrap;}
/*****************************************************/
.addthis_toolbox{margin-bottom:20px;}
/*****************************************************/
#right-nav{list-style:none;margin:0px;padding:0px;}
#right-nav li a,#right-nav li a:hover,#right-nav li a:visited{padding:0px;border:4px solid #C60;padding:5px;display:block;margin-bottom:10px;text-decoration:none;color:#000;font-family:Arial,Helvetica,sans-serif;font-weight:bold;letter-spacing:0px;font-size:12px;background:#F90;color:#333;}
#right-nav li a:hover{color:#FFF;}
/*****************************************************/
/* Amazon ads */
.amz{font-size:10px;margin-bottom:20px;margin-left:30px;display:block;}
#amz-wrap{padding-bottom:10px;}
/******************************************************/
.inline-demo{font-weight:bold;font-size:15px;border:1px dotted #aaa;padding:20px;text-align:center;color:#444;background-color:#eee;}
分享到QQ
分享到微博
微信扫一扫
