1

画像をクリックして非表示にし、右の別の場所に移動したいと思います。現在、私の画像は画面の右側にはみ出しています。timeout()を使用して、画像の非表示と表示を可能にするコードを作成するのを手伝ってください。

php code
<div id= "ben" style= "position: relative; visibility: visible;" onclick="moveRight()" >
<img src = "images/ben.JPG" height = "250" width = "200" alt= "Picture of Peek-a-boo Ben"/>


//JavaScript for a hide/show image in different location
var ben = null;
var animate ;
function init(){
   ben = document.getElementById('ben');
   ben.style.position= 'relative'; 
   ben.style.left = '0px'; 
}
function moveRight(){
   ben.style.left = parseInt(ben.style.left) + 10 + 'px';
   animate = setTimeout(moveRight,20); // call moveRight in 20msec
}
function stop(){
   clearTimeout(animate);
   ben.style.left = '0px'; 
}
window.onload =init;
4

1 に答える 1

1

私は間違いなく個人的にこれにjqueryを使用します....

しかし、純粋な javascript でそれが必要な場合は、ここにあります....アニメーションは CSS を使用して行われますが。

//JavaScript for a hide/show image in different location
var ben = null;
var animate=0 ;
function init(){
  ben = document.getElementById('ben');
 }

 function toggled(){

  var image = document.getElementById('image2');
  if( animate==0){
   animate = 1;
  image.className= "right";} 
  else if(animate==1){
   animate=0;
  image.className= "left";}
 }

 window.onload =init;

デモはこちら....CSS の From と To を調整して、さらにまたは近くに移動します

そして、関連するCSS...

.right {
-webkit-transform: translateX(150px);
-webkit-animation-name: right;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: 1;
}

.left {
 -webkit-transform: translateX(0px);
-webkit-animation-name: left;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: 1;
}
 @-webkit-keyframes right { from { -webkit-transform: translateX(0px); }
 to {  -webkit-transform: translateX(150px);  }}

 @-webkit-keyframes left { from { -webkit-transform: translateX(150px); }
 to {  -webkit-transform: translateX(0px);  }}

編集

これは JQuery を使用したものです...CSS は必要ありません.....上記のコード行はすべて ^^ 2 つに削減されました.....Jquery が大好きです :) 実際には、組み込みの toggle( ) 関数へ.......

var tog=0;
$('#ben').click(function(){
if(tog==0){$('#image2').animate({marginLeft: "250"}, 1500);tog=1; return false;}
else if(tog==1){$('#image2').animate({marginLeft: "0"}, 1500);tog=0; return false;
} });

デモはこちら

(注... Jquery ライブラリを含め、このコードを使用する予定がある場合は $(document).ready(function(){ を呼び出す必要があります...

また、HTML で onclick を実行する必要はもうありません...

ie... <div onclick="moveRight()">

Jquery が処理するので、click() を使用します。

于 2013-06-26T04:55:00.967 に答える