この記事では、JSによる写真の拡大、削減、ドラッグの方法について説明します。次のように、参照のために共有してください。
var divid; var v_left; var v_top; window.onload = function（）{document = document.getElementbyId（ "block1"）; var height1 = images1.height; //画像の高さvar width1 = images1.width; //画像の幅v_left =（document.body.clientwidth-width1）/2; v_top =（document.body.clientheight-height1）/2; divid.style.left=v_left; divid.style.top = vtop;} drag = 0; move = 0 ;/ dragy object var ie = document.all n6; isdrag = false; var y、x; var odragobj; function movemouse（e）{if（isdrag）{odragobj.style.top =（nn6？nty + e.clienty -y：nty + event.clienty -y） + "px"; odragobj.style.leientx =（Nn6？ -x） + "px"; return false;}} //ドラッグメソッド関数initdrag（e）{var odraghandle = nn6？ e.target：event.srcelement; var topelement = "html"; while（odraghandle.tagname！= topelement && odraghandle.classname！= "radable"）{odraghandle = nn6？ odraghandle.parentnode：odraghandle.parentelement;} if（odraghandle.classname == "radable"）{isdrag = true; odragobj = odraghandle; ntyint（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; //マウスボタンがリリースされたときにイベントが発生します。 parseint（dragobj.style.top） + 100;} else {if（s == "down"）{dragobj.style.top = parseint（dragobj.style.top）-100;} "right"）{dragobj.style.left = parseint（dragobj.style.left）-100;}}}}}}} //複数関数smallit（）{//縮小画像、shrink height1 = images1.height; width1 = images1.width; imageight1/1.1; 1.1;} // Zoom関数bigit（）{/*//イメージをズームします。 100; zoom += event.wheeldelta/ 12; if（zoom> 0）{images1.style.zoom =（zoom +10） +"％";} * /// zoom in and lose hotspot height1 = images1.height; RealSize（）{Images1.Style.Zoom = 100+"％"; images1.height = images2.height; image1.width = images2.width; divid.style.left = v_left; divid.style.top = v_top;}機能featize（）{var width1 = images fid2.widt2.widt2.widt2.widt2.widt2.widt2.whight2.width1 = images = 360; var height2 = 200; var h = height1 / height2; var w = width1 / width2; if（height1 <height2 && width1 <width2）{images1.height = height1; images1.width = width1;} else {if（h> w）{hights1.height = height1; height1; width1; width1 * {images1.width = width2; images1.height = height1 * width2/width1;}} block1.style.left = 0; block1.style.top = 0;} //マウスホイールズームインおよびアウト関数bbimg（o）{/ * var eleleft; var eletop; if（documentedelete = docmentlet document.documentelement.scrollleft; eletop = 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.documentlement.scrolltop+"----- xxx parseint（o.style.zoom、10）|| 100; zoom + = event.wheeldelta / 12; if（zoom> 0）{o.style.zoom = zoom + "％";} return false;}JavaScript関連のコンテンツの詳細については、このサイトのトピックをご覧ください：「JavaScriptのスイッチングスペシャルエフェクトとテクニックの要約」、「JavaScript Animation Special Effectse and Techniques Summary」、「JavaScript Search Algorithm Skillary」、「JavaScriptデータ構造とアルゴリズムスキルの概要」、「JavaScript Traversmmadm and "JavaScript Traversmの操作」" Javascript raversm conderiques formerispas "Javascript conderiques" Javasprica概要 "、" JavaScriptエラーとデバッグスキルの要約]および「JavaScript数学操作の使用概要」
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。