开发者社区> 问答> 正文

请问除了 onmousemove 拖拽,能否设置网页元素沿着既定路线运动呢(例如弧线)?

想设置一些动态效果,但技术比较渣,只知道一些鼠标拖拽和直线运动的设置方式,想请教能否通过 transform 、 transition 或 animate 等来实现既定路线运动,还望各位不吝赐教,谢谢~

展开
收起
杨冬芳 2016-06-12 10:19:52 2037 0
1 条回答
写回答
取消 提交回答
  • IT从业

    animate可以的。
    需要你事先写一个数组来存放轨迹,然后通过更改top,left(或者translateX,translateY)来实现路线运动。
    我做了个球按圆形轨迹旋转的demo,可以参考下。

    var track=[];
        
    var radius=50; //圆圈路径半径
    var startX=50,startY=50; //起始位置
    
    for(var i=0;i<360;i+=5){
        var rad=i*Math.PI/180; //计算弧度
        var x=startX+radius*Math.cos(rad);
        var y=startY+radius*Math.sin(rad);
        track.push(x,y)
    }
    
        
    var run=(function(){
        for(var i=0,l=track.length;i<l;i+=2){
            $('.ball').animate({top:track[i]+"px",left:track[i+1]+"px"},30);
        }
    })();

    screenshot

    2019-07-17 19:33:18
    赞同 展开评论 打赏
问答地址:
问答排行榜
最热
最新

相关电子书

更多
3D动画的菜谱式灯光与云渲染 立即下载
营销设计场景下的图像和文字生成 立即下载
复杂环境下的视觉同时定位与地图构建 立即下载

相关实验场景

更多