如何使用jquery使图像沿圆形路径移动?

2023-11-27

在这里,我试图使图像沿圆形路径移动,但它没有沿圆形路径移动..我已经尝试过这样的缓慢移动图片

CSS

#friends { position: absolute; }

Markup

<img src="http://jsfiddle.net/img/logo.png" 
id="friends"/>

JS

function moveit() {

    var newTop = Math.floor(Math.random()*350);
    var newLeft = Math.floor(Math.random()*1024);
    var newDuration = Math.floor(Math.random()*5000);

    $('#friends').animate({
      top: newTop,
      left: newLeft,
      }, newDuration, function() {
        moveit();
      });

}

$(document).ready(function() {
    moveit();
});

现场演示:http://jsfiddle.net/W69s6/embedded/result/

有什么建议吗?


另一种变体(基于Div 使用 Javascript 循环移动):

var t = 0;

function moveit() {
    t += 0.05;

    var r = 100;         // radius
    var xcenter = 100;   // center X position
    var ycenter = 100;   // center Y position

    var newLeft = Math.floor(xcenter + (r * Math.cos(t)));
    var newTop = Math.floor(ycenter + (r * Math.sin(t)));

    $('#friends').animate({
        top: newTop,
        left: newLeft,
    }, 1, function() {
        moveit();
    });
}

$(document).ready(function() {
    moveit();
});​

DEMO: http://jsfiddle.net/W69s6/20/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使用jquery使图像沿圆形路径移动? 的相关文章

  • Jquery查找值为X的表格单元格

    我正在尝试寻找一个 td 其中值为 5 它是一个日历 因此只有一个 5 值 您可以使用filter https api jquery com filter method td filter function return this text
  • jQuery stopPropagation 不起作用

    我正在使用以下内容选色器 https github com meta100 mColorPicker blob master javascripts mColorPicker js它工作正常 但是当我单击颜色选择器图标时 我不希望它冒泡到主
  • 使用 javascript 将 html 文本渲染为位图,无需服务器端代码

    我需要使用 javascript 代码来转换 html 中的文章 帖子 以便最终用户以位图的形式查看 有没有办法在没有服务器端代码的情况下做到这一点 example p testing text here p 您可以使用例如html2can
  • 比较表中的行以了解字段之间的差异

    我有一个包含 20 多列的表 客户端 其中大部分是历史数据 就像是 id clientID field1 field2 etc updateDate 如果我的数据如下所示 10 12 A A 2009 03 01 11 12 A B 200
  • 使用 jQuery UI 日期选择器选择日历更改 URL

    我正在使用 jQuery UI 选择器 我想知道当有人选择日期时是否有可能 它会自动将他们重定向到 URL 如下所示 index php date 2013 10 15 这是我正在使用的插件 Date
  • 有没有好的 JQuery twitter 小部件可以循环推文?

    我想知道是否有任何 JQuery 小部件提供了循环加载推文的功能 例如在官方小部件中http twitter com about resources widgets widget profile http twitter com about
  • jQuery 检索和设置 html select 元素的选定选项值

    我正在尝试使用 jQuery 检索并设置选择元素 下拉列表 的选定值 为了检索我已经尝试过 myId find selected val 也 myId val 但两者都返回未定义 任何对此问题的见解将不胜感激 要获取 设置选择元素的实际 s
  • 如何设置在浏览器的新选项卡(_blank)中打开的pdf文件的标题

    这是我的尝试 是否在新选项卡上打开 但它总是显示test pdf如题 function titlepath path name alert path alert name document title name window open pa
  • 将 jQuery 版本从 1.7.1 升级到 1.11.2

    在我当前的应用程序中 我使用的是 jQuery 版本 1 7 1 现在 我计划将jQuery版本升级到1 11 2 是否有任何补丁可以提供与现有应用程序的向后可比性 Thanks 尝试这个 http blog jquery com 2013
  • 检测 WebGL 支持的正确方法?

    我正在尝试跨多个浏览器检测 WebGL 支持 并且遇到了以下情况 当前版本的 Firefox 似乎使用以下检查来报告积极支持 即使访问者的视频卡被列入黑名单和 或 WebGL 被禁用 if window WebGLRenderingCont
  • 在 iframe 中打开的网页上调用我的 jquery 函数

    我想单击一个按钮 该按钮位于基于父页面中的类选择器的 iframe 中打开的网页上 我试过这个 each classname function i el setTimeout function el trigger click 30000
  • jQuery,使用 ~ 作为 id 的一部分 - 如何?

    在我的应用程序中 我有一个表单 其中的元素使用特定的约定命名 即它们是路径 其各部分使用 sign 现在我需要通过 id 在 jQuery 中访问其中之一 但失败了 显然 jQuery 将其视为 prev sibling thing 有什么
  • defaultDate 选项与 setDate 方法之间的差异

    我正在尝试使用jQueryUI DatePicker 我必须了解的主要事情之一是在页面加载时设置日期的方式 经过一些研究后 我发现有两种不同的方法可以做到这一点 using defaultDate option using setDate
  • Jquery获取选中的复选框

    您好 我想获取页面中选定复选框的列表 实际上我真正需要的是获取复选框旁边的元素的文本 该元素是一个 html 元素 li 代码如下 但它不起作用 这是我当前的 jQuery document ready function target cl
  • Jquery 悬停卡

    我在用着http designwithpc com Plugins Hovercard http designwithpc com Plugins Hovercard 但我不知道如何在悬停卡上声明 var 每个工作描述都有自己的 ID 当悬
  • 过滤自定义选择器是否大于 jQuery 中的数字[重复]

    这个问题在这里已经有答案了 快给你一份 我查看了 jQuery com 中的选择器 但找不到按大于数字的选择器进行过滤的方法 我想做这个 level gt 4 hide 我的 html 看起来像这样 div Test div 如何使用该语法
  • JavaScript 继承;调用和原型

    要在Javascript中实现继承 通常需要执行以下两个步骤 假设我有一个基类 Animal var Animal function name this name name 我现在想从中派生一个子类 Dog 所以我想说 var Dog fu
  • 如何通过单击链接来更改 div 的内容?

    这是我的网页的 修改后的 jsfiddle 它还有很多 而且定位是正确的 与此相反 http jsfiddle net ry0tec3p 1 http jsfiddle net ry0tec3p 1 a href class btn1 st
  • Highcharts jQuery 渲染问题 - 所有浏览器

    我在尝试使用构建堆积柱形图时遇到了一个奇怪的问题高图表 http www highcharts com 当图表呈现时 在您调整浏览器大小之前 不会显示列无论如何 导致图表重绘 我认为 图表的其余部分显示 轴 标题等 但不显示列本身 我在 I
  • Flot 库将 y 轴设置为最小值 0 和最大值 24

    如何将 y 轴设置在 0 到 24 的范围内 这是我的代码 j plot j placeholder d1 xaxis mode time min new Date 2010 11 01 getTime max new Date 2011

