轉換此Mootools的代碼轉換爲jQuery代碼

我想腳本轉換爲jQuery的，但忽略了最低工作......這是Mootools的代碼：轉換此Mootools的代碼轉換爲jQuery代碼

var bg = $('#counter'); 
var ctx = ctx = bg.getContext('2d'); 
var imd = null; 
var circ = Math.PI * 2; 
var quart = Math.PI/2; 

ctx.beginPath(); 
ctx.strokeStyle = '#99CC33'; 
ctx.lineCap = 'square'; 
ctx.closePath(); 
ctx.fill(); 
ctx.lineWidth = 10.0; 

imd = ctx.getImageData(0, 0, 240, 240); 

ctx.putImageData(imd, 0, 0); 
ctx.beginPath(); 
ctx.arc(120, 120, 70, -(quart), ((circ) * 0.5) - quart, false); 
ctx.stroke();

這裏是的jsfiddle：http://jsfiddle.net/Aapn8/2832/

我試圖用jquery選擇器$('')替換document.id，什麼也沒有...

謝謝！

來源

2014-02-22 Deptroco

這個問題似乎是題外話，因爲它是關於將特定腳本轉換爲不同的庫。這對其他人不會有用。 –

這是關於學習兩個庫之間的差異，例如，對於其他人;） – Deptroco

如果你有一個具體的問題，你可以問它。例如。 'document.id（'range'）'等價於'$（'＃range'）'。 jQuery提供了很多文檔，所以你應該能夠通過閱讀它來了解大部分內容。 [這是可用選擇器列表]（http://api.jquery.com/category/selectors/）。或者先看看[jQuery教程]（http://learn.jquery.com/）。只是*鏈接*到一些代碼，並期望別人爲你重寫它不是如何工作。 –

這是一個有關鏈接的工作示例，請記住，對於easeOutBounce動畫，您需要額外的插件，因爲jQuery本身只有簡單的動畫類型。這需要在DOM準備或窗口加載功能完成（在的jsfiddle我們使用左側提供的複選框）

// SVG stuff 
var range = $('#range').get(0); 
var bg = $('#counter').get(0); 
var ctx = ctx = bg.getContext('2d'); 
var imd = null; 
var circ = Math.PI * 2; 
var quart = Math.PI/2; 

ctx.beginPath(); 
ctx.strokeStyle = '#99CC33'; 
ctx.lineCap = 'square'; 
ctx.closePath(); 
ctx.fill(); 
ctx.lineWidth = 10.0; 

imd = ctx.getImageData(0, 0, 240, 240); 

var draw = function(current) { 
    ctx.putImageData(imd, 0, 0); 
    ctx.beginPath(); 
    ctx.arc(120, 120, 70, -(quart), ((circ) * current) - quart, false); 
    ctx.stroke(); 
} 
$(range) 
.val(0) 
.on('mousemove', function() { 
     draw(this.value/100); 
}) 
.animate({ 
    'value':100 
},{ 
    'duration':5000, 
    'easing':'easeOutBounce', 
    'step': function (step, fx) { 
     draw(step/100); 
    } 
});

http://jsfiddle.net/BLtaF/（與寬鬆附加插件）

來源

2014-02-22 10:31:30

bg現在是一個jQuery對象。如果您想訪問底層的DOM元素，您可以使用bg[0]，例如bg[0].getContext(...)。

Learn how to debug JavaScript。然後，您將看到您收到的錯誤消息以及在哪裏（例如，在這種情況下：TypeError: bg.getContext is not a function），設置斷點和檢查變量等等。

來源

2014-02-22 10:29:32

轉換此Mootools的代碼轉換爲jQuery代碼

回答

相關問題