jquery - 在 mousemove 上移动一个 div 到另一个 div

标签 jquery css html mousemove

我正在尝试使容器 div 内的 div 在 X 轴上沿与鼠标相反的方向移动(仅向左和向右)。

这是我目前所拥有的:

html

<div class="container">
    <div class="box"></div>
</div>

CSS

.container { width: 450px; height: 52px; border: 1px #000 solid; position: relative; }
.box { width: 50px; height: 50px; border: 1px #000 solid; position: absolute; right: 200px; }

j查询

$(document).ready(function(){
  $('div.container').mousemove(function(e){
        var x = e.pageX - this.offsetLeft;
      if ($('div.box').css('right') <= '400') {
          $('div.box').css({'right': x}); 
      }
  });
});

JSfiddle - http://jsfiddle.net/eyalbin/qQmu7/49/

由于某种原因,该功能在几秒钟后停止工作。

谁能帮忙吗

最佳答案

试试这个:JSFiddle

你写了

if ($('div.box').css('right') <= '400')

代替

if (x <= 400)

:)

关于jquery - 在 mousemove 上移动一个 div 到另一个 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19270597/

相关文章:

javascript - 颜色逐渐变化

javascript - JS,CSS)从字符串中获取字母并使每个字母顺利落下(无JQUERY

jquery - qTip2 自定义 css 问题

css - 如何防止文本扩展 <li> 容器高度?

jquery - Bootstrap 在导航下方显示搜索栏

javascript - 如何使用jquery读取json格式的数据

javascript - 未捕获的类型错误 : Cannot read property 'ready' of undefined Vimeo

javascript - 将用户选择的值从下拉菜单传递到 d3.csv

html - phpexcel 显示表(2) in html

javascript - 为 JavaScript 提供按钮的 id