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 相关文章推荐
新浪刚打开页面出来的全屏广告代码
Apr 02 Javascript
JavaScript XML实现两级级联下拉列表
Nov 10 Javascript
javascript 写类方式之四
Jul 05 Javascript
javascript改变position值实现菜单滚动至顶部后固定
Jan 18 Javascript
调试Javascript代码(浏览器F12及VS中debugger关键字)
Jan 25 Javascript
jquery按回车提交数据的代码示例
Nov 05 Javascript
js图片延迟技术一般的思路与示例
Mar 20 Javascript
判断在css加载完毕后执行后续代码示例
Sep 03 Javascript
JavaScript模拟可展开、拖动与关闭的聊天窗口实例
May 12 Javascript
Javascript中document.referrer隐藏来源的方法
Jan 16 Javascript
Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条
Jun 24 Javascript
ant design vue 表格table 默认勾选几项的操作
Oct 31 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
关于Intype一些小问题的解决办法
2008/03/28 PHP
一道关于php变量引用的面试题
2010/08/08 PHP
浅析PHP中的字符串编码转换(自动识别原编码)
2013/07/02 PHP
十幅图告诉你什么是PHP引用
2015/02/22 PHP
Javascript 作用域使用说明
2009/08/13 Javascript
js继承的实现代码
2010/08/05 Javascript
基于Jquery+Ajax+Json的高效分页实现代码
2011/10/29 Javascript
js实现每日自动换一张图片的方法
2015/05/04 Javascript
简介JavaScript中Math.LOG10E属性的使用
2015/06/14 Javascript
Node.js的MongoDB驱动Mongoose基本使用教程
2016/03/01 Javascript
让DIV的滚动条自动滚动到最底部的3种方法(推荐)
2016/09/24 Javascript
微信小程序 wx:for的使用实例详解
2017/04/27 Javascript
jQuery+PHP+Mysql实现抽奖程序
2020/04/12 jQuery
JavaScript 上传文件(psd,压缩包等),图片,视频的实现方法
2017/06/19 Javascript
angular2路由之routerLinkActive指令【推荐】
2018/05/30 Javascript
微信小程序自定义弹窗实现详解(可通用)
2019/07/04 Javascript
Layui数据表格 前后端json数据接收的方法
2019/09/19 Javascript
深入理解 TypeScript Reflect Metadata
2019/12/12 Javascript
vue 接口请求地址前缀本地开发和线上开发设置方式
2020/08/13 Javascript
flask中使用SQLAlchemy进行辅助开发的代码
2013/02/10 Python
利用Python中的mock库对Python代码进行模拟测试
2015/04/16 Python
使用python进行文本预处理和提取特征的实例
2018/06/05 Python
解决Pycharm调用Turtle时 窗口一闪而过的问题
2019/02/16 Python
python利用opencv实现SIFT特征提取与匹配
2020/03/05 Python
CK美国官网:Calvin Klein
2016/08/26 全球购物
顶级宝石首饰网络零售商:Angara
2016/10/25 全球购物
Oracle中delete,truncate和drop的区别
2016/05/05 面试题
专营店会计助理岗位职责
2013/11/29 职场文书
装修设计师求职信
2014/02/26 职场文书
《美丽的小路》教学反思
2014/02/26 职场文书
2014年党支部学习材料
2014/05/19 职场文书
授权委托书范文
2014/07/31 职场文书
行政工作试用期自我评价
2014/09/14 职场文书
慰问信(范文3篇)
2019/10/23 职场文书
nginx里的rewrite跳转的实现
2021/03/31 Servers
解决goland 导入项目后import里的包报红问题
2021/05/06 Golang