私はいくつかの画像のために小さなビューアを書いています。問題が発生していて、原因がわからないのですが、CSSとjQueryが混在しているのではないかと思います。
問題は次のとおりです。
- 他の人がアニメートしているとき、画像は少しけいれんします。
- 初めてアニメーション化した後、画像は元の位置よりも低く移動します
フィドルを機能させるためにたくさんのことを変更しなければならなかったので、コードは少し厄介かもしれません。
私の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>すべてのものにsを追加したくありません。しかし、それが唯一の方法であるならば、私はそれを吸うと思います。