尝试在翻转时更改框的背景颜色（向您展示我的意思会更容易：（http://iam.colum.edu/students/jordan.max/demo/demo.php）。我是jQuery的新手，并且上过教程，很容易就能进行反工程代码并弄清楚该怎么做才能使其达到我想要的效果。我做了相对轻松的操作，直到尝试翻转元素时更改背景的颜色。这很奇怪，因为当我使用'inspect element '，然后在该对象上单击鼠标，它说我将背景设置为“ element”，但CSS中不存在该背景。不试图造成混淆（这听起来确实令人困惑，这就是为什么我给出了链接），希望有人知道我的问题是什么。
demo.php
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sponsor Flip Wall With jQuery & CSS | Tutorialzine demo</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<link href='http://fonts.googleapis.com/css?family=Oregano' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.flip.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<h1>Sponsor Flip Wall With jQuery & CSS</h1>
<h2><a href="http://tutorialzine.com/2010/03/sponsor-wall-flip-jquery-css/">Go Back to Portfolio »</a></h2>
<?php
// Each sponsor is an element of the $sponsors array:
$sponsors = array(
array('github','The biggest social network in the world.','http://www.facebook.com/'),
array('twitter','The leading software developer targeted at web designers and developers.','http://www.adobe.com/')
);
// Randomizing the order of sponsors:
shuffle($sponsors);
?>
<nav id="main">
<figure class="sponsorListHolder">
<?php
// Looping through the array:
foreach($sponsors as $company)
{
echo'
<div class="sponsor" title="Click to flip">
<div class="sponsorFlip" >
<p>'.$company[0].'</p>
</div>
<div class="sponsorData">
<div class="sponsorDescription">
'.$company[1].'
</div>
<div class="sponsorURL">
<a href="'.$company[2].'">'.$company[2].'</a>
</div>
</div>
</div>
';
}
?>
<aside class="clear"></aside>
</figure>
</nav>
<footer>
<p class="note">None of these companies are actually sponsors of Tutorialzine.</p>
</footer>
</body>
</html>
script.js
$(document).ready(function(){
/* The following code is executed once the DOM is loaded */
$('.sponsorFlip').bind("click",function(){
// $(this) point to the clicked .sponsorFlip element (caching it in elem for speed):
var elem = $(this);
// data('flipped') is a flag we set when we flip the element:
if(elem.data('flipped'))
{
// If the element has already been flipped, use the revertFlip method
// defined by the plug-in to revert to the default state automatically:
elem.revertFlip();
// Unsetting the flag:
elem.data('flipped',false)
}
else
{
// Using the flip method defined by the plugin:
elem.flip({
direction:'lr',
speed: 350,
onBefore: function(){
// Insert the contents of the .sponsorData div (hidden from view with display:none)
// into the clicked .sponsorFlip div before the flipping animation starts:
elem.html(elem.siblings('.sponsorData').html());
}
});
// Setting the flag:
elem.data('flipped',true);
}
});
});
styles.css
*{
/* Resetting the default styles of the page */
margin:0;
padding:0;
}
body{
/* Setting default text color, background and a font stack */
font-size:0.825em;
color:#666;
background-color:lightgreen;
font-family:Arial, Helvetica, sans-serif;
}
.sponsorListHolder{
margin-bottom:30px;
}
.sponsor{
width:400px;
height:400px;
float:left;
margin:4px;
padding: 30px;
background: #F66F89;
/* Giving the sponsor div a relative positioning: */
position:relative;
cursor:pointer;
}
.sponsor:active{
background: #F66F89;
}
.sponsorFlip{
/* The sponsor div will be positioned absolutely with respect
to its parent .sponsor div and fill it in entirely */
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
border:1px solid #ddd;
background: #61D89F;
color:#0196e3;
font-family: 'Oregano', cursive;
font-size: 2em;
}
.sponsorFlip:hover{
border:1px solid #999;
/* CSS3 inset shadow: */
-moz-box-shadow:0 0 30px #999 inset;
-webkit-box-shadow:0 0 30px #999 inset;
box-shadow:0 0 30px #999 inset;
}
.sponsorFlip img{
/* Centering the logo image in the middle of the sponsorFlip div */
/* Not being used right now
position:absolute;
top:50%;
left:50%;
margin:-70px 0 0 -70px;
*/
}
.sponsorData{
/* Hiding the .sponsorData div */
display:none;
}
.sponsorDescription{
font-size:11px;
padding:50px 10px 20px 20px;
font-style:italic;
}
.sponsorURL{
font-size:10px;
font-weight:bold;
padding-left:20px;
}
.clear{
/* This class clears the floats */
clear:both;
}
/* The styles below are only necessary for the styling of the demo page: */
#main{
position:relative;
margin:0 auto;
width:960px;
}
h1{
padding:30px 0;
text-align:center;
text-shadow:0 1px 1px white;
margin-bottom:30px;
background-color: #F66F89;
}
h1,h2{
font-family:"Myriad Pro",Arial,Helvetica,sans-serif;
}
h2{
font-size:14px;
font-weight:normal;
text-align:center;
position:absolute;
right:40px;
top:40px;
}
.note{
font-size:12px;
font-style:italic;
padding-bottom:20px;
text-align:center;
}
a, a:visited {
color:#0196e3;
text-decoration:none;
outline:none;
color: lightgreen;
}
a img{
border:none;
}
最佳答案
如果我没记错的话，您可以使用“颜色”作为参数
elem.flip({
direction:'lr',
speed: 350,
color: 'blue', //color
onBefore: function(){}
})
关于javascript - 受javascript影响时如何影响元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/22162335/