0

背後の背景画像を表示できるように、divを含むテキストの表示と非表示に取り組んでいます。私は自分のdivを少し動かして、自分のdivが横に見えるようにするのに非常に役立ちました

$("#welcome").toggle(
   function() {
    var left = $(this).outerWidth() - 10 + "px";

    $(this).animate({ "margin-left": "+=" + left }, 500);
  $(this).onClick() },
   function() {
    var left = $(this).outerWidth() - 10 + "px";

    $(this).animate({ "margin-left": "-=" + left }, 500);
   }
 );

今、私はhtmlの私の画像をHIDEから表示するように変更したいです...

<div id="welcomepicture"> 
<div id="welcome">
 Welcome  some really meaningful text here!

  <p class="arrowfull"><a href="#"> <img class="img-swap"  src="http://housing.ucsc.edu/guide/css/images/hide_off.png" alt="Click to view full image" title="Click to view full image" height="42" width="17"> </a></p>

.onClick image swapを入れた場合、JavaScriptにあるかどうかわかりませんか？または、新しい変数を作成しますか？jqueryとjavascriptは初めてです、あなたの助けに感謝します

http://jsfiddle.net/BeccaAlley/UfsS8/4/

4

2 に答える 2

0

[クリックして画像全体を表示]をクリックしたときに画像を表示したい場合は、jsファイルの下部に次のコードを追加できます。

$('.img-swap').click(function(){
    $('#imageID').show();
});

このコードでは、＃imageIDを表示する画像のIDのIDに変更できます。IDの代わりにクラスを使用して画像を参照している場合は、もちろん「。」を使用します。'＃'の代わりに。それが役立つかどうか、または少し違うものを探しているかどうかを教えてください。

于 2012-12-10T19:29:31.110 に答える
0

トグル機能で画像のソースを変更できます。最良の方法は、ショーと非表示を1つの画像に配置し、background-positionを使用してそれらの間を移動することです。そうすれば、2つではなく1つの画像のみをロードできます。

$("#welcome").toggle(
    function() {
        var left = $(this).outerWidth() - 10 + "px";

        $(this).animate({ "margin-left": "+=" + left }, 500);
        $('.img-swap').attr('src','show.jpg');
    },
    function() {
        var left = $(this).outerWidth() - 10 + "px";

        $(this).animate({ "margin-left": "-=" + left }, 500);
        $('.img-swap').attr('src','hide.jpg');
    }
);
于 2012-12-10T19:46:39.367 に答える