javascript-对角放置HTML元素

2019-10-23 14:37:50 阅读：160 来源： 互联网

我是Java语言&的新手.对HTML而言相对较新.我想知道应该使用哪种语言(纯html或Javascript&html).一种算法的一些建议,以便执行以下操作：

在背景上放置4个正方形,但将它们对角放置.每个正方形都是一个链接,您可以单击以转到不同的页面.那么,如何才能像下面的图片一样对角放置html元素？

http://i54.tinypic.com/2v7uw5u.png

我相信我的代码看起来像这样：

<script>
    function positionIt()
    {
        var screenW = // javascript function to get screen width??;
        var screenH = // javascript function to get screen height??;

        var sq1 = document.getElementById( "square1" );
        var sq2 = document.getElementById( "square2" );
        var sq3 = document.getElementById( "square3" );
        var sq4 = document.getElementById( "square4" );

        // What javascript functions set a elements x,y positions?
        // Should I use another way of positioning the square (not by absolute terms)
        sq1.setXPos( screenW / 4 );
        sq1.setYPos( screenH / 4 );

        sq2.setXPos( screenW / 3 );
        sq2.setYPos( screenH / 3 );
    }
</script>

// OR if I use css
.menu { background-color: blue; }
/* Position the square in absolute terms diagonally */
#square1 { x=200; y=200; }
#square2 { x=300; y=300; }
#square3 { x=400; y=400; }
#square4 { x=500; y=500; }

<div class="menu" onl oad="positionIt()">
    <a id="square1" href="home.html"><img src="square.jpg" /></a>
    <a id="square2" href="home.html"><img src="square.jpg" /></a>
    <a id="square3" href="home.html"><img src="square.jpg" /></a>
    <a id="square4" href="home.html"><img src="square.jpg" /></a>
</div>

解决方法:

Live Demo
Live Demo(左侧属性顺序已更改为与您的模型相匹配)

我试图保持您要求的数字.

HTML：

<div class="menu">
    <a id="square1" href="home.html"><img src="http://dummyimage.com/100/f90/fff" /></a>
    <a id="square2" href="home.html"><img src="http://dummyimage.com/100/f90/fff" /></a>
    <a id="square3" href="home.html"><img src="http://dummyimage.com/100/f90/fff" /></a>
    <a id="square4" href="home.html"><img src="http://dummyimage.com/100/f90/fff" /></a>
</div>

CSS：

.menu {
    background: blue;
    width: 800px;
    height: 800px;
    position: relative
}
/* Position the square in absolute terms diagonally */
#square1 { position:absolute; left:200px; top:200px; }
#square2 { position:absolute; left:300px; top:300px; }
#square3 { position:absolute; left:400px; top:400px; }
#square4 { position:absolute; left:500px; top:500px; }

这是如何运作的？参见：http://css-tricks.com/absolute-positioning-inside-relative-positioning/

标签：positioning,javascript,html
来源： https://codeday.me/bug/20191023/1913274.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript-对角放置HTML元素