随机推荐

  • 如何创建Python卷积核?

    我正在尝试创建一个卷积核 中间值为 1 5 不幸的是 我不断地想出如何做到这一点的想法 我正在尝试创建类似的东西 Array 0 1 0 1 1 5 1 0 1 0 由于 OpenCV 使用 Numpy 来显示图像 因此您可以简单地使用 N
  • 使用 Carrierwave 清理 tmp 目录

    我使用 Carrierwave 进行图像上传 在我的表单中 我添加了一个用于缓存的隐藏字段 如文档中所述 form for user html multipart true do f p f label image your image f
  • python的csv阅读器可以保留引号吗?

    我想使用 python CSV 阅读器 但我想保留引号 这就是我想要的 gt gt gt s simple split test gt gt gt reader csv reader s delimiter skipinitialspace
  • 通过javascript获取浏览器书签[关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 目前不接受答案 我们想为我们的客户提供在线书签服务 因此 最好还提供一个将本地书签存储到我们的在线工具中的功能 这不应该自动完成 用户应该确认此操作 仅在有人认为我
  • R 是否有像 python 一样的startswith 或endswith 函数? [关闭]

    Closed 这个问题需要细节或清晰度 目前不接受答案 gt startsWith abc a 1 TRUE gt startsWith abc c 1 FALSE gt endsWith abc a 1 FALSE gt endsWith
  • 使用 System.Net.Mail 通过 smtp 服务器加速发送多封电子邮件

    我是 C 的新手 但我从 VB Net 学到了很多关于 Windows Net 编程的知识 我刚刚制作了一个简单的 SMTP 客户端 它可以从程序发送电子邮件 它是一个控制台应用程序 一次只能通过服务器发送一封电子邮件 这非常慢 我需要通过
  • 删除列表框上的滚动条

    我在 vba 中使用 userForm 并且有一个列表框 我想删除霍罗兹 从底部滚动条 有没有办法做到这一点 我在属性框中没有看到任何选项 当您将列表框的列宽格式属性设置为宽 然后根据数据调整控件大小时 就会出现这种情况 它将显示滚动条 要
  • 我可以声明 Type 的变量而不在编译时指定 T 吗?

    如何动态加载 MyContent 类 我有 1interface
  • 如何查看表的日志数据绿屏DB2

    如何查看指定表中的日志数据 我想查看某个表在指定时间范围内发生了什么情况 我使用以下命令获取了表上的信息 DSPFD 文件 P6PRDBDB00 P6OIDPF 获得了日志名称和库 但我不知道如何查看对象 P6OIDPF I did go
  • hive 中的映射类型变量

    我在尝试在配置单元中定义地图类型时遇到问题 根据蜂巢手册肯定有地图类型 不幸的是没有任何关于如何使用它的示例 假设 我有一个包含以下列的表 用户 Name Ph CategoryName 此 CategoryName 列具有一组特定的值 现
  • 为什么在 STL 映射中用作值的类需要...中的默认构造函数?

    下面是用作映射中的值的类 class Book int m nId public Book lt Why is this required Book int id m nId id main 内部 map lt int Book gt ma
  • Android 风格传承

    事情是这样的 在我的 Styles xml 中 我有一个通用样式 并且一个样式继承了另一个样式 如下所示
  • com.thoughtworks.xstream.mapper.CannotResolveClassException

    这是我第一次尝试 XStream 但是当我尝试解析我的 xml 文件时 我得到了这个异常 Exception in thread main com thoughtworks xstream mapper CannotResolveClass
  • 如何在Java中获取Windows用户名?

    所以我想做的是让我的Java找到Windows登录的用户名 所以当我说这样的方法时 它会返回用户名 就像我在名为Noah的用户中使用它一样 java会返回 Noah 如果我在用户 Amanda 上 Java 将返回 Amanda 我该怎么做
  • 如何自定义 Spinner 下拉视图

    是否可以自定义微调器下拉视图 默认微调器下拉视图具有适配器视图 我想更改该视图以拥有自己的文本视图或类似的东西 在您的类中添加此内部类并根据需要进行修改 public class MyAdapter extends ArrayAdapter
  • 如何检查访问者是否使用最新版本的浏览器?

    是否有一种简单且自动的方法来检查我的网站 用 asp net 编写 的访问者是否使用最新版本的浏览器 这将允许我显示一条消息 通知他们他们正在运行旧版本并且他们可能想要升级 我的网站在大多数浏览器上进行了测试 但我不测试旧版本 例如 Int
  • 抓取视频的第一帧 - 缩略图分辨率 - iPhone

    我想在我的应用程序中显示视频的 静态 第一帧作为预览 我已阅读此线程并了解我可以使用缩略图 从 iPhone SDK 中的视频 URL 或数据获取缩略图 我有两个问题 1 缩略图的分辨率是多少 我希望将预览设为 4 3 格式 并想知道如果放
  • Angular 模块私有成员

    在 AngularJS 中 是否可以创建私有控制器或服务 这些控制器或服务可以在定义它们的模块中使用 但不能由它们注入的另一个模块使用 例如 是否可以将 PrivateController 设为子模块私有 angular module Ch
  • pandas:从 pandas 表中的日期中减去当前日期

    我正在尝试计算今天与由历史数据组成的 pandas 数据之间的天数差异 下面是预期的代码 df diff pd to datetime df date pd datetime now date 但是 它会产生以下错误 类型错误 不支持的操作
  • 如何使用jquery使图像沿圆形路径移动?

    在这里 我试图使图像沿圆形路径移动 但它没有沿圆形路径移动 我已经尝试过这样的缓慢移动图片 CSS friends position absolute Markup img src http jsfiddle net img logo pn