将元素翻译为页面顶部

时间:2015-08-25 21:41:53

标签: html css translate-animation keyframe

我试图将网页上的元素翻译到页面顶部。我可以让它向上移动x个像素,但是屏幕尺寸不同,不能正确缩放,因此,我正在寻找更相对的解决方案。

到目前为止我所拥有的是:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div>
	<label><input type="checkbox" id="checkdiv1" checked> Division 1</label>
<label><input type="checkbox" class="div1 show" value="d1" checked> Team 1</label>
<label><input type="checkbox" class="div1 show" value="d2" checked > Team 2</label>
<label><input type="checkbox" class="div1 show" value="d3" checked> Team 3</label></div>
<div>
<label><input type="checkbox" id="checkdiv2" checked> Division 2</label>
<label><input type="checkbox" class="div2 show" value="r1" checked> Team 1</label>
<label><input type="checkbox" class="div2 show" value="r2" checked > Team 2</label>
<label><input type="checkbox" class="div2 show" value="r3" checked> Team 3</label></div>
<br>
<hr>
    
<br>
<table border="1">
    <tbody>
    	<tr>            
            <td></td>
            <td >Teams</td>
            <td>Points For</td>
            <td>Points Against</td>
        </tr>
        <tr class="d1">
            <td><button class="hideRow" checkBoxValue="d1">Hide</button></td>
            <td>Division 1 Team 1</td>
            <td>280</td>
            <td>100</td>
        </tr>
        <tr class="d2">
            <td><button class="hideRow" checkBoxValue="d2">Hide</button></td>
            <td>Division 1 Team 2</td>
            <td>225</td>
            <td>150</td>
        </tr>
        <tr class="d3">
            <td><button class="hideRow" checkBoxValue="d3">Hide</button></td>
            <td>Division 1 Team 3</td>
            <td>187</td>
            <td>223</td>
        </tr>
        <tr class="r1">
            <td><button class="hideRow" checkBoxValue="r1">Hide</button></td>
            <td>Division 2 Team 1</td>
            <td>330</td>
            <td>185</td>
        </tr>
        <tr class="r2">
            <td><button class="hideRow" checkBoxValue="r2">Hide</button></td>
            <td>Division 2 Team 2</td>
            <td>267</td>
            <td>225</td>
        </tr>
        <tr class="r3">
            <td><button class="hideRow" checkBoxValue="r3">Hide</button></td>
            <td>Division 2 Team 3</td>
            <td>223</td>
            <td>150</td>
        </tr>
    </tbody>
</table>

但就像我之前说过的那样,这并不适用于手机,因为它没有正确缩放。我已经坚持了几个小时,所以我们非常感谢所有的帮助!

0 个答案:

没有答案