从JavaScript实现HTML

我看这是用来模拟一个网站上的动态3D视图velocity.js的教程/演示： https://www.youtube.com/watch?v=MDLiVB6g2NY&hd=1 从JavaScript实现HTML

这是非常相似，我一直在考虑一个任务，我理解它的逻辑，但我不明白我需要做什么来在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);

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

来源

2015-11-17 Alec Gamble

感谢您的编辑，我不知道额外来自哪里。 –

$ count的html被设置为：http://api.jquery.com/html/#html2 –

这是你的HTML看起来应该根据视频提供的说明等。

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

     </div> 
</div>

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

来源

2015-11-17 20:35:22 KpTheConstructor

这将修复您的代码：

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/

来源

2015-11-17 20:01:12

对不起，我应该更加清楚，它是包含的，我只是拿了一小段最相关的位...我会修改这个问题。 –

@AlecGamble也请看小提琴并打开您的控制台并查看html。代码有效！ –

但接下来我需要做什么来做出像这个例子那样的视觉表现？就像我有少量的CSS指示'点'应该是什么样子，但我不知道$ count参考的容器应该如何实现这一点。我的意思是我的猜测将只是一个具有100％宽度和高度以及背景颜色的div，但我无法得到它来实例化'点'元素......它可以工作，如果我手动将它们放入，但不会' t看起来没错。 –

从JavaScript实现HTML

回答

相关问题