文章/答案/技术大牛

发布

社区首页 >问答首页 >我们如何在另一个之上显示一个除法，而两者在html中的某些不透明度中都是可见的？

问我们如何在另一个之上显示一个除法，而两者在html中的某些不透明度中都是可见的？
EN

Stack Overflow用户

提问于 2018-04-18 13:11:57

回答 1查看 63关注 0票数 0

我不擅长设计网页。我在codepen.io上用https://codepen.io/KARANVERMA5/pen/oqKJma的一段代码制作了这个页面。

    <html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .modal {
            width: 600px;
            max-width: 100%;
            height: 400px;
            max-height: 100%;

        }

        #word-cloud {
            height: 100vh;
            width: 100vw;
            margin: 0 auto;
        }

        body,
        html {
            margin: 0;
            padding: 0;
        }

        .bar {
            border: 1px solid #666;
            height: 5px;
            width: 100px;
        }

        .bar .in {
            -webkit-animation: fill 10s linear 1;
            animation: fill 10s linear 1;
            height: 100%;
            background-color: green;
        }

        @-webkit-keyframes fill {
            0% {
                width: 0%;
            }
            100% {
                width: 100%;
            }
        }

        @keyframes fill {
            0% {
                width: 0%;
            }
            100% {
                width: 100%;
            }
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        $(window).on('load', function() {
            $('#myModal').modal('show');
        });
    </script>
</head>
<div class="modal hide fade" id="myModal" role="dialog">
    <div class="modal-header">
        <img class="right" src="http://i.imgur.com/jfDhpP5.png" />
    </div>

    <div class="modal-body">
        <h3>
            <div id="word-cloud">
            </div>
        </h3>
    </div>

    <div class="modal-footer">
        <div class="bar">
            <div class="in"></div>
        </div>
        <div class="container center">
            <button type="button" class="btn btn-default" data-dismiss="modal">Enter</button>
            <div>
                <span class="copyrights">Copyrights©
                <script language="JavaScript" type="text/javascript">
                        now = new Date
                        theYear=now.getYear()
                        if (theYear < 1900)
                        theYear=theYear+1900
                        document.write(theYear)
                </script>
                <a href="http://yoururl.com">your company </a>
                </span>
            </div>
        </div>
    </div>
</div>
<script>
    /*  ======================= SETUP ======================= */
    var config = {
        trace: true,
        spiralResolution: 1, //Lower = better resolution
        spiralLimit: 360 * 5,
        lineHeight: 0.8,
        xWordPadding: 0,
        yWordPadding: 3,
        font: "sans-serif"
    }

    var words = ["words", "are", "cool", "and", "so", "are", "you", "Great", "funhouse!", "apart", "from", "Ravi", "fish"].map(function(word) {
        return {
            word: word,
            freq: Math.floor(Math.random() * 50) + 10
        }
    })

    words.sort(function(a, b) {
        return -1 * (a.freq - b.freq);
    });

    var cloud = document.getElementById("word-cloud");
    cloud.style.position = "relative";
    cloud.style.fontFamily = config.font;

    var traceCanvas = document.createElement("canvas");
    traceCanvas.width = cloud.offsetWidth;
    traceCanvas.height = cloud.offsetHeight;
    var traceCanvasCtx = traceCanvas.getContext("2d");
    cloud.appendChild(traceCanvas);

    var startPoint = {
        x: cloud.offsetWidth / 2,
        y: cloud.offsetHeight / 2
    };

    var wordsDown = [];
    /* ======================= END SETUP ======================= */




    /* =======================  PLACEMENT FUNCTIONS =======================  */
    function createWordObject(word, freq) {
        var wordContainer = document.createElement("div");
        wordContainer.style.position = "absolute";
        wordContainer.style.fontSize = freq + "px";
        wordContainer.style.lineHeight = config.lineHeight;
        /*    wordContainer.style.transform = "translateX(-50%) translateY(-50%)";*/
        wordContainer.appendChild(document.createTextNode(word));

        return wordContainer;
    }

    function placeWord(word, x, y) {

        cloud.appendChild(word);
        word.style.left = x - word.offsetWidth / 2 + "px";
        word.style.top = y - word.offsetHeight / 2 + "px";

        wordsDown.push(word.getBoundingClientRect());
    }

    function trace(x, y) {
        //     traceCanvasCtx.lineTo(x, y);
        //     traceCanvasCtx.stroke();
        traceCanvasCtx.fillRect(x, y, 1, 1);
    }

    function spiral(i, callback) {
        angle = config.spiralResolution * i;
        x = (1 + angle) * Math.cos(angle);
        y = (1 + angle) * Math.sin(angle);
        return callback ? callback() : null;
    }

    function intersect(word, x, y) {
        cloud.appendChild(word);

        word.style.left = x - word.offsetWidth / 2 + "px";
        word.style.top = y - word.offsetHeight / 2 + "px";

        var currentWord = word.getBoundingClientRect();

        cloud.removeChild(word);

        for (var i = 0; i < wordsDown.length; i += 1) {
            var comparisonWord = wordsDown[i];

            if (!(currentWord.right + config.xWordPadding < comparisonWord.left - config.xWordPadding ||
                    currentWord.left - config.xWordPadding > comparisonWord.right + config.wXordPadding ||
                    currentWord.bottom + config.yWordPadding < comparisonWord.top - config.yWordPadding ||
                    currentWord.top - config.yWordPadding > comparisonWord.bottom + config.yWordPadding)) {

                return true;
            }
        }

        return false;
    }
    /* =======================  END PLACEMENT FUNCTIONS =======================  */




    /* =======================  LETS GO! =======================  */
    (function placeWords() {
        for (var i = 0; i < words.length; i += 1) {

            var word = createWordObject(words[i].word, words[i].freq);

            for (var j = 0; j < config.spiralLimit; j++) {
                //If the spiral function returns true, we've placed the word down and can break from the j loop
                if (spiral(j, function() {
                        if (!intersect(word, startPoint.x + x, startPoint.y + y)) {
                            placeWord(word, startPoint.x + x, startPoint.y + y);
                            return true;
                        }
                    })) {
                    break;
                }
            }
        }
    })();
    /* ======================= WHEW. THAT WAS FUN. We should do that again sometime ... ======================= */

    /* =======================  Draw the placement spiral if trace lines is on ======================= */
    (function traceSpiral() {

        traceCanvasCtx.beginPath();

        if (config.trace) {
            var frame = 1;

            function animate() {
                spiral(frame, function() {
                    trace(startPoint.x + x, startPoint.y + y);
                });

                frame += 1;

                if (frame < config.spiralLimit) {
                    window.requestAnimationFrame(animate);
                }
            }

            animate();
        }
    })();
</script>

</html>

现在的页面是这样的：-

而页脚现在有这样的内容：

在enter按钮的顶部有一个进度条。我想显示进入按钮和进度栏后面的字云和进入按钮，只有在进度栏完成后显示。请给我指出正确的方向。为什么完整的设计要向左走？我们如何在单词云的后面显示其他的div呢？

responsive-design

javascript

jquery

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-04-21 21:17:33

就像皮特说的，我们只需要在上面加上z指数和定位。我的CSS看起来有点像它。毕竟，我们只需调整css，仅此而已。它解决了这个问题。

#word-cloud  {
    position:fixed;
    height: 100vh;
    max-height: 100%;
    width: 100vw;
    max-width: 100%;
    margin:-300px auto auto -250px;
    top:20%;
    left:22%;
    text-align:center;
    z-index:2;
}
img{
    position:relative;
    left:40%;
    margin-left:0px;
}

body,
html {
    margin: 0;
    padding: 0;
}


.bar .in {
    -webkit-animation: fill 10s linear 1;
    animation: fill 10s linear 1;
    height: 100%;
    background-color: red;
}

@-webkit-keyframes fill {
    0% {
        width: 0%;
    }
    100% {
        width: 100%;
    }
}

@keyframes fill {
    0% {
        width: 0%;
    }
    100% {
        width: 100%;
    }
}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/49900633

复制

相似问题

问我们如何在另一个之上显示一个除法，而两者在html中的某些不透明度中都是可见的？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我们如何在另一个之上显示一个除法，而两者在html中的某些不透明度中都是可见的？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我们如何在另一个之上显示一个除法，而两者在html中的某些不透明度中都是可见的？
EN