天道酬勤,学无止境

Need to animate an image to move away from cursor postion on each mouseover?

I'm trying to animate an image of a box by changing it's position on mouseover.

I can get it to move once but I need to set it up so that it moves everytime someone mouses over the image. I want to make the users 'chase' the box around the screen.

Preferably the animation would loop so that a user can never catch the image ?

Here is an example of what I have so far, and below is my jQuery code:

$(document).ready(function() {
    $('#img').mouseover(function() {
        $(this).animate({
            left: '500px'
        });
    });
});

Thanks a million!

评论

Here is an example. It covers basics I guess.

jQuery(function($) {
    $('#img').mouseover(function() {
        var dWidth = $(document).width() - 100, // 100 = image width
            dHeight = $(document).height() - 100, // 100 = image height
            nextX = Math.floor(Math.random() * dWidth),
            nextY = Math.floor(Math.random() * dHeight);
        $(this).animate({ left: nextX + 'px', top: nextY + 'px' });
    });
});

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • 在使用自动布局的情况下动画/移动视图(Animating/Moving views under usage of Autolayout)
    问题 我想将视图从一个位置移动到另一个位置,我可以使用 self.view.center = CGPointMake(100, 200); 但是,如果项目使用的是“自动布局”,则运行后视图将返回到原始位置: [self.view.superview setNeedsLayout]; 那么如何实际将视图移动到新位置? 回答1 如果使用的是autoLayout,则必须更改约束。 建议的方法是在约束的视图控制器中创建出口,然后更改约束的常数。 如果您有时间,我绝对会建议您去这里并观看“示例自动布局”或“掌握自动布局的最佳做法”。 他们帮了我很多忙。 我猜想要指出的是,使用autoLayout时,您不再需要考虑框架。 因此,设置中心仅不适用于自动布局。 这都是关于视图如何相互关联的。 回答2 启用自动AutoLayout ,我们应该AutoLayout FORGET FRAMES ,只CONSIDER CONSTRAINTS 。是的,为了进行动画处理,您也不能再更改框架或中心,调用布局时视图将恢复到其原始位置。 相反,您应该consider changing the constant value of the constraint以获得相同的效果。 考虑一个如下图所示的用户界面。我有一个图像视图,该图像视图的超级视图有20 points leading space from it's
  • 用于“鼠标方向”悬停的 jQuery 动画(jQuery animation for a hover with 'mouse direction')
    问题 我正在尝试模拟将鼠标悬停在图像上的效果,叠加的半透明图像将从鼠标所在的方向淡入。 反之亦然,当您的鼠标离开图像时(淡出 + 移开) 我为此准备了一个测试页。 继续检查它,它将阐明所需的效果是什么。 我为此定义了一个 HTML 结构: <div class="overlayLink"> <img src="assets/work/thumbnails/kreatude.jpg" alt="Kreatude" /> <div class="overlayLink_overlay_bg"> </div> <div class="overlayLink_overlay_fg"> <span class="overlayLink_overlay_link"><a href="#">View Case Study</a></span> <div class="top"> </div> <div class="left"> </div> <div class="right"> </div> <div class="bottom"> </div> </div> </div> 以及以下 JS(我使用的是 jQuery): jQuery(document).ready(function () { ourWork(); }); function ourWork(){ var inHandler =
  • 在标记移动时更新 mvcarray(updating mvcarray on marker move)
    问题 我试图找出谷歌地图 v3 中的 MVCArray()。 我以 GeoJason 编写的代码为例。 我将点击事件附加到标记以获得其 LatLng 位置。 它运行良好,但如果将标记拖到新位置,我需要更新新位置上的 MVCArray。 这部分让我难住了.. 任何人都知道如何做到这一点,或者可以向我指出一个解释使用 MVCArray 的好资源? (除了代码文档,它不是为新手设计的......大声笑) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>GeoJason - Line Length and Polygon Area with Google Maps API v3 Demo</title> <meta name="keywords" content="" /> <meta name=
  • 自定义绑定的敲除滑动图像问题(Knockout sliding images issue with custom binding)
    问题 当用户将鼠标悬停在产品磁贴上时,我想在我的产品列表页面上实现滚动图像。 最初将显示第一张图像,当悬停时幻灯片将开始。 每个产品图块将有不同数量的图像用于幻灯片放映。 问题:当将鼠标悬停在一个包含五个图像的图像上时,幻灯片开始并显示第二个图像。但是第一个图像再次显示,而不是第三个图像。 下面是顺序: Number 表示图像的索引 1,2 1,2,3 1,2,3,4 1,2,3,4,5 预期:1,2,3,4,5 还观察到鼠标悬停事件未注册。 下面是代码: <div class="customized-slider-wrapper" data-bind="PLPTileSizeOnHover: $data"> <div class="customized-slider" data-bind="foreach: fullImageURLs"> <div class="individual-tile"> <img data-bind="attr: { src: $index() === 0? $data : '../file/general/show_loader_showcase.gif' }" class="product-images" /> </div> </div> </div> KO代码 ko.bindingHandlers.PLPTileSizeOnHover = {
  • 每当我在给定元素内移动鼠标时,Mouseover和mouseleave都会触发(Mouseover and mouseleave trigger every time I move the mouse inside the given element)
    问题 我正在创建一个站点,您将鼠标悬停在图像上,它显示一个元素(在这种情况下,将其高度从0扩展到154px)。 jQuery(document).ready(function(){ jQuery("#dropdown-menu-create .dropimage").mouseover(function(){ jQuery("#dropdown-menu-create .toggle").animate({height:"154px"},200); }); jQuery("#dropdown-menu-create .dropimage").mouseout(function(){ jQuery("#dropdown-menu-create .toggle").animate({height:"0"},200); }); }); 当鼠标进入时内容会扩展,而当鼠标离开时内容会折叠,但是每次在元素内移动鼠标时,内容都会反复扩展和折叠,直到鼠标离开元素为止。 我以前从未遇到过这个问题,并且过去使用过这些功能,所以我对所发生的事情一无所知。 有任何想法吗? 编辑: jQuery(document).ready(function(){ jQuery("#dropdown-menu-create .dropimage").mouseenter(function(){ jQuery("
  • RaphaelJs 饼图动画悬停(RaphaelJs Pie Chart Animation on Hover)
    问题 我正在自定义下面链接 http://raphaeljs.com/pie.html 上的 raphael 站点上给出的饼图 此图表显示悬停切片时的动画,此动画只是将切片稍微展开 我想要的是将切片与图表分开 我使用了以下代码行的转换属性,但无法按照我的意愿进行操作。 p.mouseover(function () { var xis= p.getBBox(true); p.stop().animate({transform: "s1.1 1.1 "+ cx + " " + cy }, ms, "linear"); txt.stop().animate({opacity: 1}, ms, "linear"); }).mouseout(function () { p.stop().animate({transform: ""}, ms, "linear"); txt.stop().animate({opacity: 0}, ms); }); 更改第 3 行的 cx 和 cy 实际上以相同的方式固定了每个切片的动画,也就是说,在悬停时,每个切片都会不断改变位置。 http://imageshack.us/photo/my-images/690/sliced1.png 任何人请帮我解决这个问题 回答1 如果我正确理解您的问题,您希望切片在有人将鼠标悬停在它上面时与饼图完全断开。 为此
  • updating mvcarray on marker move
    I am tryign to figure out MVCArray() in google maps v3. I'm using code written by GeoJason as an example. I attached a click event to the markers to get its LatLng postion. It works well but I need to update the MVCArray on the new postion if a marker is dragged to a new location. This part has me stumped.. Anyone know how to do this or can point me to a good resource which explains using MVCArray's? (besides coode docs, its not designed for newbies.. lol) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3
  • 如何确保 CSS :hover 应用于动态添加的元素(How to ensure CSS :hover is applied to dynamically added element)
    问题 我有一个脚本,当您将鼠标悬停在缩略图上时,该脚本会在缩略图上动态添加完整图像。 我还给完整的图像一个 CSS :hover 样式,使它们扩展到更大的宽度(通常它们被限制为缩略图的尺寸)。 如果图像加载速度快或被缓存,这可以正常工作,但是如果完整图像需要很长时间才能加载并且您在加载时没有移动鼠标,那么一旦它出现,它通常会保持在缩略图宽度(非:悬停样式),直到您再次移动鼠标。 我在我尝试过的所有浏览器中都遇到了这种行为。我想知道这是否是一个错误,以及是否有办法修复或解决它。 可能值得注意的是,我也尝试在 Javascript 中使用.on('mouseenter')做同样的事情,并遇到了同样的问题。 由于问题的性质,很难重现,特别是如果您的连接速度很快。 我从维基百科中选择了一张较大的照片进行演示,但要使其正常工作,您可能需要将其更改为特别大的照片或来自慢域的照片。 另请注意,您可能必须清除缓存以进行连续重试。 如果仍然无法重现,你可以人工延迟添加到fullimage.load调用之前anchor.show() HTML: <img id="image" src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/32/Cairo_International_Stadium.jpg/220px-Cairo
  • 使用 jQuery 制作动画时失去悬停(不移动鼠标)(Losing hover when animating with jQuery (without moving mouse))
    问题 我有我正在用 jQuery 制作动画的这一行缩略图。 这些缩略图中的每一个都有一个悬停和活动类。 它们工作正常,但是当我为列表设置动画时,鼠标光标下的新缩略图不应用悬停? 每次点击后我都必须稍微移动鼠标吗? 这有点难以解释..我在这里做了一个小提琴:http://jsfiddle.net/nZGYA/ 当你开始点击拇指 3 而不移动鼠标时,你明白我的意思...... 它在 FireFox、非 Safari、Chrome、IE 等中运行良好。 我能做些什么吗? 供参考,这是我的代码: <style type="text/css"> .container { position: relative; overflow: hidden; width: 140px; height: 460px; float: left; margin-right: 100px; background: silver; } ul { position: absolute; top: 10; list-style: none; margin: 10px; padding: 0; } li { margin-bottom: 10px; width: 120px; height: 80px; background: gray; } #list-2 li a { display: block; width
  • 如何避免大量 onmouseover onmouseout 触发?(How do I avoid massive onmouseover onmouseout firing?)
    问题 我有一个包含一些列的表。 在每张图片中,我都有一个 onmouseover/onmouseout 事件,它在 div 中显示一条消息并隐藏该消息。 我的问题是,当用户在大量图像上从左到右快速移动后,图像的所有 mouseover 和 mouseout 事件都被执行,这看起来很愚蠢...... 是否可以重新排列内部事件堆栈以避免这种情况,以便用户仅执行当前事件(主要是第一个)然后是最后一个,如果它不是相同的类型? 例如,如果鼠标悬停在第一个图像上,并且鼠标移动位置在第一个图像旁边的图像上停留了三次。 我可以避免触发所有其他事件,因为鼠标停在图像上,而鼠标悬停就像我用鼠标停在的地方。 如何避免这种多事件触发? 回答1 您需要查看解决此问题的 hoverIntent 插件。 回答2 我们遇到了完全相同的问题,我们在 mouseover 事件上所做的是将变量 _mouseOn 设置为 true(在 mouseout 时设置为 false),然后设置一个 oneTime 事件,该事件在 500 毫秒内触发。 time 事件将检查 _mouseOn 是否为真并显示图像 function Hover() { _mouseOn = true; $(document).oneTime(500, "500ms"
  • 使用Javascript加载页面时检测鼠标是否在元素上(Detect if mouse is over an element when page loads with Javascript)
    问题 我有一个图像,我想在鼠标悬停时触发某些行为,我有一个鼠标悬停和鼠标移出方法,但是如果您在页面加载时碰巧将鼠标悬停在图像上,则鼠标悬停方法永远不会触发,直到您离开图像并返回。 有没有一种方法可以动态检测鼠标是否在元素上,而无需鼠标离开元素,然后在元素上触发 JS 鼠标悬停事件? 就像 Javascript 中有 document.getElementById("blah").mouseIsOver() 类型的函数吗? 回答1 我相信这是可能的,无需用户采取任何行动。 当您的页面加载时,将mouseover事件绑定到您的图像并隐藏您的图像(即使用 CSS display:none )。 使用setTimeout()在几毫秒内再次显示它(10 应该足够了)。 甚至应该被解雇。 如果您不想在您的图像上造成“轻弹”效果,您可以尝试使用一些临时元素,将事件附加到它,并将事件委托给您的图像。 我不知道这是否是跨浏览器解决方案,但它在我的 Firefox 3.0 控制台上运行;) 回答2 您可以使用 mousemove 事件。 这将在用户移动鼠标时触发; 所以触发器没有触发的唯一实例是用户根本不移动鼠标,这应该很少见。 唯一的问题是,只要鼠标移到您的图像上,该事件就会触发,因此您会在组件上获得很多这些事件。 您可能需要做的是在事件触发时在您的方法中实现某种标志。
  • 使用Jquery进行鼠标悬停时放大图像吗?(Enlarging images when mouseover using Jquery?)
    问题 我试图在鼠标悬停时放大图像,并在鼠标悬停后将尺寸减小回正常。 我有以下内容: $('#image img').live("mouseover", function(){ var $this=$(this); $this.attr('width','25%'); $this.attr('height','25%'); }) 放大部分工作正常,但我不确定如何将鼠标移出后减小尺寸。 另外,我认为我的代码有点丑陋,不确定如何解决。 非常感谢。 回答1 尝试以下操作:http://jsfiddle.net/FPKAP/11/或使用鼠标悬停:http://jsfiddle.net/FPKAP/12/ 当您将鼠标悬停在HULK上时,它将放大并在鼠标移出时将其缩小。 这应该可以满足需要,让我知道我是否误解了:) 代码 $('#zoomimg').mouseenter(function() { $(this).css("cursor","pointer"); $(this).animate({width: "50%", height: "50%"}, 'slow'); }); $('#zoomimg').mouseleave(function() { $(this).animate({width: "28%"}, 'slow'); }); 代码 $('#zoomimg').hover
  • Mouseover and mouseleave trigger every time I move the mouse inside the given element
    I am creating a site where you hover the mouse over an image and it shows an element (in this case by expanding its height from 0 to 154px). jQuery(document).ready(function(){ jQuery("#dropdown-menu-create .dropimage").mouseover(function(){ jQuery("#dropdown-menu-create .toggle").animate({height:"154px"},200); }); jQuery("#dropdown-menu-create .dropimage").mouseout(function(){ jQuery("#dropdown-menu-create .toggle").animate({height:"0"},200); }); }); The content expands when the mouse enters and collapses when the mouse leaves, but every time the mouse is moved within the element the content
  • vue-draggable 实现拖拽效果的使用方法
    Vue.Draggable是一款基于Sortable.js实现的vue拖拽插件。支持移动设备、拖拽和选择文本、智能滚动,可以在不同列表间拖拽、不依赖jQuery为基础、vue 2过渡动画兼容、支持撤销操作,总之是一款非常优秀的vue拖拽组件。本篇将介绍如何搭建环境及简单的例子,使用起来特别简单对被拖拽元素也没有CSS样式的特殊要求。 官方网站地址1 官方网站地址2 安装方式 yarn add vuedraggable npm i -S vuedraggable 属性说明 属性名称说明group:group= “name”,相同的组之间可以相互拖拽sort:sort= “true”,是否开启内部排序,如果设置为false,它所在组无法排序,在其他组可以拖动排序delay:delay= “0”, 鼠标按下后多久可以拖拽touchStartThreshold鼠标移动多少px才能拖动元素disabled:disabled= “true”,是否启用拖拽组件animation拖动时的动画效果,还是很酷的,数字类型。如设置animation=1000表示1秒过渡动画效果handle:handle=".mover" 只有当鼠标移动到css为mover类的元素上才能拖动filter:filter=".unmover" 设置了unmover样式的元素不允许拖动draggable:draggable="
  • 即使元素已经消失,在过渡期间也保持悬停状态(Hover state is maintained during a transition even if the element has gone)
    问题 考虑一个简单的元素及其相关的 CSS: <div id="content">Hover me !</div> #content { width: 100px; height: 100px; } #content:hover { transform: translateY(500px); transition: transform 1s 500ms; } JSFiddle 原理很简单:当元素悬停时,它必须下降。 问题是,当鼠标不移动时,即使元素不再物理地位于鼠标下方(由于翻译), :hover状态也会保持不变。 状态似乎只有在鼠标移动后才会更新。 注意光标(一个指针)及其与元素的相对位置! 当一个 JavaScript 函数必须在timeout后仅当鼠标位于元素上时才必须执行时,这是一个真正的问题: // The mouseleave event will not be called during the transition, // unless the mouse move ! element.on('mouseenter', executeAfterTimeout); element.on('mouseleave', cancelTimeout); 所以这里是我的问题: 这种行为是否正常(符合规范)? 避免此问题的解决方案是什么? 编辑:为了给你一个上下文
  • 在mouseover和mouseout上显示hide div(show hide div on mouseover and mouseout)
    问题 <script type="text/javascript"> function show_sidebar() { document.getElementById('sidebar').style.visibility="visible"; } function hide_sidebar() { document.getElementById('sidebar').style.visibility="hidden"; } </script> <img src="images/cart.jpg" width="80px" height="30px" onMouseOver="show_sidebar()" onMouseOut="hide_sidebar()"> <div id="sidebar">some thing</div> 这是我的代码,用于在mouseover和mouseout上显示和隐藏侧边栏div。 它的工作,但我想要的是当我在图像上有鼠标悬停时,显示了侧边栏div,并且当鼠标悬停在侧边栏上时,我还希望显示侧边栏div。 你该怎么做。 回答1 将事件处理程序移至wrapper div以完成所需的操作。 <div id="wrapper" onMouseOver="show_sidebar()" onMouseOut="hide_sidebar()"> <img
  • Primefaces overlayPanel的延迟问题-延迟加载(Latency issue with Primefaces overlayPanel - loads to lazy)
    问题 我正在将Primefaces 3.2与jsf 2和glassfish 3.1.2一起使用。 我有包含用户化身的ap:dataTable用户。 每当用户将鼠标移到头像ap上时,overlayPanel就会在用户身上显示更多信息(延迟加载),并在用户将光标移开时消失: <p:overlayPanel for="avatar" dynamic="true" showEvent="mouseover" hideEvent="mouseout" ...> 只要用户是“慢手”,它就可以很好地工作。 每当用户将光标快速移动到许多化身上方时,许多overlayPanel便保持可见。 例如,当用户将光标放在显示用户化身的位置上并使用其鼠标的滚轮向下或向上滚动用户表时。 我相信,当showEvent="mouseover"时, showEvent="mouseover"从服务器dynamic="true"加载信息( dynamic="true" ),并在服务器响应到达后显示overlaypanel。 这样,当覆盖面板变为可见时,无法检测到光标是否已经离开-从而从不调度hideEvent="mouseout" 。 有没有一种方法可以使质素覆盖面板直接显示在Mousover上,显示加载的gif,并在响应来自服务器时将内容更新到覆盖面板中。
  • Latency issue with Primefaces overlayPanel - loads to lazy
    I am using Primefaces 3.2 with jsf 2 and glassfish 3.1.2. I have a p:dataTable of users containing avatars of the user. Whenever the user moves the mouse over the avatar a p:overlayPanel appears with more information (lazy loaded) on the user, and disappears when the user moves the cursor away - like this: <p:overlayPanel for="avatar" dynamic="true" showEvent="mouseover" hideEvent="mouseout" ...> This works very well - as long as the user is "slowhanded". Whenever an user moves the cursor fast above many avatars many of the overlayPanels stay visible. For example when the user has the cursor
  • 如何根据光标悬停移动背景?(how to move background according to cursor hover?)
    问题 当光标悬停在滑块上时,背景也会随着光标悬停而移动。(下面的链接) 这是使用此效果的网站链接。 泰勒马鲁克 这种效果叫什么? 以及如何达到这个效果? 任何有用的链接请它是某种 jquery 插件或简单的 css3 效果。 我想不通请帮忙。 回答1 我刚刚创建了一个 Fiddle 来向您展示我对您问题的评论的意思。 你应该可以从那里走得更远。 document.addEventListener('mousemove', function (event) { if (window.event) { // IE fix event = window.event; } // Grab the mouse's X-position. var mousex = event.clientX; var header = document.getElementById('header'); header.style.backgroundPosition = mousex/3 + 'px 0'; }, false); 至于解释这里发生了什么: 它在document上的mousemove事件上绑定了一个函数。 它使用event.clientX抓取当前鼠标位置。 它以 1/3 的速度( mousex/3 )更改元素#header的背景位置。 现场检查: FIDDLE
  • 如何在鼠标悬停上为 CSS 动画汉堡图标设置动画(How To Animate CSS Animated Hamburger Icon On MouseOver)
    问题 我在 http://elijahmanor.com/css-animated-hamburger-icon/ 有一个动画 CSS 汉堡图标,我想使用它,但我想通过悬停来使用它来查看 set ex(x) 以及何时不悬停将其设置为 3 行的默认样式。 但即使我使用了悬停功能,我也无法做到这一点。 document.querySelector("#nav-toggle") .addEventListener("click", function() { this.classList.toggle("active"); }); #nav-toggle { position: absolute; left: 50%; top: 50%; } #nav-toggle { cursor: pointer; padding: 10px 35px 16px 0px; } #nav-toggle span, #nav-toggle span:before, #nav-toggle span:after { cursor: pointer; border-radius: 1px; height: 5px; width: 35px; background: black; position: absolute; display: block; content: ''; } #nav-toggle