이 기사에서는 반사 줌 디스플레이 기능을 갖춘 이미지의 수평 행의 JS 구현에 대해 설명합니다. 다음과 같이 참조에 대해 공유하십시오.
<! doctype html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <head> <meta http-equiv = "content-type"content = "text/html; charset = utf-8"/> <title> js는 중앙에 반사를 보여주고 Zoom을 표시하고 특수 효과를 표시합니다. http-equiv = "imagetoolbar"content = "no" /> <style type = "text /css"> html {오버 플로우 : hidden;} body {margin : 0px; padding : 0px; 배경 : #000; 너비 : 100%; 높이 : 100%;} #imageflow {width : 100%; 10%; 배경 :#000;}#imageFlow .Diapo {위치 : 절대; 왼쪽 : -1000px; 커서 : 포인터; -ms-interpolation-mode : interpolation-mode : interpolation-mode : interpolation-mode : indageflow .link {테두리 : 점선 #fff 1px; margin-let : -1px; HIDDEN;} #imageFlow .Top {위치 : 절대; 너비; 너비 : 100%; 높이 : 2%; 배경 : #003366;} #imageFlow .Text {위치 : 절대; 왼쪽 : 0px; 폭 : 100%; 하단 : -12px; 텍스트-알표 : 중심; 색상 : #ffff; sans-serif; z-index : 1000;}#imageFlow .Title {font-size : 0.9EM; font-weight : bold;}#imageFlow .Legend {font-size : 0.8EM;}#imageFlow .Scrollbar {averute; 왼쪽; 왼쪽; 10%: 10%; 1000;}#imageFlow .Track {위치 : 절대; 왼쪽; 왼쪽; 왼쪽; 너비 : 98%; 높이 : 16px; 필터 : 알파 (incacity = 30); 불투명도 : 0.3;}#imageFlow .Arrow-left {위치 : APLEST; 16px; 왼쪽 : 25px;} </style> <script type = "text/javaScript"> var imf = function () {var lf = 0; var instances = []; function getElementsByClass (Object, Tag, ClassName) {var O = Object.getElementsByTagName (tag); (o [i] .classname == className) ret.push (o [i]); if (ret.length == 1) ret = ret [0]; return ret;} function addevent (o, e, f) {if (winde f);} 함수 createreflexion (cont, img) {var flx = false; if (docut flx.getContext ( "2d"); Context.TransLate (0, img.height); Context.Scale (1, -1); Context.DrawImage (img, 0, 0, img.width, img.height); context.globalcompositeOperation = "destination -out"; var gradient = createLinear gradient (0, img). 2); gradient.addcolorstop (1, "rgba (255, 255, 255, 0)"; Gradient.addcolorstop (0, "rgba (255, 255, 255, 1)"; context.fillStyle = 컨텍스트; fillxt.fillRect (0, 0, img.width, img. dximagetransform --- */flx = document.createElement ( 'img'); flx.src = img.src; flx.style.filter = 'flipv progid : dximagetransform.microsoft.alpha (' +'eficacity = 50, style = 1, finishtex = 0, startx = 0, finishingx = 0, finishing x = 0, finishingx = 0, *.25) + ')';}/ *--- 삽입 반사 --- */flx.style.position = '절대'; flx.style.left = '-1000px'; cont.appendChild (flx); return flx;} function imageFlow (ocont, size, Zoom, Porder) {this. this. this.Scr =; size; this.scr =; Zoom; this.bdw = border; this.ocont = ocont; this.oc = docut 'title'); this.legend = getElementsByClass (this.text, 'div', 'legend'); this.bar = getElementsByClass (this.oc, 'img', 'bar'); this.Arl = getElementsByClass (this.oc, 'img', 'arrow-left'); 'Arrow -Left'); this.arr = getElementsByclass (this.oc, 'img', 'arrow -right'); this.bw = this.bar.width; this.alw = this.arl.width -5; this. this.width -5; this.bar.parent = this.oc.parent = this; this; this.view = this.back = -1; this.resize (); this.oc.onselectstart = function () {return false; . + ' -', o.innerhtml || o.href || ','_self ');}/ * ==== {this.parent.scroll (-e.detail);}, false); else.oc.onmousewheel = function () {this.parent.scroll (event.wheeldelta);}/ * ==== scrollbar draw === */this.bar.onmousedown = function (e) {e) e. this.offsetleft; var self = this. this. this. this./ * --- 이동 막대 --- */this.parent.oc.onmouseMove = function (e) {if (! e) e = wind 'px'; self.view = math.round ((((E.Screenx -scl)))/(self.ws -self.alw - self.bw) * self.nf); if (self.view! = self.back) self.calc (); return false;}/ * --- release scrollbar --- */this.oc.onmouseup = function (e). {self.oc.onmouseMove = null; return false;} return false;}/ * ==== 오른쪽 화살표 === */throw === */this.onclick = this.ar.OndBlClick = function () {if (this.parent.view <this.parent.nf -1) this.parent.calc (1); = this.arl.ondBlClick = function () {if (this.parent.view> 0) this.parent.calc (-1);}} im && o.loaded) {/ * --- 재설정 --- */var ob = this.diapos [this.back]; if (ob && ob! = o) {ob.img.classname = 'diapo'; ob.z1 = 1;}/ * --- 업데이트 범례 --- */this.title.replacechild (o.titextle), this.title.firstchild); this.legend.replacechild (document.creatextnode (o.text), this.legend.firstchild);/ * --- HyperLink --- */if (o.url) {hyperlink = 'hyperlink =' + o.uurl). {O.img.classname = 'diapo'; wind this.bdw; for (var i = this.view +1, o; o = this.diapos [i]; i ++) {if (o.loaded) {o.x1 = x; o.w1 = (this.ht / 또는) * this.size; x += O.w1 +this.bdw; tw += o.w1 +this.bdw; i = view -1, o = this.diapos [i] {if (o.loaded) {ht / or) * theize; o.x1 = x -o.w1; Scrollbar --- */if (! this.scr && tw) {var r = (this.ws -this.alw - this. this. this.bw)/tw; this.bar.style.left = math.round (this.alw + lw * r) + 'px';}/ * -------- * this.back = this. mousewheel 스크롤 === */스크롤 : function (sc) {if (sc <0) {if (this.view <this.nf -1) this.calc (1);} else {if (this.view> 0) this.calc (-1);}},/ *========================== this.oc.clientWidth; this.ht = this.oc.clientHeight; this.ws = this.scrollbar.offsetWidth; this.calc (); this.run (true);},/ * ==== 모든 이미지를 make ==== */run : var i = this.nf; this.diapos [i] .move (res);}} diapo = function (parent, n, src, title, text, url, target) {this.parent = parent; this.loaded = false; this.title = title; this.text = text; document.createelement ( 'IMG'); this.img.src = src; this.img.parent = this; this.img.className = 'diapo'; this.x0 = this.parent.oc.clientWidth; x1 = this.x0; this.w0 = 0; this.w1 = 0; this.mg.parent = 1; this; this.img.onclick = function () {this.parent.click (); } this.parent.oc.appendChild (this.img);/ * --- 표시 외부 링크 --- */if (url) {this.img.onmouseOver = function () {this.className = 'diapo link'; } this.img.onmouseout = function () {this.className = 'diapo'; }}} diapo.prototype = {/* ==== html 렌더링 ====*/move : function (res) {if (this.loaded) {var sx = this.x1- this.x0; var sw = this.w1- this.w0; if (math.abs (sx)> 2 || sw) (sw)> - -) | */this.x0 += sx * .1; this.w0 += sw * .1; if (this.x0 <this.parent.wh && this.x0 +th리 math.round (this.x0) + 'px'; o.bottom = math.floor (this.parent.ht * .25) + 'px'; o.width = math.round (this.w0) + 'px'; o.height = math.round (h) + 'px';/ * --- 반사성 --- */if (var of) {var o. this.flx.style; o.left = math.round (this.x0) + 'px'; o.top = math.ceil (this.parent.ht * .75 + 1) + 'px'; o.width = math.round (this.w0) + 'px'; o.height = math.round (h) + 'px'; --- */if (this.visible) {this.visible = false; this.img.style.width = '0px'; if (this.flx) this.flx.style.width = '0px';}}} else {/ * === image onload === */if (this.imgplete &&-get.width) */this.iw = this.img.width; this.ih = this.img.height; this.r = this.r = this.ih/this.iw; this.loaded = true;/ *--- 반사 --- */this.flx = createreflexion (this.parent.oc, this.mg); if (this.parent.view <0) this.view = view = this.n; this.the.parent.calc ();}}},/ * ==== diapo onclick ==== */click : function () {if (this.parent.view == this.n) {/ * --- Zoomed Diapo를 클릭하십시오 --- */if (this.url) {/ * --- this.target);} else {/ * --- 축소/아웃 --- */this.z1 = this.z1 == 1? 이. */var load = function () {var loaded = false; var i = instances.length; while (i-) if (인스턴스 [i] .ocont == div)로드 = true; if (!로드) {/ *--- 새로운 ImageFlow 인스턴스 푸시- */instances.push (new imageFlow (div, size, Zood)); {imf.initialized = true;/ * --- 창 크기 조정 이벤트 --- */addevent (wind wind Instances.length; while (i-) 인스턴스 [i] .run ();}, 16), 16);}}}/ * --- Window Onload Event --- */addevent (Wind 10); </script> </head> <body> <div id = "imageFlow"> <div> </div> <div> <allimage/1.jpg "href ="#"_fckevedUrl ="#"> 내부 3D 디자인 재현 </a> <a renimates/2.jpg"href = "#"_ "_"#"#"#"#"#"#"#"#"#"#"#" 렌더링 </a> <a rel = "images/3.jpg"href = "#"#"_fcksavedurl ="#"> 실내 3D 디자인 렌더링 </a> <a rel ="images/4.jpg "href ="#"_fcksvedurl ="#"> 실내 3D 디자인 렌더링 </a> _FCKSAVEDURL = "#"> 실내 3D 디자인 렌더링 </a> <a rel = "images/6.jpg"href = "#"#"_fcksavedUrl ="#"> 실내 3D 디자인 렌더링 </a> <a rel ="images/1.jpg "href ="#"_fcksavedurl ="#"> indoor 3d renderate rel = "images/2.jpg"href = "#"_ _fcksavedUrl = "#"> 실내 3D 디자인 렌더링 </a> <aLIMAGE/3. JPG "href ="#"_fcKSAVEDURL ="#"> indoor 3D 디자인 렌더링 </a> <a rel ="href "href"href ""#"#" _FCKSAVEDURL = "#"> 실내 3D 디자인 렌더링 </a> <a rel = "images/5.jpg"href = "#"#"_fcksavedurl ="#"> 실내 3D 디자인 렌더링 </a> <a rel ="images/6.jpg "href ="#"_fcksavedurl ="#"> indoor 3d renderate rel = "images/2.jpg"href = "#"_ _fcksavedurl = "#"> 실내 3D 디자인 렌더링 </a> </div> <div> <div>로드 </div> <div> 기다려주세요 ... </div> <div> <div> <img src = ""img src = "img src ="img/l.jp "" " _FCKSAVEDURL = "images/l.jpg"> <img src = "images/r.jpg"_fcksavedurl = "images/r.jpg"> <img src = "images/s.png"_fckksavedurl = "images/s.png"> </div> </html> </html>JavaScript 관련 컨텐츠에 대한 자세한 내용은이 사이트의 주제를 확인하십시오. "JavaScript 스위칭 효과 및 기술 요약", "JavaScript 검색 알고리즘 기술 요약", "JavaScript 애니메이션 효과 및 기술 요약", "Javascript 오류 및 디버깅 기술의 요약" "JavaScript 기술의 요약" "" "요약" "", Malgority Sknickes의 요약 "". JavaScript Traversal 알고리즘 및 기술 "및"JavaScript 수학 연산 사용 요약 "
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.