從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

回答

相關問題