Rumah > Artikel > hujung hadapan web > JavaScript melaksanakan kod kesan kawasan paparan berskala
JavaScript melaksanakan kod kesan kawasan paparan berskala
- PHPzke hadapan
- 2016-05-16 15:35:101435semak imbas
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>Di atas ialah keseluruhan kandungan bab ini Untuk lebih banyak tutorial berkaitan, sila lawatitutorial video JavaScript!
Kenyataan：
Artikel ini dikembalikan pada:jb51.net. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Organisasi nota kajian JavaScript (gambaran keseluruhan, pengenalan kepada pembolehubah, jenis data)_Pengetahuan asasArtikel seterusnya：Organisasi nota kajian JavaScript (gambaran keseluruhan, pengenalan kepada pembolehubah, jenis data)_Pengetahuan asas