Este artigo descreve o método de ampliação, redução e arrastamento de imagens por JS. Compartilhe -o para sua referência, como segue:
var divid; var v_left; var v_top; window.onload = function () {divid = document.getElementById ("block1"); var altion1 = imagens1.Height; // A altura da imagem var width1 = imagens1.width; // a largura da imagem v_left = (document.body.clientWidth-width1)/2; v_top = (document.body.clientHeight-Hight1) /2 ;divid.style.left=v_left ;divid.style.top=v_top;} drag = 0; move = 0; isdrag = false; var y, x; var odragobj; função movemouse (e) {if (isdrag) {odragobj.style.top = (nn6? nty + e.clienty - y: nty + event.clienty - y) + "px"; odRagobj.style.left = (nn6 (y) + "px"; odroGobj.style.left = (nn6 (y) + "px"; odRagobj.style.left = (nn6 (y) + "px"; odroGObJ.style.left = (nn6 nn6 (s) +. - x) + "px"; retorna false;}} // função do método de arrasto initdrag (e) {var odraghandle = nn6? E.Target: Event.SrCeLEMENT; var topeLement = "html"; while (odraghandle.tagname! = topeLement && odraghandle.classname! = "dragable") {odraghandle = nn6? odraghandle.parentNode: odraghandle.parenteLement;} if (odraghandle.className == "dragtable") {isdrag = true; odragobj = odragHandle; nty = parseint (odragobj.style.top + 0); y = nn6? e.clienty: event.clienty; ntx = parseint (odragobj.style.left + 0); x = nn6? e.clientX: event.clientX; document.onMouSemove = movemouse; // document.onMouseUp = mup; // O evento acontecerá quando o botão do mouse for lançado;}} document.onMouDown = initdrag; document.onmouseup = new Função ("isdrag = false") // função slickMove (s) {se parseInt(dragObj.style.top) + 100;} else {if (s == "down") {dragObj.style.top = parseInt(dragObj.style.top) - 100;} else {if (s == "left") {dragObj.style.left = parseInt(dragObj.style.left) + 100;} else {if (s == "Right") {dragobj.style.left = parseInt (dragobj.style.left) - 100;}}}}}} // encolher múltiplas função smallit () {// imagem encolhida, perca a altura do ponto quente1 = imagens1.height; width1 = imagens1.width; imagens1.height1 = altura1 = imagens1.height; width1 = imagens1.Width; 1.1;} // zoom function bigit () {/*// zoom a imagem, sem perder o ponto quente var zoom = parseint (imagens1.style.zoom, 10) || 100; zoom += event.weeldelta/ 12; if (zoom> 0) {imagens1.style.zoom = (zoom +10) +"%";} * /// zoom e perdem o hotspot altura1 = imagens1.Height; width1 = imagens1.width; imagens1.Height1; {imagens1.style.zoom = 100+"%"; imagens1.Height = imagens2.Height; imagens1.width = imagens2.width; divid.style.left = v_left; divid.style.top = v_top;} função featsize () {var width1 = imagens2.Width; = altura1 / altura2; var w = width1 / width2; if (altura1 <altura2 && width1 <width2) {imagens1.Height = altura1; imagens1.width = width1;} else {if (h> w) {imagens1.height = height2; imagens1.width = width1 * altura2 / altura; altura1 * width2/width1;}} block1.style.left = 0; block1.style.top = 0;} // Rouse Zoom de zoom e saída da função bbimg (o) {/ * var eleleftlement; var eletop; if (document.documentElement) {eLeleft = Document.Document; document.documentElement.scrolltop;} else {Eleleft = document.body.scrollleft; eletop = document.body.scrolltop;} v_left+= eleleft; v_top+= eletop; // divid.style.left = v_left; // divid.style.top = v_top; alert (document.documentElement.scrolloPop+"----- xxx"+ parseint (o.style.zoom, 10) || 100; zoom + = event.weeldelta / 12; if (zoom> 0) {o.style.zoom = zoom + "%";} retorna false;}Para obter mais informações sobre o conteúdo relacionado ao JavaScript, consulte os tópicos deste site: "Javascript com os efeitos e técnicas especiais", "Javascript Animation Efeitos e técnicas especiais resumo", "Javascript Search Algorithm Skills Summary", Javascript Data Structure e Algorithm Skills Summary "," " Resumo "," Erros de JavaScript e Resumo das Habilidades de Deburgação "e" Javascript Mathematical Operation Uso Resumo "
Espero que este artigo seja útil para a programação JavaScript de todos.