Javascript 沿圆旋转链接

我正在尝试制作一个链接围绕一个圆圈旋转的网站。类似这样的东西，不同的图像和文本会导致不同的URL。该图像是一个统一的图像，随着用户滚动也会旋转。还有什么我可以做的吗？还有没有一种方法可以使页面高度无限大，这样用户在滚动时就永远不会到达页面底部？谢谢

下面是JSFIDLE和允许图像旋转的代码。

我给div涂上了颜色，使其更容易理解如何操作-但您需要仔细考虑兼容问题，如旧浏览器等

只需去除背景色即可获得所需效果

更好的方法是将图像分割成几个div，并将这些div相互对置

检查-你会注意到从开始菜单中有4个图像相互对接-旋转包含的div会很容易，而且一切都会正常工作

下面的代码只是为了演示，应该用更健壮的解决方案替换

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

也要考虑确保人们不必依赖JavaScript来为你的站点工作。

参见： 对无限滚动使用如下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); }

---

我觉得如果你尝试在一个统一的图像中这样做会非常困难，最好是分割成单独的div。您可以使用CSSY中的“边框半径”属性根据图像塑造这些div。您可以尝试滚轮事件，而不是滚动：

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

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

$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...";

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;