js div大小随意伸缩
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jqeruy UI </title>
<link href="http://www.jq22.com/demo/jQuery-tddx20161230/css/jquery-ui.css" rel="stylesheet" type="text/css">
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="http://www.jq22.com/jquery/jquery-ui-1.11.0.js"></script>
<script>
$.fn.extend({dragging:function(data){var $this=$(this);var xPage;var yPage;var X;var Y;var xRand=0;var yRand=0;var father=$this.parent();var defaults={move:'both',randomPosition:true,hander:1}
var opt=$.extend({},defaults,data);var movePosition=opt.move;var random=opt.randomPosition;var hander=opt.hander;if(hander==1){hander=$this;}else{hander=$this.find(opt.hander);}
father.css({"position":"relative","overflow":"hidden"});$this.css({"position":"absolute"});hander.css({"cursor":"move"});var faWidth=father.width();var faHeight=father.height();var thisWidth=$this.width()+parseInt($this.css('padding-left'))+parseInt($this.css('padding-right'));var thisHeight=$this.height()+parseInt($this.css('padding-top'))+parseInt($this.css('padding-bottom'));var mDown=false;var positionX;var positionY;var moveX;var moveY;if(random){$thisRandom();}
function $thisRandom(){$this.each(function(index){var randY=parseInt(Math.random()*(faHeight-thisHeight));var randX=parseInt(Math.random()*(faWidth-thisWidth));if(movePosition.toLowerCase()=='x'){$(this).css({left:randX});}else if(movePosition.toLowerCase()=='y'){$(this).css({top:randY});}else if(movePosition.toLowerCase()=='both'){$(this).css({top:randY,left:randX});}});}
hander.mousedown(function(e){father.children().css({"zIndex":"0"});$this.css({"zIndex":"1"});mDown=true;X=e.pageX;Y=e.pageY;positionX=$this.position().left;positionY=$this.position().top;return false;});$(document).mouseup(function(e){mDown=false;});$(document).mousemove(function(e){xPage=e.pageX;moveX=positionX+xPage-X;yPage=e.pageY;moveY=positionY+yPage-Y;function thisXMove(){if(mDown==true){$this.css({"left":moveX});}else{return;}
if(moveX<0){$this.css({"left":"0"});}
if(moveX>(faWidth-thisWidth)){$this.css({"left":faWidth-thisWidth});}
return moveX;}
function thisYMove(){if(mDown==true){$this.css({"top":moveY});}else{return;}
if(moveY<0){$this.css({"top":"0"});}
if(moveY>(faHeight-thisHeight)){$this.css({"top":faHeight-thisHeight});}
return moveY;}
function thisAllMove(){if(mDown==true){$this.css({"left":moveX,"top":moveY});}else{return;}
if(moveX<0){$this.css({"left":"0"});}
if(moveX>(faWidth-thisWidth)){$this.css({"left":faWidth-thisWidth});}
if(moveY<0){$this.css({"top":"0"});}
if(moveY>(faHeight-thisHeight)){$this.css({"top":faHeight-thisHeight});}}
if(movePosition.toLowerCase()=="x"){thisXMove();}else if(movePosition.toLowerCase()=="y"){thisYMove();}else if(movePosition.toLowerCase()=='both'){thisAllMove();}});}});
</script>
<style>
body{
background: #000;
}
#target
{
height:400px;
width:400px;
background: #0a6aa1;
margin:50px auto;
position: relative;
} </style>
</head>
<body> <div id="target" class="ui-widget-content">
<i class='hander'></i>
</div>
</body>
<script>
$('#target div').each(function() {
$(this).dragging({
move: 'both',
randomPosition: true,
hander: '.hander'
});
}); $(function() {
$("#target").resizable({
aspectRatio: true//开启按比例缩放，也可以指定比例： 16 / 9
});
}); </script>
</html>
js div大小随意伸缩的更多相关文章
- 模仿iframe框架，由分隔栏动态改变左右两侧div大小———基于jQuery
<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8&qu ...
- js div及table首行顶部吸附示例
js div顶部吸附示例,例如这样: 以下为DIV顶部吸附示例:(此示例来自于网络,在此记录与分享!感谢原作者!) 示例1:兼容IE6 <div style="height:300px ...
- marquee实现文字移动效果;js+div实现文字无缝移动效果
1.marquee实现文字移动: <marquee width="220px;" scrollamount="5" onmouseover="t ...
- js div浮动层拖拽效果代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- CSS3 resize属性 调整div大小
resize 用户可调整div大小 IE不支持 none 不可调整元素尺寸 both 可调整宽度高度 horizontal 可调整宽度 vertical 可调整高度 注意:如果属性生效,必须设置元素 ...
- div大小如何改变设置
如果改变更改div大小尺寸. 首先我们要知道DIV大小是由高和宽确定,要修改DIV容积大小我们设置css宽度和css高度即可实现改变DIV盒子大小. 一.改变div大小实例 为了实验便于观察DIV盒子 ...
- 使用three.js创建大小不随着场景变化的文字
使用three.js创建大小不随着场景变化的文字,需要以下两步: 1.将文字绘制到画布上. 2.创建着色器材质,把文字放到三维场景中. 优点: 1.跟用html实现文字相比,这些文字可以被模型遮挡,更 ...
- js 图片区域可点击，适配移动端，图片大小随意改变
实现图片区域可点击,实际上使用map是可以的,但是适配效果并不好,图片只能是固定大小的值,而且点都被写死了. 在这里,我使用的js基于canvas写的一个小工具.可以圈出你需要点击的部分,然后生成一串 ...
- tbl.js div实现的表格控件,完全免费,no jquery
html上现在有比较好用的表格控件是datatable,但是编辑.按钮等部分是收费的,只有基础功能免费.而且尺寸发生变化时需要手工刷新等繁琐操作较多.所以我开发一个免费的供大家使用. 本项目已用于“虚 ...
随机推荐
- 洛谷 - P1403 - 约数研究 - 数论
https://www.luogu.org/problemnew/show/P1403 可以直接用线性筛约数个数求出来,但实际上n以内i的倍数的个数为n/i的下整,要求的其实是 $$\sum\limi ...
- 图论之最短路算法之SPFA算法
SPFA(Shortest Path Faster Algorithm)算法,是一种求最短路的算法. SPFA的思路及写法和BFS有相同的地方,我就举一道例题(洛谷--P3371 [模板]单源最短路径 ...
- SQL_MODE 的设置
查看当前的 SQL_MODE SELECT @@sql_mode SELECT @@sql_mode 的执行结果 mysql> SELECT @@sql_mode; +------------- ...
- oauth2(spring security)报错method_not_allowed(Request method 'GET' not supported)解决方法
报错信息 <MethodNotAllowed> <error>method_not_allowed</error> <error_description> ...
- PostgreSQL - 官方手册、中文手册及Github项目地址
PostgreSQL每次更新都会有语法变化,低版本的PostgreSQL是无法运行高版本的sql语法的,下边是官方手册地址,可以查看多个版本的: https://www.postgresql.org/ ...
- only-child选择器
:only-child选择器用于匹配属于某一个父元素的唯一子元素的元素,也就是说,如果某个父元素仅有一个子元素,则使用 :only-chlid选择器 ,可以选择这个子元素
- 后缀数组 DC3构造法 —— 详解
学习了后缀数组,顺便把DC3算法也看了一下,传说中可以O(n)复杂度求出文本串的height,先比较一下倍增算法和DC3算法好辣. DC3 倍增法 时间复杂度 O(n)(但是常数很大) O(nlo ...
- 1-18String类简介
字符串(String)的不可变性 String类在java.lang包下面,是Object类的直接子类,通过API或者源码可以看到,String类是final修饰的,这说明String类不能被继承. ...
- 访问github.com太慢的解决方法
修改 c:\windows\system32\drivers\etc\host文件添加 192.30.255.112 github.com 151.101.72.249 github.global.s ...
- SpringBoot 2.x （7）：拦截器
类似以前SpringMVC的拦截器,但也有一些区别 SpringBoot的拦截器有两种方式: 第一种方式:过时的方式,适用于SpringBoot1.x的方式 package org.dreamtech ...