JavaScript implémente un code d'effet de zone d'affichage évolutif-js tutoriel-php.cn

JavaScript implémente un code d'effet de zone d'affichage évolutif

PHPz

Libérer： 2018-09-28 16:43:41

avant

1456 Les gens l'ont consulté

Cet article présente principalement l'implémentation javaScript du code d'effet de zone d'affichage évolutive, qui a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer, comme suit :

Voici une démonstration de la zone d'affichage évolutive. , en utilisant l'implémentation du code JS, appuyez avec la souris sur le coin inférieur droit de la zone, et lorsque la flèche glisser-déposer apparaît, tirez vers le bas ou vers le haut pour réaliser l'opération de zoom. Lorsque la zone est petite, la barre de défilement s'affiche, qui. est également un effet courant. Voici le code JavaScript Partagez-le avec tout le monde.

Une capture d'écran de l'effet en cours d'exécution est la suivante :

L'adresse de la démonstration en ligne est la suivante :

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

Le code spécifique est le suivant :

<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>

Copier après la connexion

Ce qui précède est l'intégralité du contenu de ce chapitre. Pour plus de didacticiels connexes, veuillez visiter le Tutoriel vidéo JavaScript !