沿着圆圈旋转链接 [英] Rotate links along a circle

问题描述

我想让一个网站的链接围绕一个圆圈。 （这样的东西） 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）'
}）; 
}）; 
  

解决方案

  http： //jsfiddle.net/Fezjh/1/ 
  

我已经对div进行着色，使其更容易理解如何做 - 但你需要仔细考虑兼容性问题（旧版浏览器等）

只需删除背景颜色，以获得所需的效果。

一个更好的方法是将图像拆分成div，然后将这些div相互对齐。

检查 http://www.gdrtec.co.uk - 你会发现4个图像互相对接起来形成开始菜单 - 它将很容易旋转包含div，一切仍然会工作，因为它应该。

下面的代码只是为了演示的目的，应该更换更健壮的解决方案。 / p>

  $（'＃link1'）。click（function（）{
 alert（openURL）; 
}）; 
  

同时考虑确保人们不必依赖javascript来让您的网站正常工作。 p>

I'm trying to make a website with links rotating around a circle. (Something like this) http://i.imgur.com/i9DzASw.jpg?1 with the different images and texts leading to different urls. The image is one unified image that also rotates as the user scrolls. Is there anyway I can do this? Also is there a way to make the page height infinite so that the user never gets to the bottom of the page as they scroll? Thanks!

Here's the jsfiddle and the code that allows for the rotation of the image. 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)'
    });
});

解决方案

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

I have coloured the div to make it easier to understand how to do it - but you need to think carefully about compatiblity issues (older browsers etc.)

Just remove the background colour to get your desired effect.

A better way would be to split the image into divs and put those divs up against each other.

check http://www.gdrtec.co.uk - you will notice 4 images butted up against each other form the start menu - it would be easy to rotate the containing div and everything will still work as it should.

The code below is just for demonstration purposes and should be replaced with more robust solution.

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

Also consider making sure people don't have to rely on javascript for your site to work.

这篇关于沿着圆圈旋转链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！