<!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大小随意伸缩的更多相关文章

  1. 模仿iframe框架，由分隔栏动态改变左右两侧div大小———基于jQuery

    <!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8&qu ...

  2. js div及table首行顶部吸附示例

    js div顶部吸附示例,例如这样: 以下为DIV顶部吸附示例:(此示例来自于网络,在此记录与分享!感谢原作者!) 示例1:兼容IE6 <div style="height:300px ...

  3. marquee实现文字移动效果;js+div实现文字无缝移动效果

    1.marquee实现文字移动: <marquee width="220px;" scrollamount="5" onmouseover="t ...

  4. js div浮动层拖拽效果代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. CSS3 resize属性 调整div大小

    resize 用户可调整div大小  IE不支持 none 不可调整元素尺寸 both 可调整宽度高度 horizontal 可调整宽度 vertical 可调整高度 注意:如果属性生效,必须设置元素 ...

  6. div大小如何改变设置

    如果改变更改div大小尺寸. 首先我们要知道DIV大小是由高和宽确定,要修改DIV容积大小我们设置css宽度和css高度即可实现改变DIV盒子大小. 一.改变div大小实例 为了实验便于观察DIV盒子 ...

  7. 使用three.js创建大小不随着场景变化的文字

    使用three.js创建大小不随着场景变化的文字,需要以下两步: 1.将文字绘制到画布上. 2.创建着色器材质,把文字放到三维场景中. 优点: 1.跟用html实现文字相比,这些文字可以被模型遮挡,更 ...

  8. js 图片区域可点击，适配移动端，图片大小随意改变

    实现图片区域可点击,实际上使用map是可以的,但是适配效果并不好,图片只能是固定大小的值,而且点都被写死了. 在这里,我使用的js基于canvas写的一个小工具.可以圈出你需要点击的部分,然后生成一串 ...

  9. tbl.js div实现的表格控件,完全免费,no jquery

    html上现在有比较好用的表格控件是datatable,但是编辑.按钮等部分是收费的,只有基础功能免费.而且尺寸发生变化时需要手工刷新等繁琐操作较多.所以我开发一个免费的供大家使用. 本项目已用于“虚 ...

随机推荐

  1. UVaLive 7454 Parentheses (水题，贪心)

    题意:给定一个括号序列,改最少的括号,使得所有的括号匹配. 析:贪心,从左到右扫一下,然后统计一下左括号和右括号的数量,然后在统计中,如果有多了的右括号,那么就改成左括号,最后如果两括号数量不相等, ...

  2. C#SuperSocket的搭建--通过配置启动

    之前我们借助一个SuperSocket实现了一个简易版的服务器, 但是不管是Server还是Session都是使用框架的,本篇博客我们要实现自己的Server和Session,来重写框架原生的Serv ...

  3. POJ - 1661 - Help Jimmy - 简单dp

    http://poj.org/problem?id=1661 一般化处理,把一开始的落地和大地都视作平台,设计平台类的属性.dp的时候显然是从上往下dp的,而且要小心Jimmy不能够穿过平台,也就是从 ...

  4. poj 1743 Musical Theme【二分+SA】

    差分,然后二分长度mid,判断是把height按照min不小于mid分组,取最大最小的sa位置看是否>=mid即可,注意差分后最后答案要+1 #include<iostream> # ...

  5. Codeforces731E Funny Game

    dp[i][0]表示从i出发,轮到先手走的最优值. dp[i][1]表示从i出发,轮到后手走的最优值. dp[i][0]=max(dp[j][1]+sum[j]) dp[i][1]=min(dp[j] ...

  6. 跟我一起玩Win32开发（5）：具有单选标记的菜单

    帅哥们,美女们,下午好,我又来误人子弟,请做好准备. 今天,我们的目的是,想要实现下图中的这种菜单效果. 就是一种类似单选按钮的菜单,多个菜单项中,同时只有一个会被选中. 首先,我们在资源编辑器中,设 ...

  7. 关于itchat用法的一篇博文

    itchat的原理就是利用爬虫爬取了网页版微信的内容,并进行一系列的操作,运用微信,通过手机与电脑时登录的互通性,可以实现用微信对电脑的操作,通过itchat.msg_register方法,可以得到目 ...

  8. 138 Copy List with Random Pointer 复制带随机指针的链表

    给出一个链表,每个节点包含一个额外增加的随机指针,该指针可以指向链表中的任何节点或空节点.返回一个深拷贝的链表. 详见:https://leetcode.com/problems/copy-list- ...

  9. [已读]图解CSS3核心技术与案例实战

    买的时候犹豫了好久,也征询了下几个前端朋友.我一直蛮怕买华章的书,好在这本内容很不错,买得值了. 大漠的css功底很深厚,这本书也很厚= =,读完之后对css圆角以及background-origin ...

  10. P1851 好朋友

    题目背景 小可可和所有其他同学的手腕上都戴有一个射频识别序列号码牌,这样老师就可以方便的计算出他们的人数.很多同学都有一个“好朋友” .如果 A 的序列号的约数之和恰好等于B 的序列号,那么 A的好朋 ...