css控制div

时间:2015-11-26 04:14:20

标签: javascript jquery html css

作为用户界面的一部分,我正在尝试使用html,css和amp;设计一个'指南针'小部件。 jQuery的。 我想要实现的是:给定0到360之间的值,定位图像使其代表相应的罗盘位置。例如,值0应如下所示: enter image description here

值90应如下所示:

enter image description here

依旧......

为了达到这个目的,我试图在div标签中使用一个大图像作为背景图像,并尝试使用它的位置: enter image description here

这是我尝试的CSS,在我的jquery代码中,我希望操纵位置百分比以控制图像的位置

#compass{
    background-image: url(../../resources/images/compass2.png);
    background-size: cover;
    background-repeat:repeat-x;
    background-position: 25%;
}

对于我的生活,我无法弄清楚如何明确地控制我想要的位置。例如,从图像左边缘到第一个E字母的距离约为图像宽度的19%。我该如何将这个距离与背景位置值相关联?

1 个答案:

答案 0 :(得分:3)

Working Fiddle

看起来零度的起点约为59.5%,每个度数值约为0.20555%。因此,对于每个学位,您可以将0.20555%添加到您的起点。

的Javascript

function adjustImage() {
    var deg = $('#deg').val();
    var addDeg = 0.20555 * deg;
    var start = 59.5;
    var newDeg = addDeg + start;
    $('#compass').css({'background-position': newDeg + '%'});
}
adjustImage();

HTML

<div id="compass"></div>
<input id="deg" placeholder="enter degrees" type="number" onchange="adjustImage()">

CSS

#compass{
    background-image: url('http://i.stack.imgur.com/OLVFE.jpg');
    background-size: cover;
    background-repeat:repeat-x;
    background-position: 59.5%;
    height: 91px;
    width: 600px;
    border: 1px solid black;
}

#deg {
    margin: 20px;
    padding: 5px;
}