小编Tom*_* S.的帖子

使用jquery获取元素的可见高度而不是其实际高度

这篇文章是有关这一个.请考虑阅读它.:-)

在我链接的帖子中,我认为如果div的可见高度大于另一个div的可见高度,我的问题的解决方案是更改链接的目标.在我的布局中,我所指的所有div都有1100px的高度.但这不是我想要的.我希望脚本能够获得访问者当前可见的div的高度,而不是它的真实高度.有没有办法用jQuery做到这一点？

提前致谢!

html jquery height visible

Tom*_* S.

2017 05-23

7
推荐指数

2
解决办法

1万
查看次数

将div中具有可变高度的div垂直居中,该div是视口的100%

我知道它看起来像是一个被问过多次的问题,但我找不到解决这个非常具体的情况.

这是我的布局的基本线框:

在此输入图像描述

基本上,我有一些不同背景的div,它们占据浏览器窗口的100%宽度和100%高度.在它们的每一个中,另一个div占据其父级的50%宽度,但具有可变高度,具体取决于其内容.

我希望所有这些div-in-a-div都是垂直对齐的.现在,我已经读到了将显示:table-cell和vertical-align:middle放在父节点上应该可以工作,但是在这种情况下它似乎搞得一团糟.: - /

我的代码:

<head>
<style>
     html, body {
            height: 100%;
        }
        body > div {
            width: 100%;
            height: 100%;
            background-size: cover;
        }

        .centered {
            width: 50%;
            margin: 0 auto;
            background: rgba(0,0,0,0.4);
            padding: 50px 0 30px 0;
        }
</style>
</head>
        <body>

            <div id="pic_1">
                    <div class="centered">content</div>
            </div>

            <div id="pic_2">
                    <div class="centered">content</div>
            </div>

            <div id="pic_3">
                    <div class="centered">content</div> 
            </div>  

        </body>

Run Code Online (Sandbox Code Playgroud)

谢谢你的帮助!

css height vertical-alignment

Tom*_* S.

lucky-day

6
推荐指数

1
解决办法

4063
查看次数

旋转旋钮,在jQuery/JS中旋转时触发事件

我正在尝试创建一些交互式旋钮,就像你可以在老式电视和收音机中找到的那样.我正在使用KnobKnob.js来允许用户旋转.它有时表现得很奇怪,但由于缺乏可用于这种特殊需求的插件和我没有时间,我还是决定试一试.

我想要做的是根据旋钮矩形部分的旋转角度或<div id="centralKnob">我的代码改变视频源,以复制Channels旋钮的行为.用户还应该只需单击周围的链接即可.

在此输入图像描述

因此,我认为最好的方法是根据旋钮的当前旋转角度更改光源.由于我是JS/jQuery的新手,我不知道如何获得元素的角度,所以我环顾四周找到了这篇文章.他们做什么:

var el = document.getElementById("centralKnob");

var st = window.getComputedStyle(el, null);

var tr = st.getPropertyValue("-webkit-transform") ||
         st.getPropertyValue("-moz-transform") ||
         st.getPropertyValue("-ms-transform") ||
         st.getPropertyValue("-o-transform") ||
         st.getPropertyValue("transform") ||
         "Either no transform set, or browser doesn't do getComputedStyle";

var values = tr.split('(')[1];
values = values.split(')')[0];
values = values.split(',');

var values = tr.split('(')[1];
whatever = tr.split(')')[0];
whatever = tr.split(',');

var a = values[0];
var b = values[1];
var c = values[2];
var d = values[3];


var …

Run Code Online (Sandbox Code Playgroud)

javascript css jquery angle rotation

Tom*_* S.

lucky-day

3
推荐指数

1
解决办法

2576
查看次数