javascript - 多次更改 css 背景位置

标签 javascript jquery css

您好,我想在悬停时预览视频文件的缩略图,例如 www.megavideo.com,但我想用 sprite 文件来实现。 例如:我的拇指是一个 140px 宽和 560px 高的图像 当我用鼠标悬停时,我想将背景位置切换 4 次(-140 像素),并在鼠标悬停时循环播放该动画。 有人可以帮我吗?我很抱歉我的英语不好,我是 jquery 的新手。 谢谢!

最佳答案

使用 $.hover 应用事件处理程序使用 setTimeout每秒将 background-position 属性的一个轴调整 -140px。存储 setTimeout 的返回值,以便稍后取消它。当该轴的值超过-140 * 4时,其中4是动画的帧数,然后将其重置为0。

您可以使用 .hover 指定第二个回调函数,它会在您停止悬停时触发;使用该函数取消您上次使用 clearTimeout 设置的回调。

关于javascript - 多次更改 css 背景位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5299225/

相关文章:

javascript - 使用 hide() 隐藏元素会导致页面 "jump"

css - Bootstrap 网格(3 列用于大,2 用于中,1 列用于小)

javascript - 关于 prototype 和 prototypejs

javascript - 当页面向下滚动时,我怎样才能使这个背景变得不那么透明?

javascript - 在相扑选择插件中通过 jQuery 选择元素不起作用

jquery - 如何在基于 child 的 parent 身上应用CSS

javascript - 检查日期是否存在(第 30 天/第 31 天)

javascript - 如何通过 javascript 设置 content-disposition = attachment?

javascript - 如何在开发和生产中构建 JavaScript 应用程序

javascript - 将每三个div的高度设置为最后一个/最长一个的高度