こんにちは、私は最初の xhtml/css の本を読み終えたばかりで、今は javascript/html の本を読んでいます。私は非常に単純な効果を作りたいのですが、jquery (およびそのことについては JavaScript) に慣れていないため、それを理解できません。
だから私はちょうどこのような効果が欲しい: kk.pcriot.com/websites.html
画像が動き回るが、その境界の周りに一種の「マスク」があるため、そのホルダーは所定の位置に固定されていますが、画像は移動します(マウスオーバーで)。マウス カーソルがその上に置かれなくなると、画像は元の場所に戻りますが、それは簡単なことのように思えます。今、私はそのマスクを作成する方法を理解しようとしています....静的な画像とプロパティで十分に単純ですが、オーバーフローを機能させることができないため、要素をフローまたは何かから取り出すoverflow:hidden
と思いますanimate()
. たぶん、位置プロパティにも関係があります。
これが私のコードです:
CSS:
div { width : 100px; height: 100px;
border: thin solid red;
overflow:hidden;
}
img { position:absolute;
height: 200px;
width: 300px;
;}
脚本:
<script src="jquery-1.7.2.js"></script>
<script>
$(document).ready(function(){
$("#clickme").click(function() {
$("#book").animate({
left: '+=150',
}
});
体:
<div id="clickme">
Click here
</div>
<image id="book" src="../Images/test.jpg" (Newbs cant post images so I didnt use IMG)
/>
だから...アニメーションはしますが、オーバーフロープロパティは機能しません。そして、スクリプトを取り出すと、オーバーフロー プロパティは機能しますが、明らかにアニメーションは機能しません!