offset()值不准问题

本来应该只需获取含图片的div的offset(),然后将标签div的坐标设置好即可,但是不知为何越靠后的div的offset().top越不正常,跟标准值偏离的越来越大。

即使你在$(document).ready中调用方法,仍然不能保证页面已经全部渲染完毕,

图片和BlockGothic可能都还未渲染,所以导致获取的坐标有误差。

解决方法是把这种方法放在$(window).load中调用。

尝试后果然完美解决问题。

转载于:https://www.cnblogs.com/lichuntian/p/4896525.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
这段代码是一段 JavaScript 代码,其中包含了一些变量的定义和赋操作。 ```javascript var transitionEnd = $.cssTransitionEnd(), actualDemo = currentDemo, thumbnail = $('.shelf .sample[sample="'+currentDemo+'"]'), bookWidth = $('#book-zoom').width()/2, bookHeight = $('#book-zoom').height()/2, targetPosition = thumbnail.offset(), position = $('#book-zoom').offset(), scaleFrom = thumbnail.height()*1.1/$('#book-zoom').height(), posX = (-bookWidth + sample.flipbook.width()/4)*scaleFrom + bookWidth + position.left, posY = -bookHeight*scaleFrom + bookHeight + position.top, moveX = targetPosition.left - posX, moveY = targetPosition.top - posY; ``` 这段代码的作用是根据一些元素的位置和尺寸计算出一些动画效果所需的变量。具体解释如下: - `transitionEnd` 变量是通过调用 `$.cssTransitionEnd()` 函数来获取 CSS 过渡效果结束事件的名称,用于在动画结束时触发相应的回调函数。 - `actualDemo` 变量是将 `currentDemo` 的赋给它,用于保存当前的演示样本。 - `thumbnail` 变量是通过选择器获取具有特定 `sample` 属性的 `.shelf .sample` 元素。 - `bookWidth` 变量是通过获取 `#book-zoom` 元素的宽度并除以 2 来计算得到的。 - `bookHeight` 变量是通过获取 `#book-zoom` 元素的高度并除以 2 来计算得到的。 - `targetPosition` 变量是通过调用 `offset()` 函数获取 `thumbnail` 元素相对于文档的偏移位置。 - `position` 变量是通过调用 `offset()` 函数获取 `#book-zoom` 元素相对于文档的偏移位置。 - `scaleFrom` 变量是通过计算 `thumbnail` 元素高度的 1.1 倍除以 `#book-zoom` 元素的高度来得到的比例。 - `posX` 变量是根据一系列计算公式来确定的目标 X 坐标位置。 - `posY` 变量是根据一系列计算公式来确定的目标 Y 坐标位置。 - `moveX` 变量是目标位置的左偏移量减去 `posX` 的结果。 - `moveY` 变量是目标位置的上偏移量减去 `posY` 的结果。 这段代码的目的是计算出元素动画过程中需要的位置和尺寸信息,以便在后续的动画操作中使用。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值