http://keith-wood.name/imageCube.htmlで jquery プラグインを使用しています。
それはそのように動作しますが...
私のページがリストの最初の画像(AT_logo.png)をロードすると、正しい位置に表示されますが、.imagecubeが開始すると移動します。それが入れるcssに気づきました。絶対に配置されていますが、私の画像は私のクラスの左に浮かんでいます。
また、追加される「imagecubeshading」クラスは、画像の間ではなく最後にあるため、画像であるかのようにスクロールします。
私のコードは一番下にあります。さらに情報が必要な場合は、お尋ねください。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="Scripts/imagecube.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#logocube').imagecube();});
</script>
<div class="title_container">
<div class="title_content1">
<div class="title">title</div>
<div class="sub_text">
<a href="">Linked in</a>
<b>Email</b>infp@email.com
</div>
</div>
<div class="logo" id="logocube">
<img src="images/AT_logo.png" title="logo"/>
<img src="images/AT_logo_bl_gr.png" title="logo"/>
<img src="images/AT_logo_bl_wh.png" title="logo"/>
<img src="images/AT_logo_gr_wh.png" title="logo"/>
<img src="images/AT_logo_wh_bl.png" title="logo"/>
<img src="images/AT_logo_wh_gr.png" title="logo"/>
</div>
<div class="title_content2">
<div class="title" style="float:right;;">title</div>
<div class="sub_text" style="float:right;">sub text</div>
</div>
</div>
そしてCSS
.title_container
{
width:1265px;
height:380px;
margin-left:auto;
margin-right:auto;
position:relative;
background-color:transparent;
}
.title_content1
{
width: 505px;
height: 330px;
float: left;
background-image: url(/images/title_content_left.png);
background-repeat: no-repeat;
margin: 10px;
margin-top: 20px;
z-index:1;
}
.logo
{
width: 214px;
height: 198px;
float: left;
margin-top: 40px;
margin-left: 162px;
margin-bottom: 72px;
z-index: 2;
position: absolute;
}
#logocube
{
width:214px;
height:198px;
}
.title_content2
{
width: 505px;
height: 330px;
float: right;
background-image: url(/images/title_content_right.png);
background-repeat: no-repeat;
margin: 10px;
margin-top: 20px;
z-index:1;
}