用JavaScript实现HTML

Question

我正在观看velocity.js的教程/演示，它被用来在网站上模拟动态的3D视图： https://www.youtube.com/watch?v=MDLiVB6g2NY&hd=1 这非常类似于我收到的任务，并且我在逻辑上理解它，但我不知道我需要在HTML中实现以下代码。 我知道我需要一个id =“count”的元素来接收DOM点元素，但我不确定应该是什么类型的元素或者其他参数或附加代码。 我在我的CSS中有一个.dot类，并且可以使用velocity.js进行操作，只是像视频中所示一样将其实例化。

var isWebkit =  /Webkit/i.test(navigator.userAgent),
    isChrome =  /Chrome/i.test(navigator.userAgent),
    isMobile =  !!("ontouchstart" in window),
    isAndroid = /Android/i.test(navigator.userAgent);

$.fn.velocity.defaults.easing = "easeInOutSine";

function r(min,max){
    return Math.floor(Math.random() * (max-min +1)) +min;
}

var dotsCount = isMobile ? (isAndroid ? 40 : 70) : (isChrome ? 200 : 125),
    dotsHtml = "",
    $count = $("#count"),
    $dots;

//instantite DOM elements
for(var i = 0; i < dotsCount; i++){
    dotsHtml += "<div class = 'dot'></div>";
}
$dots = $(dotsHtml);
$count.html(dotsHtml);

任何帮助和建议都将不胜感激。

- Alec Gamble

---

感谢您的编辑，我不知道额外的内容是从哪里来的。 - Alec Gamble

$count的HTML正在被设置：http://api.jquery.com/html/#html2 - online Thomas

Answer 1

这将修复你的代码：

isMobile 没有初始化

 var dotsCount = 15;//isMobile ? (isAndroid ? 40 : 70) : (isChrome ? 200 : 125),
    var $dots = 0;
        dotsHtml = "",
        $count = $("#count"),
        $dots = 0;

    //instantite DOM elements
    for (var i = 0; i < dotsCount; i++) {
         dotsHtml += "<div class = 'dot'></div>";
    }
    $dots = $(dotsHtml);
    $count.html(dotsHtml);

    function r(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }

http://jsfiddle.net/gpncxmf0/

- online Thomas

---

抱歉，我应该让它更清楚些，它已经包含在内了，我只是截取了最相关的部分...我会修改问题。 - Alec Gamble

@AlecGamble请也看一下这个fiddle，打开你的控制台并查看HTML代码。代码可以工作！ - online Thomas

但是，我需要做什么才能像示例一样制作出可视化表示呢？我有少量的CSS指示“点”应该长什么样子，但我不知道$count引用的容器应该是什么样子才能实现这一点。我的猜测只是一个宽度和高度都为100％且具有背景颜色的div，但我无法实例化“点”元素...如果我手动放置它们，则可以工作，但这似乎不正确。 - Alec Gamble

我不是故意刁难，我只是不理解 :( - Alec Gamble

如视频所述，您必须链接velocity.js才能使此代码正常工作。此外，.dots仅是样式，具有50％的边框半径和投影效果。 - KpTheConstructor

你说得对，它确实起作用了，是我的动画代码出了问题，我有点慌了。谢谢你的帮助。还要感谢Kp - 我在HTML中有一个链接，你是指阴影吗？ - Alec Gamble

Answer 2

根据视频中的说明，这是您的HTML应该看起来的样子。

<div class="container">
  <div class="description"></div>
     <div id="count">

      </div>
</div>

点将自动生成到$('#count')。视频中的其余代码通过改变z轴的透视来控制点/容器动画。

- KpTheConstructor