文章/答案/技术大牛

发布

社区首页 >问答首页 >jquery -模仿速度计箭头，向鼠标方向旋转箭头

问jquery -模仿速度计箭头，向鼠标方向旋转箭头
EN

Stack Overflow用户

提问于 2016-09-02 11:32:36

回答 1查看 258关注 0票数 1

我需要像这样实现一个特性：

箭头的位置取决于鼠标的位置：

当前代码从中心绕过箭头。问题:箭头应该只从左端开始旋转：

          var box=$(".box");
var boxCenter=[box.offset().left+box.width()/2, box.offset().top+box.height()/2];

$(document).mousemove(function(e){    


    var angle = Math.atan2(e.pageX- boxCenter[0],- (e.pageY- boxCenter[1]) )*(180/Math.PI);     

    box.css({ "-webkit-transform": 'rotate(' + angle + 'deg)'});    
    box.css({ '-moz-transform': 'rotate(' + angle + 'deg)'});
    box.css({ 'transform': 'rotate(' + angle + 'deg)'});

});


.box{
 background-image:url("Wheelizate Tabs - Apart left_files/tick.png");

    width: 200px;
    height: 30px;

    position: absolute;
    left: 200px;
    top: 200px;
}

  <div class="box" style="z-index:10000;margin-left: 70px;margin-top: 200px;"></div>

jsfiddle.net/tuz4y6r4/

jquery

html

css

javascript

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-09-02 11:42:56

您需要为要从左侧旋转的box指定transform-origin : center left;。默认情况下，transform-origin为center center。查看可用的fiddle https://jsfiddle.net/63qxdg3b/

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/39283898

复制

相似问题

问jquery -模仿速度计箭头，向鼠标方向旋转箭头
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jquery -模仿速度计箭头，向鼠标方向旋转箭头EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jquery -模仿速度计箭头，向鼠标方向旋转箭头
EN