-1

私の問題は、先日簡単なウェブサイトを作成していて、ボタンを押すとコンテンツが移動する必要があったことです。

私は CSS3 でそれを行うことができましたが、解決策は IE ではまったく機能しませんでした。したがって、jsで簡単な解決策があるかどうかお尋ねしたいと思いますか? 私は js をまったく知りませんが、必要なものは css よりも js の方がはるかに簡単だと聞きました。

詳細：

http://i42.tinypic.com/6yl4ia.png

ボタン（正確にはラベル）に従って移動するには、写真のテーブルが必要です。

可視領域は div です。

関連するコードは次のとおりです（満足できなかったのでアニメーションなし）：

body {
background-color: #fff;
color: #fff;
padding:0px;
}


#bodywrapperfixed {
width: 1248px;
margin: 0px auto;
position: relative;
overflow: hidden;
height: 730px;
}


#bodywrapper {
display:block;
background-color: #fff;
width: 1248px;
color: #59595B;
padding-top:50px;
font-family: 'Roboto', sans-serif;
position: absolute;
top:0px;
left:0px;
z-index:1;
font-size: 60px;
height:730px;
}

#bodywrapper img {
width:400px;
padding:15px 0px 20px 0px;
}

#texten {
font-family: 'Roboto', sans-serif;
font-size: 35px;
padding:5px;
}

#textpl {
font-family: 'Roboto', sans-serif;
font-size: 25px;
padding:5px;
}



table#linki {
width: 110px;
border: none;
margin-top:15px;
}





label {
  display: block;
  height: 54px;
  width: 54px;
  color:#fff;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size: 35px;
  background-color: #117D10;
  text-align: center;
  padding:23px;

}

label:hover {
  background-color: #004F00;
  cursor: pointer;
}

input#pl {
   position: absolute;
   top: -9999px;
   left: -9999px;
}

input#en {
   position: absolute;
   top: -9999px;
   left: -9999px;
}

および関連する HTML:

<div id="bodywrapperfixed">
<div id="bodywrapperfloat">
<table id="ramka">
     <tr>
          <td>random text</td>
          <td><div id="bodywrapper">
<center>
<div id="texten"><div style="font-weight:300; display:inline-block;">Introducing the all-in-one entertainment system.</div><div style="font-weight:500; display:inline-block;">&nbsp;For everyone.</div></div>


<div id="textpl"><div style="font-weight:300; display:inline-block;">Przedstawiamy zintegrowany system rozrywki.</div><div style="font-weight:500; display:inline-block;">&nbsp;&nbsp;Dla wszystkich.</div></div>


<img src="imgs/xboxone.png">


<div id="texten"><div style="font-weight:300; display:inline-block;">Choose your version of the story:</div></div>


<div id="textpl"><div style="font-weight:300; display:inline-block;">Wybierz swoją wersją opowieści:</div></div>




<table id="linki">
<tr>
<td><label for="en">en</label><input id="en" type="checkbox"></td>
<td><label for="pl">pl</label><input id="pl" type="checkbox"></td>
</tr></table>
</center>
</div></td>
          <td>random text</td>
     </tr>
</table>
</div>
</div>

外観は次のとおりです。

http://ingame.lh.pl/thinkone/

私を助けてください。

4

2 に答える 2

0

これが役立つことを願っています..コードには、写真に示されているようにテーブルとボタンが含まれています http://jsfiddle.net/ramanbedi/vDdJL/ ここにjsコードがあります:

$(function(){
    $(".left-button").on('click',function(e){
        e.preventDefault();
        $(".table").animate({left:'-=10'},500);
    })
    $(".right-button").on('click',function(e){
        e.preventDefault();
        $(".table").animate({left:'+=10'},500);
    })
})

私は jQuery ライブラリを使用しましたが、その理由はコメントに記載されています。

于 2013-06-28T08:28:21.650 に答える