JavaScript melaksanakan kod kesan kawasan paparan berskala-tutorial js-php.cn

JavaScript melaksanakan kod kesan kawasan paparan berskala

PHPz

Lepaskan： 2018-09-28 16:43:41

ke hadapan

1474 orang telah melayarinya

Artikel ini terutamanya memperkenalkan pelaksanaan javaScript bagi kod kesan kawasan paparan boleh skala, yang mempunyai nilai rujukan tertentu Rakan yang memerlukan boleh merujuknya, seperti berikut:

Berikut ialah demonstrasi kawasan paparan boleh skala. , menggunakan pelaksanaan kod JS, tekan tetikus di sudut kanan bawah kawasan, dan apabila anak panah seret dan lepas muncul, tarik ke bawah atau ke atas untuk mencapai operasi zum Apabila kawasan kecil, bar skrol dipaparkan, yang juga merupakan kesan biasa Berikut ialah kod JavaScript Kongsi dengan semua orang.

Tangkapan skrin kesan berjalan adalah seperti berikut:

Alamat demo dalam talian adalah seperti berikut:

http: //demo.jb51.net/ js/2015/js-ksf-box-style-demo/

Kod khusus adalah seperti berikut:

<HTML>
<HEAD>
<TITLE>可缩放的显示区</TITLE>
<STYLE type=text/css>
BODY {
 MARGIN-TOP: 0px; FONT-SIZE: 9pt; MARGIN-LEFT: 0px; MARGIN-RIGHT: 0px; FONT-FAMILY: "宋体"
}
A {
 FONT-WEIGHT: 400; FONT-SIZE: 9pt; COLOR: black; TEXT-DECORATION: none
}
A:hover {
 FONT-WEIGHT: 400; FONT-SIZE: 9pt; COLOR: red; TEXT-DECORATION: underline
}
A:active {
 FONT: 9pt "宋体"; CURSOR: hand; COLOR: #ff0033
}
.STYLE1 {font-family: "华文彩云", "华文仿宋", "华文细黑", "华文新魏", "华文行楷", "华文中宋", "新宋体", "幼圆"}
.STYLE2 {
 font-family: "方正姚体";
 font-weight: bold;
}
</STYLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
</HEAD>
<BODY bgColor=#fef4d9>
<CENTER>
 <span class="STYLE1"><FONT color=black size=16>可缩放的显示区</FONT></span>
</CENTER><BR>
<CENTER>
<TABLE borderColor=#00FF00 border=5 borderlight="green">
 <TBODY>
 <TR>
 <TD align=left>
 <STYLE>UNKNOWN {
 box-sizing: border-box; moz-box-sizing: border-box
}
#testp {
 BORDER-RIGHT: white 2px outset; PADDING-RIGHT: 2px; BACKGROUND-POSITION: 0% 50%; BORDER-TOP: white 2px outset; PADDING-LEFT: 2px; Z-INDEX: 2; BACKGROUND-ATTACHMENT: scroll; LEFT: 30px; PADDING-BOTTOM: 2px; MARGIN: 0px; OVERFLOW: hidden; BORDER-LEFT: white 2px outset; WIDTH: 500px; COLOR: #3969a5; PADDING-TOP: 2px; BORDER-BOTTOM: white 2px outset; BACKGROUND-REPEAT: repeat; HEIGHT: 300px; BACKGROUND-COLOR: buttonface
}
BODY {
 FONT-SIZE: 9pt; FONT-FAMILY: Verdana
}
#innerNice {
 BORDER-RIGHT: white 2px inset; PADDING-RIGHT: 8px; BACKGROUND-POSITION: 0% 50%; BORDER-TOP: white 2px inset; PADDING-LEFT: 8px; BACKGROUND-ATTACHMENT: scroll; PADDING-BOTTOM: 8px; OVERFLOW: auto; BORDER-LEFT: white 2px inset; WIDTH: 100%; COLOR: #3969a5; PADDING-TOP: 8px; BORDER-BOTTOM: white 2px inset; BACKGROUND-REPEAT: repeat; HEIGHT: 100%; BACKGROUND-COLOR: white
}
</STYLE>
 <p class=resizeMe id=testp>
 <p id=innerNice>
 <P align=center>　</P>
 <P align=center>请在边框处拖动鼠标</P>
 <P>　</P>
 <P>　</P>
 <P>　</P></p></p>
 <SCRIPT language=javascript>
