正文
jquery拉伸区域，jquery怎么实现伸缩菜单栏
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
如何用jquery动态的拉伸DIV使其改变宽度（急）
!DOCTYPE html
html
head
meta http-equiv="Content-Type" content="text/html; charset=UTF-8"
script class="jquery library" src="/js/sandbox/jquery/jquery-1.8.2.min.js" type="text/javascript"/script
title
RunJS 演示代码
/title
style
* {
margin: 0;
padding: 0;
}
div {
position: absolute;
float: left;
height: 500px;
}
div.left {
background-color: red;
width: 200px;
left:0px;
}
div.center {
background-color: yellow;
width: 200px;
right:205px;
float:right;
}
div.handler {
width: 5px;
cursor: col-resize;
background-color: blue;
z-index:1;
left: 200px;
}
/style
script
jQuery(function ($){
var doc = $(document), dl = $("div.left"), dc = $("div.center");
var sum = dl.width() + dc.width() +
$("div.handler").mousedown (function (e) {
var me = $(this);
var deltaX = e.clientX
-
(parseFloat(me.css("left")) || parseFloat(me.prop("clientLeft")));
doc.mousemove(function (e){
var lt = e.clientX - deltaX;
lt = lt 0 ? 0 : lt;
lt = lt sum - me.width() ? sum - me.width() : lt;
me.css ("left", lt + "px");
dl.width(lt);
dc.width(sum-lt-me.width());
});
}).width();
doc.mouseup (function(){
doc.unbind("mousemove");
});
doc[0].ondragstart
= doc[0].onselectstart
= function ()
{
return false;
};
});
/script
/head
body
div class="left"
同时在线人数：1000
点击刷新
/div
div class="handler"
/div
div class="center"
sss
/div
/body
/html
相关问答
Q1: jquery如何设置拖动的活动范围？
jquery的拖动函数有个参数控制这个，有很多活动范围可选择，如下：
1.containment:
[类型]选择器, 元素, 字符串, 数组.
选择器: 只能在选择器约束的元素内拖动
元素: 只能在给定的元素内拖动
2.字符串:
parent: 只能在父容器内拖动
document: 在当前html文档的document下可拖动, 超出浏览器窗口范围时, 自动出现滚动条
widow: 只能在当前浏览器窗口的内容区域拖动, 拖动超出当前窗口范围, 不会导致出现滚动条...
3.数组: [x1, y1, x2, y2]以[开始水平坐标, 开始垂直坐标, 结束水平坐标, 结束垂直坐标]的方式划定一个区域, 只能在此区域内拖动. 这种方式指定时, 值是相对当前浏览器窗口内容区域左上角的偏移值.
false: 不限制拖动的活动范围
[默认值]false
[产生影响]
影响指定可拖动控件的活动区域.
[代码示例]
[初始化]
$('.selector').draggable({ containment: 'parent' });
[获取属性值]
var containment = $('.selector').draggable('option', 'containment');
[设置属性值]
$('.selector').draggable('option', 'containment', 'parent');
Q2: 如何使用jQuery Draggable和Droppable实现拖拽功能
在以前的文章中我已经介绍了web开发中基本拖放原理 现在给出需要完成的功能 最后运行的效果 如下图所示
主要功能需求说明 左侧的元素结构最后会通过Ajax call服务器的数据来生成 能支持多级元素 父节点可以折叠起来
用户可以通过拖放的操作 将元素从左侧拖放到右侧 如果是拖的父节点元素 那么需要把它子节点的元素一并拖到右边
元素放到右侧 右侧可以接受元素的区域有 种可能 一种新建一个区域 就类似“华东交通大学”所示 另外一种就是拖放到已经有元素的区域 两者的关系是“或” 单个元素区域有“非”和“且”的关系 点击右边删除按钮可以删除节点元素
第一步 左侧元素可以拖 官方给出的实例是直接在要拖动的元素上添加class="ui widget content" 最初我是在所有要拖动的元素都添加了“ui widget content”类别 但是测试拖动结果 发现元素只能在它所在的 container里面拖动 再往右拖动 div会出现水平或垂直滚动条 不知道是不是自己在参数设置上不对 container设置了 overflow:auto 效果如下图所示: 因 为最终的左侧元素节点是通过Ajax访问后台返回json数据 然后通过Javascript动态生成这种结构 而已不能为动态生成的元素绑定drag事 件 也就不能调用draggable方法 所以我使用了一个称之“中间拖拽容易元素” 这div一直在页面上 只是默认不显示 只要用户开始拖拽左侧的元 素时 它就出现了 当然这里需要自己手动添加很多代码
复制代码 代码如下: div id= draggableDiv class="ui widget content" 中间拖拽容器元素 /div script type=text/javascript $("#draggableDiv") draggable({ containment: "parent" drag: function (event ui) { console log("拖拽中"); } stop: function () { console log("拖拽结束"); } }); /script
第二步 将 要拖的元素内容复制到draggableDiv上 实现拖动父节点时 其下面的子节点元素也要拖放到右边 如果是拖动的子节点元素 就在右边直接显示子节 点元素 父节点和子节点是相对的 因为左侧树形结构的节点可以是无限级的 所以一个元素既可能是子节点元素 也会是父节点元素 通过监听鼠标的 mousedown和mouseup事件 来判断用户在拖动元素 这步的原理如下图所示 当 用户拖动B节点时 首先把B元素上的内容复制给draggableDiv元素 当用户拖动B元素 其实是拖动draggableDiv元素 所以我们要计 算出我们点击的B元素的位置 然后让draggableDiv在拖动时候显示正确的位置 然后拖动就是draggableDiv元素 用户看起来是拖动的 B节点元素
复制代码 代码如下: var clickElement = null; $(" threepanels ptreelist") bind("mousedown" function (event) { //获取当前mousedown元素的内容 var itemContent = $(this) (); var draggableDiv = $("#draggableDiv"); $(draggableDiv) css({ "display": "block" "height": }); //将点击的元素内容复制 clickElement = $(this) clone(); var currentdiv = $(this) offset(); $(draggableDiv) css({ "top": currentdiv top "left": currentdiv left }); draggableDiv trigger(event); //取消默认行为 return false; }); $("#draggableDiv") mouseup(function (event) { $(this) css({ "height": " " }); }); //拖动元素时鼠标的位置 var dragDivLeft = ; var dragDivTop = ; $("#draggableDiv") draggable({ containment: "parent" drag: function (event ui) { $("#draggableDiv") css({ "width": " px" "height": " px" }); $("#draggableDiv") append(clickElement); var closeTop = $(" closeBar") offset() top; dragDivLeft = event target offsetLeft; dragDivTop = event target offsetTop; } stop: function () { //拖拽结束 将拖拽容器内容清空 $("#draggableDiv") (""); $("#draggableDiv") css({"height":" "}); } }); lishixinzhi/Article/program/Java/JSP/201311/20005
Q3: jquery 移动端手指拖拽div四个边框，可上下左右随意拉伸调节div大小
jQuery拖拽通过八个点改变div大小
js:
(function($) {
/**
* 默认参数
*/
var defaultOpts = {
stage: document, //舞台
item: 'resize-item', //可缩放的类名
};
/**
* 定义类
*/
var ZResize = function(options) {
this.options = $.extend({}, defaultOpts, options);
this.init();
}
ZResize.prototype = {
init: function() {
this.initResizeBox();
},
/**
* 初始化拖拽item
*/
initResizeBox: function() {
var self = this;
$(self.options.item).each(function () {
//创建面板
var width = $(this).width();
var height = $(this).height();
var resizePanel = $('div class"resize-panel"/div');
resizePanel.css({
width: width,
height: height,
top: 0,
left: 0,
position: 'absolute',
'background-color': 'rgba(0,0,0,0.5)',
cursor: 'move',
display: 'none'
});
self.appendHandler(resizePanel, $(this));
/**
* 创建控制点
*/
var n = $('div class="n"/div');//北
var s = $('div class="s"/div');//南
var w = $('div class="w"/div');//西
var e = $('div class="e"/div');//东
var ne = $('div class="ne"/div');//东北
var nw = $('div class="nw"/div');//西北
var se = $('div class="se"/div');//东南
var sw = $('div class="sw"/div');//西南
//添加公共样式
self.addHandlerCss([n, s, w, e, ne, nw, se, sw]);
//添加各自样式
n.css({
'top': '-4px',
'margin-left': '-4px',
'left': '50%',
'cursor': 'n-resize'
});
s.css({
'bottom': '-4px',
'margin-left': '-4px',
'left': '50%',
'cursor': 's-resize'
});
e.css({
'top': '50%',
'margin-top': '-4px',
'right': '-4px',
'cursor': 'e-resize'
});
w.css({
'top': '50%',
'margin-top': '-4px',
'left': '-4px',
'cursor': 'w-resize'
});
ne.css({
'top': '-4px',
'right': '-4px',
'cursor': 'ne-resize'
});
nw.css({
top: '-4px',
'left': '-4px',
'cursor': 'nw-resize'
});
se.css({
'bottom': '-4px',
'right': '-4px',
'cursor': 'se-resize'
});
sw.css({
'bottom': '-4px',
'left': '-4px',
'cursor': 'sw-resize'
});
// 添加项目
self.appendHandler([n, s, w, e, ne, nw, se, sw], resizePanel);
//绑定拖拽缩放事件
self.bindResizeEvent(resizePanel, $(this));
//绑定触发事件
self.bindTrigger($(this));
});
self.bindHidePanel();
},
//控制点公共样式
addHandlerCss: function(els) {
for(var i = 0; i els.length; i++) {
el = els[i];
el.css({
position: 'absolute',
width: '8px',
height: '8px',
background: '#ff6600',
margin: '0',
'border-radius': '2px',
border: '1px solid #dd5500',
});
}
},
/**
* 插入容器
*/
appendHandler: function(handlers, target) {
for(var i = 0; i handlers.length; i++) {
el = handlers[i];
target.append(el);
}
},
/**
* 显示拖拽面板
*/
triggerResize: function(el) {
var self = this;
el.siblings(self.options.item).children('div').css({
display: 'none'
});
el.children('div').css({
display: 'block'
});
},
/**
* 拖拽事件控制 包含8个缩放点 和一个拖拽位置
*/
bindResizeEvent: function(el) {
var self = this;
var ox = 0; //原始事件x位置
var oy = 0; //原始事件y位置
var ow = 0; //原始宽度
var oh = 0; //原始高度
var oleft = 0; //原始元素位置
var otop = 0;
var org = el.parent('div');
//东
var emove = false;
el.on('mousedown','.e', function(e) {
ox = e.pageX;//原始x位置
ow = el.width();
emove = true;
});
//南
var smove = false;
el.on('mousedown','.s', function(e) {
oy = e.pageY;//原始x位置
oh = el.height();
smove = true;
});
//西
var wmove = false;
el.on('mousedown','.w', function(e) {
ox = e.pageX;//原始x位置
ow = el.width();
wmove = true;
oleft = parseInt(org.css('left').replace('px', ''));
});
//北
var nmove = false;
el.on('mousedown','.n', function(e) {
oy = e.pageY;//原始x位置
oh = el.height();
nmove = true;
otop = parseInt(org.css('top').replace('px', ''));
});
//东北
var nemove = false;
el.on('mousedown','.ne', function(e) {
ox = e.pageX;//原始x位置
oy = e.pageY;
ow = el.width();
oh = el.height();
nemove = true;
otop = parseInt(org.css('top').replace('px', ''));
});
//西北
var nwmove = false;
el.on('mousedown','.nw', function(e) {
ox = e.pageX;//原始x位置
oy = e.pageY;
ow = el.width();
oh = el.height();
otop = parseInt(org.css('top').replace('px', ''));
oleft = parseInt(org.css('left').replace('px', ''));
nwmove = true;
});
//东南
var semove = false;
el.on('mousedown','.se', function(e) {
ox = e.pageX;//原始x位置
oy = e.pageY;
ow = el.width();
oh = el.height();
semove = true;
});
//西南
var swmove = false;
el.on('mousedown','.sw', function(e) {
ox = e.pageX;//原始x位置
oy = e.pageY;
ow = el.width();
oh = el.height();
swmove = true;
oleft = parseInt(org.css('left').replace('px', ''));
});
//拖拽
var drag = false;
el.on('mousedown', function(e) {
ox = e.pageX;//原始x位置
oy = e.pageY;
otop = parseInt(org.css('top').replace('px', ''));
oleft = parseInt(org.css('left').replace('px', ''));
drag = true;
});
$(self.options.stage).on('mousemove', function(e) {
if(emove) {
var x = (e.pageX - ox);
el.css({
width: ow + x
});
org.css({
width: ow + x
});
} else if(smove) {
var y = (e.pageY - oy);
el.css({
height: oh + y
});
org.css({
height: oh + y
});
} else if(wmove) {
var x = (e.pageX - ox);
el.css({
width: ow - x,
// left: oleft + x
});
org.css({
width: ow - x,
left: oleft + x
});
} else if(nmove) {
var y = (e.pageY - oy);
el.css({
height: oh - y,
// top: otop + y
});
org.css({
height: oh - y,
top: otop + y
});
} else if(nemove) {
var x = e.pageX - ox;
var y = e.pageY - oy;
el.css({
height: oh - y,
// top: otop + y,
width: ow + x
});
org.css({
height: oh - y,
top: otop + y,
width: ow + x
});
} else if(nwmove) {
var x = e.pageX - ox;
var y = e.pageY - oy;
el.css({
height: oh - y,
// top: otop + y,
width: ow - x,
// left: oleft + x
});
org.css({
height: oh - y,
top: otop + y,
width: ow - x,
left: oleft + x
});
} else if(semove) {
var x = e.pageX - ox;
var y = e.pageY - oy;
el.css({
width: ow + x,
height: oh + y
});
org.css({
width: ow + x,
height: oh + y
});
} else if(swmove) {
var x = e.pageX - ox;
var y = e.pageY - oy;
el.css({
width: ow - x,
// left: oleft + x,
height: oh + y
});
org.css({
width: ow - x,
left: oleft + x,
height: oh + y
});
} else if(drag) {
var x = e.pageX - ox;
var y = e.pageY - oy;
org.css({
left: oleft + x,
top: otop + y
});
}
}).on('mouseup', function(e) {
emove = false;
smove = false;
wmove = false;
nmove = false;
nemove = false;
nwmove = false;
swmove = false;
semove = false;
drag = false;
});
},
/**
* 点击item显示拖拽面板
*/
bindTrigger: function(el) {
var self = this;
el.on('click', function(e) {
e.stopPropagation();
self.triggerResize(el);
});
},
/**
* 点击舞台空闲区域 隐藏缩放面板
*/
bindHidePanel: function(el) {
var stage = this.options.stage;
var item = this.options.item;
$(stage).bind('click', function() {
$(item).children('div').css({
display: 'none'
});
})
}
}
window.ZResize = ZResize;
})(jQuery);
html:
!doctype html
html
head
meta charset="utf-8"
titlejQuery拖拽放大缩小插件idrag/title
meta http-equiv="Content-Type" content="text/html; charset=utf-8"
style type="text/css"
.item1 {
width: 405px;
height: 291px;
cursor: move;
position: absolute;
top: 30px;
left: 30px;
background-color: #FFF;
border: 1px solid #CCCCCC;
-webkit-box-shadow: 10px 10px 25px #ccc;
-moz-box-shadow: 10px 10px 25px #ccc;
box-shadow: 10px 10px 25px #ccc;
}
.item2 {
width: 200px;
height: 100px;
cursor: move;
position: absolute;
top: 400px;
left: 100px;
background-color: #FFF;
border: 1px solid #CCCCCC;
-webkit-box-shadow: 10px 10px 25px #ccc;
-moz-box-shadow: 10px 10px 25px #ccc;
box-shadow: 10px 10px 25px #ccc;
line-height: 100px;
text-align: center;
}
body {
background-color: #F3F3F3;
}
/style
/head
body
div id="mydiv" style="width:800px; height:800px; border-style:solid"
div id="div1" class="resize-item item1"
img src="images/dog.png" width="100%" height="100%"
/div
div class="resize-item item2"
你是我的小小狗
/div
/div
script src="jquery.min.js"/script
script type="text/javascript" src='jquery.ZResize.js'/script
script type="text/javascript"
new ZResize({
stage: "#mydiv", //舞台
item: '#div1', //可缩放的类名
});
/script
/body
/html
Q4: jquery layout插件怎么改变各区域大小
必须的文件是，jquery.js，jquery-ui.js，还有就是这个插件的js。但在研究的过程中发现了一个问题，在官网下载的js是有问题的，甚至性能上都有问题。
要下载官网示例中使用的js，切记。
地址：
Q5: 如何利用jquery animation把图像拉伸变大
img id="i" src="#" style="width:100px;height:100px"/
$("#i").animate({width: 400,height:400},500)
这个看得懂吧
关于jquery拉伸区域和jquery怎么实现伸缩菜单栏的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。
