-1

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

我设法在 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/

请帮我。

4

2 回答 2

1

CSS3 转换在 IE9 及更低版本中不起作用，因为它们根本不支持它。如果您需要进行转换等，那么可用的众多选项之一是jQuery。

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

对于你所追求的（无论如何我假设你在追求的）你可能想看看他们的事件教程（将点击处理程序附加到元素等），css样式教程（CSS'获取，设置和操作'）和效果教程（将效果附加到元素）。

我希望这可以帮助您开始使用 JavaScript 和 jQuery。请注意，还存在许多其他库，但这个库是您在任何地方都能看到的最多的库。

于 2013-06-28T08:00:16.857 回答
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 回答