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 相关文章推荐
jquery 弹出层注册页面等(asp.net后台)
Jun 17 Javascript
javascript 函数声明与函数表达式的区别介绍
Oct 05 Javascript
文本框文本自动补全效果示例分享
Jan 19 Javascript
Javascript中Array.prototype.map()详解
Oct 22 Javascript
js获取form表单所有数据的简单方法
Aug 18 Javascript
Vue自定义指令使用方法详解
Aug 21 Javascript
jQuery进阶实践之利用最优雅的方式如何写ajax请求
Dec 20 jQuery
JavaScript实现快速排序的方法分析
Jan 10 Javascript
javascript回调函数详解
Feb 06 Javascript
vue项目中在外部js文件中直接调用vue实例的方法比如说this
Apr 28 Javascript
回顾Javascript React基础
Jun 15 Javascript
关于React Native 无法链接模拟器的问题
Jun 21 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 str_pad 函数使用详解
2009/01/13 PHP
php 文件缓存函数
2011/10/08 PHP
ThinkPHP实现动态包含文件的方法
2014/11/29 PHP
PHP实现图片上传并压缩
2015/12/22 PHP
PHP simplexml_load_string()函数实例讲解
2019/02/03 PHP
IE6不能修改NAME问题的解决方法
2010/09/03 Javascript
一款Jquery 分页插件的改造方法(服务器端分页)
2011/07/11 Javascript
Javascript自定义函数判断网站访问类型是PC还是移动终端
2014/01/10 Javascript
node.js调用C++开发的模块实例
2015/07/03 Javascript
javascript动态生成树形菜单的方法
2015/11/14 Javascript
第十篇BootStrap轮播插件使用详解
2016/06/21 Javascript
bootstrap datepicker 与bootstrapValidator同时使用时选择日期后无法正常触发校验的解决思路
2016/09/28 Javascript
JS树形菜单组件Bootstrap TreeView使用方法详解
2016/12/21 Javascript
详解Jquery Easyui的验证扩展
2017/01/09 Javascript
关于javascript获取内联样式与嵌入式样式的实例
2017/06/01 Javascript
使用Vue.js开发微信小程序开源框架mpvue解析
2018/03/20 Javascript
element ui table 增加筛选的方法示例
2018/11/02 Javascript
微信小程序实现的图片保存功能示例
2019/04/24 Javascript
使用Angular material主题定义自己的组件库的配色体系
2019/09/04 Javascript
JS变量提升原理与用法实例浅析
2020/05/22 Javascript
js实现从右往左匀速显示图片(无缝轮播)
2020/06/29 Javascript
python 排列组合之itertools
2013/03/20 Python
python写入并获取剪切板内容的实例
2018/05/31 Python
python通过ffmgep从视频中抽帧的方法
2018/12/05 Python
Python select及selectors模块概念用法详解
2020/06/22 Python
django序列化时使用外键的真实值操作
2020/07/15 Python
Python 如何反方向迭代一个序列
2020/07/28 Python
电脑租赁公司创业计划书
2014/01/08 职场文书
大学新闻系自荐书
2014/05/31 职场文书
营销学习心得体会
2014/09/12 职场文书
信访稳定工作汇报
2014/10/27 职场文书
亚布力滑雪场导游词
2015/02/09 职场文书
专家推荐信范文
2015/03/26 职场文书
图书借阅制度范本
2015/08/06 职场文书
学校安全管理制度
2015/08/06 职场文书
HTML中link标签属性的具体用法
2023/05/07 HTML / CSS