【问题标题】:need to total width of rotating images需要旋转图像的总宽度
【发布时间】:2012-06-25 17:54:41
【问题描述】:

我的效果是,当您将鼠标悬停在这个特定区域上时,它会从底部抬起它,旋转图像,然后将它们揉在一起。它应该模拟“扇出”一手扑克牌。除了我需要它们居中之外,这一切都很好。我能想到的唯一方法是测量每边最远的角落,但我不知道该怎么做。有人有什么建议吗?我正在使用 jQuery 1.7。

示例链接:http://aws.redemptionconnect.com/redemption/play.html

【问题讨论】:

  • 使用 jquery 将鼠标悬停在卡片上时更改包装 div 的左侧位置。
  • 这就是我想做的,但我不知道设置多远,因为我无法确定宽度!
  • 但该值会根据屏幕分辨率发生很大变化

标签: jquery css image-rotation


【解决方案1】:

不用javascript来计算屏幕宽度,用margin:auto变得有点创意会容易得多

首先,根据卡片在堆栈中的位置,给卡片一个预定义的左值。

然后我们计算#outer-hand包装器的宽度。一旦我们有了合适的宽度,定义为 auto 的边距将自动将卡片居中到所需的位置!

看看这个:

http://jsfiddle.net/JE7gf/

【讨论】:

  • #outer-hand不干扰其他div的原因是因为它没有高度吗?
  • 好的,很快,我复制了所有内容,但它在我的网站上执行此操作:awesomescreenshot.com/0c08xofb1
  • 嗯,很奇怪...是否又有指向现场版本的链接?看起来旋转值正在根据卡片位置进行更改
  • 回顾您的更新后,带有max-width: 100% 标签的imgs 似乎是不良行为背后的罪魁祸首。也许看看你包含的一些插件。
  • 我没有看到max-width: 100% 设置
猜你喜欢
  • 2010-11-20
  • 1970-01-01
  • 1970-01-01
  • 2011-05-26
  • 2018-09-08
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-06-13
相关资源
最近更新 更多