javaScript实现可缩放的显示区效果代码


Posted in Javascript onOctober 26, 2015

本文实例讲述了javaScript实现可缩放的显示区效果代码。分享给大家供大家参考,具体如下:

这里演示可缩放的显示区,采用JS代码实现,鼠标按住区域的右下角,出现拖放箭头时,向下或向上拉,就可实现缩放操作,当区域较小时显示滚动条,平时也比较常见的效果,在此将JavaScript代码与大家分享。

运行效果截图如下:

javaScript实现可缩放的显示区效果代码

在线演示地址如下:

具体代码如下:

<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
}
#testDiv {
 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>
 <DIV class=resizeMe id=testDiv>
 <DIV id=innerNice>
 <P align=center> </P>
 <P align=center>请在边框处拖动鼠标</P>
 <P> </P>
 <P> </P>
 <P> </P></DIV></DIV>
 <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程序设计有所帮助。

Javascript 相关文章推荐
Add a Table to a Word Document
Jun 15 Javascript
不使用XMLHttpRequest实现异步加载 Iframe和script
Oct 29 Javascript
jQuery在html有效在jsp无效的原因及解决方法
Aug 02 Javascript
jquery fancybox ie6不显示关闭按钮的解决办法
Dec 25 Javascript
node.js中的path.isAbsolute方法使用说明
Dec 08 Javascript
jquery实现动静态条形统计图
Aug 17 Javascript
jQuery Dialog对话框事件用法实例分析
May 10 Javascript
webpack 2的react开发配置实例代码
Jul 28 Javascript
浅谈mint-ui loadmore组件注意的问题
Nov 08 Javascript
Node Puppeteer图像识别实现百度指数爬虫的示例
Feb 22 Javascript
vue下拉列表功能实例代码
Apr 08 Javascript
微信小程序实现默认第一个选中变色效果
Jul 17 Javascript
JS基于VML技术实现的五角星礼花效果代码
Oct 26 #Javascript
jquery获取url参数及url加参数的方法
Oct 26 #Javascript
JavaScritp添加url参数并将参数加入到url中及更改url参数的方法
Oct 26 #Javascript
angular.bind使用心得
Oct 26 #Javascript
详解JavaScript编程中正则表达式的使用
Oct 25 #Javascript
实例解析JS布尔对象的toString()方法和valueOf()方法
Oct 25 #Javascript
JavaScript编程中布尔对象的基本使用
Oct 25 #Javascript
You might like
博士208HAF收音机实习报告
2021/03/02 无线电
php连接mysql数据库代码
2009/03/10 PHP
Symfony2之session与cookie用法小结
2016/03/18 PHP
PHP 使用位运算实现四则运算的代码
2021/03/09 PHP
jquery中输入验证中一个不错的效果
2010/08/21 Javascript
jQuery 源码分析笔记(4) Ready函数
2011/06/02 Javascript
jQuery Mobile页面跳转后未加载外部JS原因分析及解决
2013/03/18 Javascript
js中arguments的用法(实例讲解)
2013/11/30 Javascript
JavaScript事件委托的技术原理探讨示例
2014/04/17 Javascript
jquery移动节点实例
2015/01/14 Javascript
JS实现页面超时后自动跳转到登陆页面
2015/01/19 Javascript
jQuery扁平化风格下拉框美化插件FancySelect使用指南
2015/02/10 Javascript
在JavaScript的正则表达式中使用exec()方法
2015/06/16 Javascript
Validform+layer实现漂亮的表单验证特效
2016/01/17 Javascript
BootStrapValidator校验方式
2016/12/19 Javascript
JS返回页面时自动回滚到历史浏览位置
2018/09/26 Javascript
js form表单input框限制20个字符,10个汉字代码实例
2019/04/12 Javascript
vue实现随机验证码功能的实例代码
2019/04/30 Javascript
Vue插槽_特殊特性slot,slot-scope与指令v-slot说明
2020/09/04 Javascript
[01:07:47]Secret vs Optic Supermajor 胜者组 BO3 第一场 6.4
2018/06/05 DOTA
深入讲解Python编程中的字符串
2015/10/14 Python
用python实现简单EXCEL数据统计的实例
2017/01/24 Python
Python基于opencv调用摄像头获取个人图片的实现方法
2019/02/21 Python
python使用phoenixdb操作hbase的方法示例
2019/02/28 Python
python opencv摄像头的简单应用
2019/06/06 Python
Python自带的IDE在哪里
2020/07/01 Python
CSS伪类与CSS伪元素的区别及由来具体说明
2012/12/07 HTML / CSS
详解CSS 3 中的 calc() 方法
2018/01/12 HTML / CSS
工商管理专业实习大学生自我鉴定
2013/09/19 职场文书
2013年最新自荐信范文
2014/06/23 职场文书
辞职信范文大全
2015/03/02 职场文书
结婚当天新郎保证书
2015/05/08 职场文书
《桂花雨》教学反思
2016/02/19 职场文书
再见,2019我们不负使命;你好,2020我们砥砺前行
2020/01/03 职场文书
mysql定时自动备份数据库的方法步骤
2021/07/07 MySQL
python数字图像处理之图像的批量处理
2022/06/28 Python