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 相关文章推荐
javascript 面向对象,实现namespace,class,继承,重载
Oct 29 Javascript
javascript replace()正则替换实现代码
Feb 26 Javascript
动态读取JSON解析键值对的方法
Jun 03 Javascript
javascript insertAfter()定义与用法示例
Jul 25 Javascript
学习vue.js条件渲染
Dec 03 Javascript
JavaScript代码实现txt文件的上传预览功能
Mar 27 Javascript
在Vant的基础上封装下拉日期控件的代码示例
Dec 05 Javascript
VUE单页面切换动画代码(全网最好的切换效果)
Oct 31 Javascript
Jquery让form表单异步提交代码实现
Nov 14 jQuery
详解node.js 事件循环
Jul 22 Javascript
JavaScript中关于预编译、作用域链和闭包的理解
Mar 31 Javascript
JavaScript中isPrototypeOf函数
Nov 07 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
详解php的魔术方法__get()和__set()使用介绍
2012/09/19 PHP
php采集中国代理服务器网的方法
2015/06/16 PHP
php自动识别文字编码并转换为目标编码的方法
2015/08/08 PHP
php实现的统计字数函数定义与使用示例
2017/07/26 PHP
php校验公钥是否可用的实例方法
2019/09/17 PHP
Thinkphp 框架扩展之行为扩展原理与实现方法分析
2020/04/23 PHP
键盘控制事件应用教程大全
2006/11/24 Javascript
按给定几率进行随机抽取的js代码
2010/12/28 Javascript
幻灯片带网页设计中的20个奇妙应用示例小结
2012/05/27 Javascript
用示例说明filter()与find()的用法以及children()与find()的区别分析
2013/04/26 Javascript
SeaJS 与 RequireJS 的差异对比
2014/12/08 Javascript
JavaScript判断数组是否包含指定元素的方法
2015/07/01 Javascript
Angular4学习教程之DOM属性绑定详解
2018/01/04 Javascript
vue-cli webpack 引入jquery的方法
2018/01/10 jQuery
详解vue组件开发脚手架
2018/06/15 Javascript
vue-router实现编程式导航的代码实例
2019/01/19 Javascript
vue实现form表单与table表格的数据关联功能示例
2019/01/29 Javascript
React+TypeScript+webpack4多入口配置详解
2019/08/08 Javascript
[43:33]EG vs Spirit Supermajor 败者组 BO3 第一场 6.4
2018/06/05 DOTA
[01:05:52]DOTA2-DPC中国联赛 正赛 Ehome vs Aster BO3 第一场 2月2日
2021/03/11 DOTA
Django 添加静态文件的两种实现方法(必看篇)
2017/07/14 Python
Python安装模块的常见问题及解决方法
2018/02/05 Python
python正则表达式之对号入座篇
2018/07/24 Python
python的依赖管理的实现
2019/05/14 Python
Anaconda和ipython环境适配的实现
2020/04/22 Python
巴西宠物店在线:Geração Pet
2017/05/31 全球购物
可持续未来的时尚基础:Alternative Apparel
2019/05/06 全球购物
Zalando Lounge瑞士:时尚与生活方式购物俱乐部
2020/03/12 全球购物
初中政治教学反思
2014/01/17 职场文书
服装促销活动方案
2014/02/23 职场文书
二年级评语大全
2014/04/23 职场文书
学习型家庭事迹材料
2014/12/20 职场文书
市级三好学生评语
2014/12/29 职场文书
谢师宴答谢词
2015/01/05 职场文书
通知范文怎么写
2015/04/16 职场文书
浅谈Python数学建模之整数规划
2021/06/23 Python