3
我正在爲一些圖片寫一個小型瀏覽器。我遇到了麻煩，我不確定原因是什麼，但我的猜測是CSS和jQuery的混合。jQuery和CSS定位衝突
的問題是：
- 的圖像抽搐當別人都動畫一點。
- 後第一次動畫圖像移動比他們原來的位置
代碼較低，因爲我不得不改變了一堆東西拿到小提琴工作可能有點凌亂。
我的HTML標記：
<html>
<body>
<div id="photos">
<figure class="photo">
<img class="photo-image" src="http://bite-dose.com/wp-content/uploads/2011/03/cute-baby-animals.jpg"/>
</figure>
<figure class="photo">
<img class="photo-image" src="http://cdn.arkarthick.com/wp-content/uploads/2010/04/blissfully-cute-baby-animals-baby-squirrel-6.jpg"/>
</figure>
<figure class="photo">
<img class="photo-image" src="http://1.bp.blogspot.com/_4CngMC7D0HE/TDDHJ73_qJI/AAAAAAAAALY/-8Rvz41kRnc/s1600/baby_monkey_blanket.jpg"/>
</figure>
<figure class="photo">
<img class="photo-image" src="http://2.bp.blogspot.com/_sIsR_xZ02MY/S_es3PlQIrI/AAAAAAAABGQ/ud3iEaMiu4w/s1600/cute_baby_animals_T3509_seal.jpg"/>
</figure>
<figure class="photo">
<img class="photo-image" src="http://xaxor.com/images/baby-animals-part3-/baby-animals-part3-12.jpg"/>
</figure>
<figure class="photo">
<img class="photo-image" src="http://nrbrose.edublogs.org/files/2011/05/blissfully-cute-baby-animals-baby-elephant-11-178o61g.jpg"/>
</figure>
</div>
<hr/><br/><br/>
</body>
</html>
我的CSS：
#photos {
display : block;
position: relative;
}
.photo {
border : 1px solid #808080;
box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.5);
position : absolute;
max-height: 250px;
max-width : 250px;
}
.photo {
display: block;
}
.photo:hover {
transform: rotate(0deg) !important;
-webkit-transform: rotate(0deg) !important;
-moz-transform: rotate(0deg) !important;
-ms-transform: rotate(0deg) !important;
-o-transform: rotate(0deg) !important;
z-index: 1;
}
.photo-image {
display : block;
max-height: 100%;
max-width : 100%;
}
hr {
border: 0;
border-top: 1px dashed red;
}
我的javascript：
SemiEllipse = function (a, b, cx, cy) {
this.radiusA = a;
this.radiusB = b;
this.radiusASquared = a * a;
this.radiusBSquared = b * b;
this.centerX = cx || 0;
this.centerY = cy || 0;
}
SemiEllipse.prototype = {
getPoint: function (x) {
x -= this.radiusA;
var y = this.radiusB * Math.sqrt(1 - ((x * x)/this.radiusASquared));
return { x: x + this.centerX, y: y + this.centerY };
},
getAngle: function (x) {
var angle = Math.PI/2 - Math.atan2(this.radiusB, x);
return angle;
}
}
$('#photos').each(function() {
var $photogroup = $(this);
var $photos = $photogroup.find('.photo');
var count = $photos.length;
var limitHeight = $photos.css('max-height');
var maxHeight = 0;
for (var i = 0; i < count; ++i) {
var $photo = $photos.eq(i);
var h = $photo.height();
if (h > maxHeight) {
maxHeight = h;
}
if (maxHeight > limitHeight) {
maxHeight = limitHeight;
break;
}
}
$photogroup.height(400);
var bounds = {
w : $photogroup.width(),
h : $photogroup.height(),
padW: $photogroup.innerWidth() - $photogroup.width(),
padH: $photogroup.innerHeight() - $photogroup.height(),
}
var halfW = bounds.w/2;
var scale = halfW/(count - 1);
var sc = new SemiEllipse(halfW/2, 100);
// PHOTO POSITIONING
for (var i = 0; i < count; ++i) {
var $photo = $photos.eq(i);
var p = sc.getPoint(i * scale);
var theta = sc.getAngle(p.x)/10;
$photo.css({
'left' : p.x + sc.radiusA,
'bottom': p.y,
'transform': 'rotate(' + theta + 'rad)',
'-webkit-transform': 'rotate(' + theta + 'rad)',
'-mox-transform': 'rotate(' + theta + 'rad)',
'-ms-transform': 'rotate(' + theta + 'rad)',
'-o-transform': 'rotate(' + theta + 'rad)',
});
}
// HOVER FUNCTIONS
$photos.each(function() {
$this = $(this);
var y = parseFloat($this.css('bottom'));
$this.data('mouseOverBottom', y + 10)
.data('mouseOutBottom', y - 10)
.css({
'transition': 'all .25s ease-in-out',
'-webkit-transition': 'all .25s ease-in-out',
'-moz-transition': 'all .25s ease-in-out',
'-o-transition': 'all .25s ease-in-out'
});
}).hover(function() {
$this = $(this);
$this.css('bottom', $this.data('mouseOverBottom'));
}, function() {
$this = $(this);
$this.css('bottom', $this.data('mouseOutBottom'));
});
});
我不知道阿布圖像移動得更低，但我已經處理過抽搐。我已經知道transform: translateZ(0)會做到這一點，但這似乎會殺死我的旋轉。我能想到讓它工作的唯一方法是在每個圖像周圍添加一個<div>，但是我很固執，不想將<div>添加到我的所有內容中。但我想如果這是唯一的方法，我會把它吸引過來。
請不要張貼小提琴的問題。你的問題必須包含提供答案所需的所有代碼，而不需要任何人訪問小提琴。在您發佈問題之前，您應該將您的代碼縮小到仍能再現問題的最小尺寸。在這個過程中，你可能會弄清楚問題所在。 – meagar
選中此項：http://jsfiddle.net/rNnx4/17/ Aparently在您的原始文件中，將旋轉動畫給所有**的圖像添加到**源代碼中的旋轉後的圖像之後（例如嘗試使用猴子，閃爍）。如果每個圖像都沒有空間，如果調整窗口大小，最後一個圖像會顯着（它會縮小直到消失，然後出現一個小錯誤），這也是一個問題。此外，如果您對此效果感到滿意，則需要對角碼進行清理。 – Niloct