Question

我的问题是我前几天创建了一个简单的网站，我需要根据按下的按钮移动内容。

我设法在CSS3中这样做，但解决方案不适用于IE。因此，我想问一下js中是否有一个简单的解决方案？我根本不认识js，但我听说我需要的东西在js比在css中容易得多。

详细说明：

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/

请帮帮我。

Answer 1

CSS3转换在IE9及以下版本中不起作用，因为它们只是don't support it。如果您需要进行转换等，那么可用的众多选项之一是jQuery。

jQuery是一个JavaScript库，它简化了JavaScript的使用，使DOM操作（如转换和动画）更简单。他们的网站上有许多精彩的演示，可以帮助您入门。我建议你看看他们自己的JavaScript 101，它将帮助你开始学习JavaScript本身的基础知识（没有jQuery），然后引导你用jQuery让你的生活更轻松。

具体到你所追求的是什么（我认为你无论如何）你可能想看看他们的events tutorial（将点击汉字附加到元素等），css styling tutorial（CSS'获取，设置和操作'）和effects tutorial（将效果附加到元素）。

我希望这有助于您开始使用JavaScript和jQuery。请注意，存在许多其他库，但是这个库是您将在任何地方最常见的库。

Answer 2

希望这会有所帮助..代码中包含一张表格和按钮，如图所示 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库，并在评论中提到了原因。

如何在JavaScript中移动表格？

2 个答案: