Question

我正在尝试建立一个围绕圆圈旋转的链接的网站。（像这样的东西）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)'
    });
});

Answer 1

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

我已经对div进行了着色，以便更容易理解如何执行此操作 - 但您需要仔细考虑兼容性问题（旧浏览器等）。

只需删除背景颜色即可获得所需效果。

更好的方法是将图像分割成div并将这些div相互对立。

检查http://www.gdrtec.co.uk - 您会注意到4个图像在开始菜单中相互对接 - 旋转包含div很容易，一切都会按原样运行。

以下代码仅用于演示目的，应替换为更强大的解决方案。

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

另外，请考虑确保用户不必依赖javascript来运行您的网站。

Answer 2

请参阅：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;

沿圆圈旋转链接

2 个答案: