沿着一個圓圈旋轉鏈接

我正在嘗試使鏈接圍繞一個圓圈旋轉的網站。（像這樣的東西）http://i.imgur.com/i9DzASw.jpg?1與不同的圖像和文字導致不同的網址。圖像是一個統一的圖像，也隨着用戶的滾動而旋轉。無論如何，我可以做到這一點？還有一種方法可以使頁面高度變得無限大，以便用戶在滾動時永遠不會進入頁面的底部？謝謝！沿着一個圓圈旋轉鏈接

下面是jsfiddle和允許旋轉圖像的代碼。 http://jsfiddle.net/kDSqB/135/

var $cog = $('#cog'), 
    $body = $(document.body), 
    bodyHeight = $body.height(); 

$(window).scroll(function() { 
    $cog.css({ 
     'transform': 'rotate(' + ($body.scrollTop()/bodyHeight * 30000) + 'deg)' 
    }); 
});

來源

2014-01-07 user3170382

我覺得這將是非常困難的，如果你會嘗試這樣做，在一個統一的形象，更好地分成獨立的div。您可以根據您的圖像使用border-radius屬性在css中對這些div進行塑形 –

您可以嘗試滾輪事件，而不是滾動：https：//developer.mozilla.org/en-US/docs/Web/Reference/Events/輪子 –

http://jsfiddle.net/Fezjh/1/

我有彩色的股利，使之更容易理解如何做到這一點 - 但你需要仔細思考的問題兼容性（舊的瀏覽器等）

只需刪除背景顏色來獲得您想要的效果。

更好的方法是將圖像分成div並將這些div彼此對齊。

檢查http://www.gdrtec.co.uk - 您會注意到4個圖像相互碰撞形成開始菜單 - 這將很容易旋轉包含div，並且所有東西仍然可以正常工作。

下面的代碼僅用於演示目的，應該用更強大的解決方案替換。

$('#link1').click(function(){ 
    alert("openURL"); 
});

還要考慮確保人們不必依靠JavaScript來爲您的網站工作。

來源

2014-01-07 19:10:50

非常感謝！ – user3170382

看到這個：http://jsfiddle.net/F8GTP/，和這個最終版本：http://jsfiddle.net/MjnxP/。

使用WheelEvent喜歡本作無限滾動：

var $cog = $('#cog'), 
    $body = $(document.body), 
    bodyHeight = $body.height(), 
    rotate = 1; 

var wheelEvent = function (event) { 
    var delta = 0; 
    if (event.wheelDelta) { delta = event.wheelDelta/120; } else if (event.detail) { delta = -event.detail/3; } 

    if (delta) { 
     rotate += delta * 1.12; //<== Increase speed. 
     console.log(rotate, delta); 
     $cog.css({ 'transform': 'rotate(' + rotate + 'deg)'}); 
    } 

    if (event.preventDefault) { event.preventDefault(); } 
    event.returnValue = false; 
}; 

window.onmousewheel = wheelEvent; 
if (window.addEventListener) { window.addEventListener('DOMMouseScroll', wheelEvent, false); }

對於檢測鏈路使用畫布「collision image」，並this is final version：

$cog.click(function(e) { 
    if (rotate !== lastrotate) { 
     //http://creativejs.com/2012/01/day-10-drawing-rotated-images-into-canvas/ 
     context.save(); 
     context.translate((image.width/2), (image.height/2)); 
     context.rotate(rotate * Math.PI/180); 
     context.drawImage(image, -(image.width/2), -(image.height/2)); 
     context.restore(); 
     lastrotate = rotate; 
    } 

    var x = e.pageX, y = e.pageY;  
    console.log(x, y); 

    var color = context.getImageData(x, y, 1, 1).data; 
    // context.fillRect(x-5, y-5, 1+10, 1+10); <== See cursor position 
    if (color[0] == 255 && color[1] == 255 && color[2] == 255) { //white = rgb(255, 255, 255); 
     alert("click"); 
    } 
}); 
function setPixel(imageData, x, y, r, g, b, a) { 
    index = (x + y * imageData.width) * 4; 
    imageData.data[index+0] = r; 
    imageData.data[index+1] = g; 
    imageData.data[index+2] = b; 
    imageData.data[index+3] = a; 
} 
var canvas = document.getElementById('canvas'), 
    context = canvas.getContext('2d'), 
    image = new Image(), 
    lastrotate = null; 
image.onload = function(){ 
    canvas.width = image.width; 
    canvas.height = image.height; 
    context.drawImage(image, 0, 0, image.width, image.height); 
}; 

// http://i.imgur.com/UfjbW5l.png I use base64 for get image because else console return security error with "getImageData". 
image.src = "data:image/png;base64,iVBORw0K...";

對於「image.src」，用你的形象您的域名或使用Base64，否則此腳本返回安全錯誤，將圖像轉換爲base64請參閱：http://www.base64-image.de/。

如果COG的位置不是（0，0）替代實際線這條線：

var x_pos = 200, y_pos = 200; // No use .position() or .offset() for get this, or use parent element position. 
var x = e.pageX - x_pos, y = e.pageY - y_pos;

來源

2014-01-07 21:04:21

沿着一個圓圈旋轉鏈接

回答

相關問題