JavaScript는 확장 가능한 디스플레이 영역 효과 코드를 구현합니다.-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

JavaScript는 확장 가능한 디스플레이 영역 효과 코드를 구현합니다.

PHPz

May 16, 2016 pm 03:35 PM

javascript확장 가능

이 글은 주로 확장 가능한 디스플레이 영역 효과 코드의 자바스크립트 구현을 소개하며, 이는 특정 참조 값을 가지고 있습니다. 필요한 친구는 다음과 같이 참조할 수 있습니다.

다음은 확장 가능한 디스플레이 영역의 데모입니다. , JS 코드 구현을 사용하여 영역의 오른쪽 하단에 있는 마우스를 누르고 드래그 앤 드롭 화살표가 나타나면 아래로 당기거나 위로 당겨 영역이 작을 때 스크롤 막대가 표시됩니다. 또한 일반적인 효과입니다. 여기에 JavaScript 코드가 있습니다. 모두와 공유하세요.

실행 중인 효과의 스크린샷은 다음과 같습니다.

온라인 데모 주소는 다음과 같습니다.

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

구체 코드는 다음과 같습니다.

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

위 내용은 이 장의 전체 내용을 보려면 JavaScript 비디오 튜토리얼을 방문하세요.

성명

이 기사는 脚本之家에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제

관련 기사

JavaScript의 역할 : 웹 대화식 및 역동적 인 웹Apr 24, 2025 am 12:12 AM

JavaScript는 웹 페이지의 상호 작용과 역학을 향상시키기 때문에 현대 웹 사이트의 핵심입니다. 1) 페이지를 새로 고치지 않고 콘텐츠를 변경할 수 있습니다. 2) Domapi를 통해 웹 페이지 조작, 3) 애니메이션 및 드래그 앤 드롭과 같은 복잡한 대화식 효과를 지원합니다. 4) 성능 및 모범 사례를 최적화하여 사용자 경험을 향상시킵니다.

C 및 JavaScript : 연결이 설명되었습니다Apr 23, 2025 am 12:07 AM

C 및 JavaScript는 WebAssembly를 통한 상호 운용성을 달성합니다. 1) C 코드는 WebAssembly 모듈로 컴파일되어 컴퓨팅 전력을 향상시키기 위해 JavaScript 환경에 도입됩니다. 2) 게임 개발에서 C는 물리 엔진 및 그래픽 렌더링을 처리하며 JavaScript는 게임 로직 및 사용자 인터페이스를 담당합니다.

웹 사이트에서 앱으로 : 다양한 JavaScript 애플리케이션Apr 22, 2025 am 12:02 AM

JavaScript는 웹 사이트, 모바일 응용 프로그램, 데스크탑 응용 프로그램 및 서버 측 프로그래밍에서 널리 사용됩니다. 1) 웹 사이트 개발에서 JavaScript는 HTML 및 CSS와 함께 DOM을 운영하여 동적 효과를 달성하고 jQuery 및 React와 같은 프레임 워크를 지원합니다. 2) 반응 및 이온 성을 통해 JavaScript는 크로스 플랫폼 모바일 애플리케이션을 개발하는 데 사용됩니다. 3) 전자 프레임 워크를 사용하면 JavaScript가 데스크탑 애플리케이션을 구축 할 수 있습니다. 4) node.js는 JavaScript가 서버 측에서 실행되도록하고 동시 요청이 높은 높은 요청을 지원합니다.

Python vs. JavaScript : 사용 사례 및 응용 프로그램 비교Apr 21, 2025 am 12:01 AM

Python은 데이터 과학 및 자동화에 더 적합한 반면 JavaScript는 프론트 엔드 및 풀 스택 개발에 더 적합합니다. 1. Python은 데이터 처리 및 모델링을 위해 Numpy 및 Pandas와 같은 라이브러리를 사용하여 데이터 과학 및 기계 학습에서 잘 수행됩니다. 2. 파이썬은 간결하고 자동화 및 스크립팅이 효율적입니다. 3. JavaScript는 프론트 엔드 개발에 없어서는 안될 것이며 동적 웹 페이지 및 단일 페이지 응용 프로그램을 구축하는 데 사용됩니다. 4. JavaScript는 Node.js를 통해 백엔드 개발에 역할을하며 전체 스택 개발을 지원합니다.

JavaScript 통역사 및 컴파일러에서 C/C의 역할Apr 20, 2025 am 12:01 AM

C와 C는 주로 통역사와 JIT 컴파일러를 구현하는 데 사용되는 JavaScript 엔진에서 중요한 역할을합니다. 1) C는 JavaScript 소스 코드를 구문 분석하고 추상 구문 트리를 생성하는 데 사용됩니다. 2) C는 바이트 코드 생성 및 실행을 담당합니다. 3) C는 JIT 컴파일러를 구현하고 런타임에 핫스팟 코드를 최적화하고 컴파일하며 JavaScript의 실행 효율을 크게 향상시킵니다.

자바 스크립트 행동 : 실제 예제 및 프로젝트Apr 19, 2025 am 12:13 AM

실제 세계에서 JavaScript의 응용 프로그램에는 프론트 엔드 및 백엔드 개발이 포함됩니다. 1) DOM 운영 및 이벤트 처리와 관련된 TODO 목록 응용 프로그램을 구축하여 프론트 엔드 애플리케이션을 표시합니다. 2) Node.js를 통해 RESTFULAPI를 구축하고 Express를 통해 백엔드 응용 프로그램을 시연하십시오.

JavaScript 및 웹 : 핵심 기능 및 사용 사례Apr 18, 2025 am 12:19 AM

웹 개발에서 JavaScript의 주요 용도에는 클라이언트 상호 작용, 양식 검증 및 비동기 통신이 포함됩니다. 1) DOM 운영을 통한 동적 컨텐츠 업데이트 및 사용자 상호 작용; 2) 사용자가 사용자 경험을 향상시키기 위해 데이터를 제출하기 전에 클라이언트 확인이 수행됩니다. 3) 서버와의 진실한 통신은 Ajax 기술을 통해 달성됩니다.

JavaScript 엔진 이해 : 구현 세부 사항Apr 17, 2025 am 12:05 AM

보다 효율적인 코드를 작성하고 성능 병목 현상 및 최적화 전략을 이해하는 데 도움이되기 때문에 JavaScript 엔진이 내부적으로 작동하는 방식을 이해하는 것은 개발자에게 중요합니다. 1) 엔진의 워크 플로에는 구문 분석, 컴파일 및 실행; 2) 실행 프로세스 중에 엔진은 인라인 캐시 및 숨겨진 클래스와 같은 동적 최적화를 수행합니다. 3) 모범 사례에는 글로벌 변수를 피하고 루프 최적화, Const 및 Lets 사용 및 과도한 폐쇄 사용을 피하는 것이 포함됩니다.

See all articles