当前位置：文江博客话题详情

如何使用 jquery 和 CSS3 KeyFrames 将元素（例如 div 或图像）围绕点或鼠标圈出？

发布于 2024-12-22 19:58:07 字数 123 浏览 1 评论 0原文

我在尝试使用 jquery 和 css3 关键帧来移动或围绕点或鼠标周围移动或环绕元素（例如 div 或图像）时

遇到了问题，而不是延迟时间，只是保持环绕。

有什么解决办法吗？请让我看看。提前致谢！

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

逆夏时光 2024-12-29 19:58:07

从您的澄清评论来看：

给定一个位置，如何让图像或元素围绕它

CSS3 动画

要制作围绕某个点平滑旋转元素并永远持续的动画，您可以使用这些 CSS3 关键帧/动画和 2D 转换属性：

animation 指定时间和关键帧使用。
动画计时函数指定您想要平滑的动画（线性）。
@keyframes 准确指定如何制作动画元素。
transform-origin绕 div 中心以外的点旋转（一些偏移）。
transform 移动元素从旋转中心（轨道半径）出来。
旋转(<角度>);< /a> 指定您要在关键帧中旋转。

您可能需要复制这些内容并在每个前面加上 -webkit-、-moz- 和 -ms- 一段时间，直到 CSS3 动画功能得到广泛支持。

在 CSS/jQuery 中指定位置

您可以使用普通的 CSS 围绕任意点旋转 HTML 元素：

div.someClass {
    position:absolute;
    top:250px;
    left:350px;
}

如果您希望持续将动画集中在鼠标光标上，则需要使用 jQuery 来处理 mousemove 文档上的事件，并设置元素 CSS 的 left 和 top 属性。

类似于：

$(document).mousemove(function(event) {
    var animated = $("#animated");
    var offsetX = 50; // Pixels to the right of the cursor
    animated.css("left", event.pageX + offsetX);
    animated.css("top", event.pageY - animated.height() / 2);
});

文档

代码示例

我已经构建了一个代码示例来研究您需要的函数和参考自己构建这个。由于其他答案已经为您提供了他们的代码示例，因此我将继续发布我的代码示例。

http://jsfiddle.net/vLwDc/1/

我强烈建议你自己构建这个，这样你可以了解这些东西是如何工作的:)

浏览器支持

请参阅此页面包含 CSS3 动画支持矩阵，和此页面包含 CSS3 2D 变换支持矩阵。

要点是：

它仅适用于 IE 10.0 及以上版本。它在 IE9 中不起作用
它在几乎任何版本的 Firefox 或 Chrome 中都可以工作
它应该在 Safari 4.0 及更高版本中工作
它可能在 Opera 中不起作用（我需要 -o-转换标签以使其工作，但动画支持尚不存在）

From your clarifying comments:

given a position, how to make a image or element circle it

CSS3 Animation

To make an animation where you rotate an element around a point smoothly and continue forever, you can use these CSS3 keyframe/animation and 2D transformation properties:

animation to specify timing and which keyframes to use.
animation-timing-function to specify that you want a smooth animation (linear).
@keyframes to specify exactly how to animate the element.
transform-origin to rotate around a point other than the center of the div (some offset).
transform to move the element out from the center of rotation (radius of orbit).
rotate(<angle>); to specify that you want to rotate in your keyframe(s).

You will probably need to duplicate these and prefix each with -webkit-, -moz- and -ms- for a while until the CSS3 animation features are widely supported.

Specifying position in CSS/jQuery

You can use plain-old CSS to rotate an HTML element around an arbitrary point:

div.someClass {
    position:absolute;
    top:250px;
    left:350px;
}

If you want to continually center your animation on the mouse cursor, you'll need to use jQuery to handle the mousemove event on the document, and set the left and top properties of the element's CSS.

Something like:

$(document).mousemove(function(event) {
    var animated = $("#animated");
    var offsetX = 50; // Pixels to the right of the cursor
    animated.css("left", event.pageX + offsetX);
    animated.css("top", event.pageY - animated.height() / 2);
});

Docs

Code Sample

I had built a code sample to research the functions and references you'd need to build this on your own. Since the other answer already gave you their code sample, I'll go ahead and post mine.

http://jsfiddle.net/vLwDc/1/

I highly recommend you build this out yourself so you can learn how these things work :)

Browser Support

See this page with a CSS3 Animation support matrix, and this page with a CSS3 2D Transform support matrix.

The gist is:

It will only work in IE 10.0 and above. It won't work in IE9
It will work in pretty much any version of Firefox or Chrome
It should work in Safari 4.0 and later
It probably won't work in Opera (I'd need -o- Tranform tags to make it work, and the Animation support just isn't there yet)

回复收藏 0 原文

我为君王 2024-12-29 19:58:07

我认为这就是您所要求的： http://jsfiddle.net/BZSQd/

如果有，请告诉我你有任何问题吗:)

@-webkit-keyframes spin {
    from { -webkit-transform: rotateZ(0); }
    to   { -webkit-transform: rotateZ(-360deg); }
}

div {
    border   : 1px solid #000;
    width    : 1px;
    height   : 1px;
    position : absolute;
    -webkit-animation        : spin 8s infinite linear;
    -webkit-transform-origin : 50px 50px;
}

I think this is what you were asking for: http://jsfiddle.net/BZSQd/

Let me know if you have any questions :)

@-webkit-keyframes spin {
    from { -webkit-transform: rotateZ(0); }
    to   { -webkit-transform: rotateZ(-360deg); }
}

div {
    border   : 1px solid #000;
    width    : 1px;
    height   : 1px;
    position : absolute;
    -webkit-animation        : spin 8s infinite linear;
    -webkit-transform-origin : 50px 50px;
}

回复收藏 0 原文

~没有更多了~