Estou um pouco feliz hoje. O blog do CSDN tem mais de 10.000 visualizações. Eu nunca tive um número tão alto de visualizações no passado. Devo dizer que ainda sou um pouco pretensioso com muita frequência, mas ainda não posso deixar de ser feliz quando vejo esse incentivo. Pelo menos, isso me faz sentir como uma pessoa na indústria. Eu não estou sozinho.
Sem mais delongas, continue a gravação de hoje, registre as marcas de arrasto de reprodução e analise -a do processo:
1. Para reproduzir marcas de arrasto, você deve primeiro gravá -las;
2. Para registrar traços de arrasto, o arrasto deve ser implementado;
Esse problema foi feito alguns dias atrás, e era um pouco falho naquela época, mas o método de implementação geral ficou claro, então hoje eu percebi esse problema muito mais rápido. Fiquei muito feliz. Depois de perceber novamente hoje, entendi um pouco mais fundo, então vou gravar hoje;
Quanto à gravação de traços de arrasto, essa análise será curta, afinal, eu fiz isso uma vez:
1. Determine a posição atual e o status da div para garantir que o absoluto possa ser usado para arrastar;
2. Ouça os eventos de arrasto do mouse (vários eventos de mouse resumidos ontem);
3. Faça uma resposta correspondente com base no evento correspondente do mouse e registre os pontos em que a div existe no arrasto e soltar o OnMouseMove;
4. Ouça o evento de salto do mouse para encerrar o evento de arrasto e o registro de pontos
De qualquer forma, vamos implementar o seguinte código primeiro (todos os códigos estão listados aqui ao mesmo tempo e analisados um a um depois):
Idioma HTML:
<div id = "ShowZone"> </div> // Isso ainda é tão familiar <a href = "#" style = "posição: absoluto; margin-top: 100px; cor: amarelo; cor de fundo: vermelho;"> reback </a> // Isso é reproduzido e para trás.
Javascript Part:
window.onload = function () {var obj = document.getElementById ("ShowZone"); var disx = disy = 0; var dragif = false; var position = [{x: obj.offsetleft, y: obj.offsettop}]; // Essa é a chave para implementar a gravação e a reprodução, e os outros estão obtendo elementos básicos var oa = document.getElementsByTagName ("a") [0]; obj.onMousedown = function (evento) {var event = event || window.event; disx = event.clientx-obj.offsetleft; // a distância do mouse até a fronteira div dragif = true; // a posição do sinalizador. }; document.onMousEMove = function (Event) {if (! dragif) return; // Este julgamento é extremamente importante, apenas o movimento pressionado pode ser válido Var Event = Event || window.event; var nowx = event.clientx-Disx; // De acordo com a distância do mouse registrado acima à div, você pode conhecer a distância da div até a página da web var nowy = event.clienty-disy; var maxx = document.documentElement.clientWidth-obj.offsetWidth; // Isso é offsetWidth, que é a largura do div, não compensar Var maxy = document.documentElement.clientHeight-obj.offSethEight; Nowx = Nowx <0? 0: Nowx; // Esses julgamentos são apenas para julgar que não há limite agora = agora <0? 0: Nowy; Nowx = Nowx> maxx? maxx: Nowx; Nowy = Nowy> maxy? Maxy: Nowy; obj.style.margintop = obj.style.marginleft = 0; obj.style.left = Nowx+"px"; // não se esqueça+"px", apenas style.left/top é obj.style.style.top = agora+"px" com "px"; position.push ({x: Nowx, y: nowy}); // grava obj.innerhtml = "x:"+Nowx+"y:"+Nowy; // ver alterações retornar intuitivamente false; }; document.onmouseup = function () {dragif = false; // arrastar e gravar obj.innerhtml = "x:"+obj.offsetleft+"y:"+obj.offsettop; }; oa.OnClick = function () {if (position.Length == 1) return; // Quando houver apenas um, isso significa que o timer var não é movido. = setInterval (function () {var opos = posicion.pop (); oppos? (obj.style.left = oppos.x + "px", obj.style.top = opos.y + "px"): clearInterval (timer); // outro surpreso por esta redação}, 30); retornar falso; }; };Alguns pontos -chave para prestar atenção:
1. VAR Array de posição, conjunto de pontos: esse ponto é o ponto de movimento no canto superior esquerdo da div, ou seja, a trajetória do movimento que registramos é na verdade o conjunto de pontos no canto superior esquerdo da div, o deslocamento é o coordenado X, o offsettop é o y coordenando, você sabe como desenhar esse eixo coordenado;
2. Vários comprimentos ou distâncias que aparecem no programa: Offsetleft, ClientX, OffsetWidth, style.left, document.documentElement.clientwidth, etc.;
3. Método push (): adicione elementos ao final da matriz, altere o comprimento da matriz e final;
4. Método pop (): Exclua e retorne o último elemento da matriz. Existem dois pontos -chave, um: retorne o último elemento; o outro: exclua o elemento e o comprimento da matriz se torna menor;
Dessa forma, percebemos reprodução para trás, para que não há necessidade de mencionar o princípio da implementação. Se tivermos reprodução direta, devemos obter e excluir o primeiro valor da matriz? Haha, tente escrever e ler.
Devo dizer que é mais confortável arrastar com o mouse. É inconveniente demais mover o teclado. Você pode arrastar e arrastar com o mouse sem escrúpulos ... o céu já está atordoado e vai ficar quente, mas hoje está bem ...