0

こんにちは、私は最初の 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)
   />

だから...アニメーションはしますが、オーバーフロープロパティは機能しません。そして、スクリプトを取り出すと、オーバーフロー プロパティは機能しますが、明らかにアニメーションは機能しません!

4

2 に答える 2

0 
overflow: hidden

親にも絶対的な位置がある場合にのみ機能します。@Sparky672 のコメントにも注目してください。画像は div 内にある必要があります。

私はあなたのためにデモをセットアップしました：

http://jsfiddle.net/Q4zXd/

于 2012-04-21T16:24:35.397 に答える
0

ホバー時に画像を移動し、CSS をクリーンアップするように jsfiddle を更新しました。http://jsfiddle.net/Q4zXd/3/

画像をコンテナよりも大きくしたい場合や、画像の一部を非表示にして領域にカーソルを合わせると表示されるようにする場合は、画像をコンテナに入れる必要があります。

コンテナを相対的に配置する必要がある理由は、配置された内部要素（img）を、ウィンドウではなく、それ自体を含む要素に対して絶対的な位置に配置するためです。デフォルトでは、絶対配置された要素はドキュメント フローから取り出され、包含要素が相対的に配置されない限り (絶対配置も機能しますが、その要素はドキュメント内に存在しなくなります)、包含要素ではなく、ウィンドウに対して相対的に配置されます。フロー。）

于 2012-04-21T23:43:17.053 に答える