jQuery实现右下角可缩放大小的层完整实例
更新时间：2016年06月20日 14:45:17 作者：cherry
这篇文章主要介绍了jQuery实现右下角可缩放大小的层,以完整实例形式分析了jQuery页面元素及相关样式属性操作技巧,需要的朋友可以参考下
本文实例讲述了jQuery实现右下角可缩放大小的层。分享给大家供大家参考，具体如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>大小可缩放层测试</title>
<script type = "text/javascript" src="jquery-1.7.2.js"></script>
<style type = "text/css">
#fa{
border:1px solid blue;
overflow:auto;
width:400px;
height:400px;
}
#main{
margin:0;
padding:0;
width:300px;
height:280px;
border:1px solid red;
}
</style>
<script type = "text/javascript">
$(function(){
var div = getObj("main");
div.onmousemove = function(e){
var e = e || window.event;
var posx = e.clientX;
var posy = e.clientY;
var l = div.offsetLeft;
var t = div.offsetTop;
var h = div.clientHeight;
var w = div.clientWidth;
var ol = l+w-10;
var or = l+w+10;
var ot = t+h-10;
var ob = t+h+10;
this.style.cursor = "";
if(posx>ol && posx<or && posy >ot && posy<ob){
div.style.cursor = "nw-resize";
}
}
div.onmousedown = function(e){
var e = e || window.event;
var initX = e.clientX;
var initY = e.clientY;
var l = div.offsetLeft;
var t = div.offsetTop;
var h = div.clientHeight;
var w = div.clientWidth;
var ol = l+w-10;
var or = l+w+10;
var ot = t+h-10;
var ob = t+h+10;
if(initX>ol && initX<or && initY >ot && initY<ob){
document.onmousemove = function(evt){
var e = evt || window.event;
var currX = e.clientX;
var currY = e.clientY;
div.style.width = w + (currX - initX)+"px";
div.style.height = h+(currY-initY)+"px";
}
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
}
}
}
});
function getObj(id){
return document.getElementById(id);
}
</script>
</head>
<body>
<div id = "fa">
<div id = "main"></div>
</div>
</body>
</html>
函数封装后：
function resize(div){
div.mousemove(function(e){
var e = e || window.event;
var posx = e.clientX;
var posy = e.clientY;
var l = div.offset().left;
var t = div.offset().top;
var h = div.height();
var w = div.width();
var ol = l+w-10;
var or = l+w+10;
var ot = t+h-10;
var ob = t+h+10;
$(this).css("cursor","");
if(posx>ol && posx<or && posy >ot && posy<ob){
$(this).css("cursor","nw-resize");
}
});
div.mousedown(function(e){
var e = e || window.event;
var posx = e.clientX;
var posy = e.clientY;
var l = div.offset().left;
var t = div.offset().top;
var h = div.height();
var w = div.width();
var ol = l+w-10;
var or = l+w+10;
var ot = t+h-10;
var ob = t+h+10;
if(posx>=ol && posx<=or && posy >=ot && posy<=ob){
document.onmousemove = function(e){
var e = e || window.event;
var currX = e.clientX;
var currY = e.clientY;
div.width(w + (currX - posx));
div.height(h+(currY-posy));
}
$(document).mouseup(function(){
document.onmousemove = null;
});
}
});
}
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery表格(table)操作技巧汇总》、《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
相关文章
基于jquery的图片幻灯展示源码，需要的朋友可以参考下2012-07-07
这篇文章主要为大家介绍了jQuery编程动画基本实现方法示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
这篇文章主要介绍了Jquery跳到页面指定位置的方法,需要的朋友可以参考下2014-05-05
存储过程是在大型数据库系统中，一组为了完成特定功能的sql语句集，经过编译存储在数据库中，用户通过指定存储过程的名字并给出参数（如果该存储过程带有参数）来执行它，下面小编给大家介绍asp.net中oracle存储过程，需要的朋友可以参考下2015-08-08
昨天突然有网友问我animate()方法可以来操作所有css属性吗？是的，我告诉他可以的。不过，在此有需要注意点需要大家搞清楚。接下来通过本篇文章给大家介绍基于jquery animate操作css样式属性小结，对jquery animate css相关知识感兴趣的朋友一起学习吧2015-11-11
这篇文章主要介绍了jquery实现全屏滚动，针对全屏滚动知识进行详细阐述，感兴趣的小伙伴们可以参考一下2015-12-12
这篇文章主要介绍了jQuery+css实现的时钟效果,使用js的setTimeout方法实时修改页面元素,实现动态显示时钟的功能.该代码可兼容各浏览器,需要的朋友可以参考下2016-01-01
jquery 问答知识整理，学习jquery的朋友可以参考下。2010-02-02
这篇文章主要介绍了jQuery+json实现的简易Ajax调用,结合实例形式分析了jQuery基于ajax实现json传参调用的技巧,需要的朋友可以参考下2015-12-12
下文与大家分享下使用jquery实现控制经纬度显示地图与卫星，感兴趣的朋友可以参考下哈，希望对你有所帮助2013-05-05
最新评论