小编Sto*_*der的帖子

JavaScript如何通过单击和拖动动态移动Div

好吧,它看起来应该很简单.我需要取一个已经存在的div并根据窗口内的鼠标位置移动它.我到处搜索过,它让我采用过于复杂的方式做同样的事情,并涉及使用j-query.我需要严格使用javascript来实现我的目标.

方法 :

var mousePosition;
var div;

(function createDiv(){

    div = document.createElement("div");
    div.style.position = "absolute";
    div.style.left = "0px";
    div.style.top = "0px";
    div.style.width = "100px";
    div.style.height = "100px";
    div.style.background = "red";
    div.style.color = "blue";

    div.addEventListener('mousedown', handleKeyPressed, true);

    document.body.appendChild(div);


})();

function handleKeyPressed(event) {

    event.preventDefault();

    mousePosition = {

        x : event.clientX,
        y : event.clientY

    };

    div.style.left = mousePosition.x;
    div.style.top = mousePosition.y;

    //alert("whoa!");

}
Run Code Online (Sandbox Code Playgroud)

html javascript onmousedown

26
推荐指数
4
解决办法
4万
查看次数

GSAP绩效与结构

GSAP声称使用HTML5为Web使用执行出色的动画,但在Greensock.com上的文章中明确表示它不使用html5中的画布框架.很明显,他们正在使用提供的脚本中的 Javascript ,但解释起来非常困惑.在没有画布的情况下,他们会以什么方式使用html5动画?如果他们确实使用纯HTML5,这是否意味着HTML5动画明显比CSS,jQuery和Javascript快?

javascript css jquery html5 canvas

4
推荐指数
1
解决办法
1891
查看次数

标签 统计

javascript ×2

canvas ×1

css ×1

html ×1

html5 ×1

jquery ×1

onmousedown ×1