使用css3和jQuery制作缩放圈

时间:2011-12-23 18:03:22

标签: jquery css3 height width geometry

我有三个基于百分比宽度的块级别订单项,因此每个项目的宽度均等于浏览器窗口的宽度。这很容易。

我需要帮助的是使用jQuery查找每个项目的宽度并将项目的height属性指定为等于宽度,这样无论浏览器窗口的宽度如何,项目的宽度和高度都是相等。

一旦宽度和高度相同,就可以很容易地使用css3制作漂亮的圆形背景。

2 个答案:

答案 0 :(得分:1)

这样的东西?看起来不那么难,我可能错过了什么。

$('.circle').each(function(){
  var element = $(this);
  element.height(element.width());
})

答案 1 :(得分:0)

var item = $('.item'); 
item.css("height", item.width());

$(window).resize(function(){
  item.css("height", item.width());
})

我正在将查询分配给变量,因为在窗口调整大小时调用事件非常密集。

http://jsfiddle.net/CKLZM/