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);

任何帮助和建议都将受到如此多的赞赏。

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/

Answer 2

根据视频中的说明，这就是你的HTML应该是什么样的。

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

      </div>
</div>

点将自动生成$（'＃count'）。视频中的其余代码通过更改z轴的透视来控制点/容器动画。

从javascript实现html

2 个答案: