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