var theobject = null; //This gets a value as soon as a resize start
function resizeObject() {
 this.el = null; //pointer to the object
 this.dir = ""; //type of current resize (n, s, e, w, ne, nw, se, sw)
 this.grabx = null; //Some useful values
 this.graby = null;
 this.width = null;
 this.height = null;
 this.left = null;
 this.top = null;
}
function getDirection(el) {
 var xPos, yPos, offset, dir;
 dir = "";
 xPos = window.event.offsetX;
 yPos = window.event.offsetY;
 offset = 8; //The distance from the edge in pixels
 if (yPos<offset) dir += "n";
 else if (yPos > el.offsetHeight-offset) dir += "s";
 if (xPos<offset) dir += "w";
 else if (xPos > el.offsetWidth-offset) dir += "e";
 return dir;
}
function doDown() {
 var el = getReal(event.srcElement, "className", "resizeMe");
 if (el == null) {
  theobject = null;
  return;
 }  
 dir = getDirection(el);
 if (dir == "") return;
 theobject = new resizeObject(); 
 theobject.el = el;
 theobject.dir = dir;
 theobject.grabx = window.event.clientX;
 theobject.graby = window.event.clientY;
 theobject.width = el.offsetWidth;
 theobject.height = el.offsetHeight;
 theobject.left = el.offsetLeft;
 theobject.top = el.offsetTop;
 window.event.returnValue = false;
 window.event.cancelBubble = true;
}
function doUp() {
 if (theobject != null) {
  theobject = null;
 }
}
function doMove() {
 var el, xPos, yPos, str, xMin, yMin;
 xMin = 8; //The smallest width possible
 yMin = 8; //  height
 el = getReal(event.srcElement, "className", "resizeMe");
 if (el.className == "resizeMe") {
 str = getDirection(el);
 //Fix the cursor 
  if (str == "") str = "default";
  else str += "-resize";
  el.style.cursor = str;
 }
//Dragging starts here
 if(theobject != null) {
  if (dir.indexOf("e") != -1)
   theobject.el.style.width = Math.max(xMin, theobject.width + window.event.clientX - theobject.grabx) + "px";
  if (dir.indexOf("s") != -1)
   theobject.el.style.height = Math.max(yMin, theobject.height + window.event.clientY - theobject.graby) + "px";
  if (dir.indexOf("w") != -1) {
   theobject.el.style.left = Math.min(theobject.left + window.event.clientX - theobject.grabx, theobject.left + theobject.width - xMin) + "px";
   theobject.el.style.width = Math.max(xMin, theobject.width - window.event.clientX + theobject.grabx) + "px";
  }
  if (dir.indexOf("n") != -1) {
   theobject.el.style.top = Math.min(theobject.top + window.event.clientY - theobject.graby, theobject.top + theobject.height - yMin) + "px";
   theobject.el.style.height = Math.max(yMin, theobject.height - window.event.clientY + theobject.graby) + "px";
  }
  window.event.returnValue = false;
  window.event.cancelBubble = true;
 } 
}
function getReal(el, type, value) {
 temp = el;
 while ((temp != null) && (temp.tagName != "BODY")) {
  if (eval("temp." + type) == value) {
   el = temp;
   return el;
  }
  temp = temp.parentElement;
 }
 return el;
}
document.onmousedown = doDown;
document.onmouseup = doUp;
document.onmousemove = doMove;
</SCRIPT> </TD></TR></TBODY></TABLE>
</CENTER>
</BODY>
</HTML>

Salin selepas log masuk

Di atas ialah keseluruhan kandungan bab ini Untuk lebih banyak tutorial berkaitan, sila lawatitutorial video JavaScript!