在此URL上的代码中:
http://jsfiddle.net/y5nqyucs/8/
我有几个盒子,里面有一张图片,它们位于两个灰色盒子之间,一个在顶部,另一个在底部。
当我悬停在图像框上时,它会稍微变大,悬停离开后它会恢复到原始大小。一旦我点击下面的灰色框(作为滚动条查看视口下面的更多框),然后再次悬停在任何图像框上;它会"动画"成一个更大的框。如果我继续悬停在翻转卡片元素上,它会动画地向右下方移动。这是发生的两个不良效应。
我希望它(翻转卡片)不要"动画"成一个更大的框和更小的框,我只想让CSS更改使其立即变大并返回到原始大小,并回到其各自父级(carouselunit)中的位置,就像我在点击底部灰色框之前所做的那样。
div#column {
top:0px;
bottom: 0px;
position: fixed;
border: 1px solid greenyellow;
display: block;
overflow: hidden;
width: 296px;
box-shadow: 0px 0px 3px 4px black;
}
div.background {
background: black;
opacity: .75;
position: absolute;
top: 0px;
bottom: 0px;
left:0px;
right: 0px;
z-index: -1;
}
#carousel {
border: 1px solid cyan;
margin: 35px auto 0px;
position: relative;
top: 0px;
padding:0px;
background: #000;
}
#carousel .carouselunit {
display: block;
border: 1px solid burlywood;
position: relative;
height: 200px;
width: auto;
}
#carousel .carouselunit .flipcard {
border: 1px dashed pink;
transform-style: preserve-3d;
}
#carousel .carouselunit .flipcard img {
top: 0px;
left: 0px;
border: 1px solid yellow;
transform: translateZ(1px);
}
#carousel .carouselunit .flipcard .backpane {
display: inline;
border: 2px solid gray;
height: 200px;
position: absolute;
transform: translateZ(0px) rotateY(180deg);
color: #fff;
background: rgb(0,0,0); /* Old browsers */
background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(53,57,58,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,1)), color-stop(100%,rgba(53,57,58,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(53,57,58,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(53,57,58,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(53,57,58,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(53,57,58,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#35393a',GradientType=0 ); /* IE6-9 */
top: 0px;
left: 0px;
}
.backpane p,
.backpane a {
margin: 1em;
}
div.up {
position: absolute;
width: 100%;
top: 0px;
height: 35px;
z-index: 2;
background: #484848;
text-align: center;
}
div.up:hover {
background-color: #aaa;
}
div.down {
position: absolute;
width: 100%;
bottom: 0px;
height: 35px;
z-index: 2;
background: #484848;
text-align: center;
}
div.down:hover {
background-color: #aaa;
}
<body>
<div id="column">
<div class="up">
<img src="./resources/images/up.png" alt="up arrow"/>
</div>
<div id="carousel">
<div class="carouselunit">
<div class="flipcard">
<img src="./resources/images/one.png" height="200"/>
<div class="backpane">
<p> Some example text, some example text, some example text... </p>
<a href="#" class="done">Done...</a>
<a href="#" class="done">Link</a>
</div>
</div>
</div>
<div class="carouselunit">
<div class="flipcard">
<img src="./resources/images/two.png" height="200"/>
<div class="backpane">
<p> Some example text, some example text, some example text... </p>
<a href="#" class="done">Done...</a>
</div>
</div>
</div>
<div class="carouselunit">
<div class="flipcard">
<img src="./resources/images/three.png" height="200"/>
<div class="backpane">
<p> Some example text, some example text, some example text... </p>
<a href="#" class="done">Done...</a>
</div>
</div>
</div>
<div class="carouselunit">
<div class="flipcard">
<img src="./resources/images/four.png" height="200"/>
<div class="backpane">
<p> Some example text, some example text, some example text... </p>
<a href="#" class="done">Done...</a>
</div>
</div>
</div>
<div class="carouselunit">
<div class="flipcard">
<img src="./resources/images/five.png" height="200"/>
<div class="backpane">
<p> Some example text, some example text, some example text... </p>
<a href="#" class="done">Done...</a>
</div>
</div>
</div>
</div>
<div class="down">
<img src="./resources/images/down.png" alt="down arrow"/>
</div>
<div class="background"></div>
</div>
<!-- End Carousel -->
</body>
$(document).ready(function(){
var right = $(window).width()/2+629/2;
$("#column").css({
right: right
});
var scrollDifference;
var justScrolled = false;
$(".up").click(function(){
scrollDifference = $("#carousel").height() - $("#column").height();
if((scrollDifference > 0) && ($("#carousel").position().top < 0)){
$(".flipcard").css({
position: "static",
transform: "rotateY(0deg)",
transitionDuration: "1s",
height: "200px",
zIndex: "1"
});
$(".flipcard > img").css({
height: "200px",
width: "295px"
});
$("#carousel").animate({
top: "+=200"
}, 150, function(){
});
}
$("div").removeClass(".hoverNowFixed");
justScrolled = true;
});
$(".down").click(function(){
scrollDifference = $("#carousel").height() - $("#column").height();
if((scrollDifference > 0) && ($("#carousel").position().top === -scrollDifference) || ($("#carousel").position().top > -scrollDifference)){
$(".flipcard").css({
position: "static",
transform: "rotateY(0deg)",
transitionDuration: "1s",
height: "200px",
zIndex: "1"
});
$(".flipcard > img").css({
height: "200px",
width: "295px"
});
$("#carousel").animate({
top: "-=200"
}, 150, function(){
$("#carousel").stop();
});
$("div").removeClass(".hoverNowFixed");
justScrolled = true;
}
});
$("#carousel .carouselunit .flipcard").hover(
function(){
if($(this).hasClass(".selected")){
}
if(!$(this).hasClass(".selected")) {
var verticalPosition = $(this).offset().top - 25;
var horizontalPosition = $(this).offset().left - 25;
if(justScrolled){
console.log('up/down button was hit and now flipcard is hovered on');
$(this).addClass("hoverNowFixed");
$(this).css({
position: "fixed",
zIndex: "2",
top: verticalPosition,
left: horizontalPosition,
height: "230px",
width: "340px"
});
$(this).children("img", ".backpane").css({
top: verticalPosition,
left: horizontalPosition,
height: "230px",
width: "340px"
});
console.log(verticalPosition);
console.log(horizontalPosition);
}
if(!justScrolled) {
console.log('flipcard is hovered on');
$(this).addClass("hoverNowFixed");
$(this).css({
position: "fixed",
zIndex: "2",
top: verticalPosition,
left: horizontalPosition,
height: "230px",
width: "340px"
});
$(this).children("img", ".backpane").css({
top: verticalPosition,
left: horizontalPosition,
height: "230px",
width: "340px"
});
console.log(verticalPosition);
console.log(horizontalPosition);
}
}
},
function(){
if($(this).hasClass(".selected")) {
}
if(!$(this).hasClass(".selected") && $(this).css("position") === "fixed") {
var verticalPosition = $(this).offset().top + 25;
var horizontalPosition = $(this).offset().left + 25;
console.log(verticalPosition);
console.log(horizontalPosition);
$(this).css({
position: "fixed",
zIndex: "1",
top: verticalPosition,
left: horizontalPosition,
height: "200",
width: "295"
});
$(this).children("img", ".backpane").css({
top: verticalPosition,
left: horizontalPosition,
height: "200",
width: "295"
});
$(this).children(".backpane").css({
position: "absolute"
});
}
if(!$(this).hasClass(".selected") && $(this).css("position") === "static") {
var verticalPosition = $(this).offset().top + 25;
var horizontalPosition = $(this).offset().left + 25;
console.log(verticalPosition);
console.log(horizontalPosition);
$(this).css({
position: "fixed",
zIndex: "1",
top: verticalPosition,
left: horizontalPosition,
height: "200",
width: "295"
});
$(this).children("img", ".backpane").css({
top: verticalPosition,
left: horizontalPosition,
height: "200",
width: "295"
});
$(this).children(".backpane").css({
position: "absolute"
});
}
});
$("#carousel .carouselunit .flipcard").click(function(){
if($(".selected").length === 0){
$(this).addClass("selected");
$(this).animate({
top: "250px",
left: "700px"
}, 110, function(){
$(this).animate({
width: "700px",
height: "450px"
}, 250);
$(this).css({
position: "fixed",
transform: "rotateY(180deg)",
transitionDuration: "250"
});
});
$(this).children(".backpane").animate({
width: "700px",
height: "450px"
});
}
else {
$(".flipcard.selected").css({
position: "absolute",
top: "0px",
left: "0px"
});
$(".flipcard.selected img", ".flipcard.selected .backpane").css({
width: "295px",
height: "200px"
});
$(".selected").removeClass("selected");
$(this).css({
position: "fixed"
});
$(this).animate({
top: "250px",
left: "700px"
},250);
$(this).css({
transform: "rotateY(180deg)",
transitionDuration: "1s"
});
setTimeout(function(){$(this).addClass("selected");},100);
}
});
});
我有几个盒子,里面有一张图片,它们位于两个灰色盒子之间,一个在顶部,另一个在底部。
当我悬停在图像框上时,它会稍微变大,悬停离开后它会恢复到原始大小。一旦我点击下面的灰色框(作为滚动条查看视口下面的更多框),然后再次悬停在任何图像框上;它会"动画"成一个更大的框。如果我继续悬停在翻转卡片元素上,它会动画地向右下方移动。这是发生的两个不良效应。
我希望它(翻转卡片)不要"动画"成一个更大的框和更小的框,我只想让CSS更改使其立即变大并返回到原始大小,并回到其各自父级(carouselunit)中的位置,就像我在点击底部灰色框之前所做的那样。