jQuery拖拽拉伸缩放插件l_zoom

所属分类：输入-拖和放

28786 328 查看评论 (7)

分享到微信朋友圈

查看演示立即下载

插件描述：简约版拖拽拉伸缩放原生jQuery插件包含自由缩放和等比例缩放模式经典还远网页文本框操作简单

更新时间：2019/4/3 上午10:46:28

更新说明：增加使用说明；代码如下：

$('.sll').l_zoom('auto');  //第一个、第二个方块
$('.skk').l_zoom('free').l_drag()   //第三个方块采用jquery经典链式编程思想，可以直接穿插在jquery库的方法里使用，只要在jquery对象后点出来使用即可转化成相应元素，操作简便

更新时间：2019/4/2 上午10:42:37

更新说明：new jquery对象点出l_drag方法即可转换成可拖拽元素,仿jquery,经典链式编程只要在后面点出来即可调用转化成你想要的元素

使用方法

鼠标移动到添加元素的右侧，右下方，下方可进行拖拽缩放
引入依赖：l_zoom.css、jquery.js、l_zoom.js

<link rel="stylesheet" href="css/l_zoom.css">
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="js/l_zoom.min.js"></script>

jquery对象点出l_zoom方法即可转换成可缩放元素

$('.sll').l_zoom('auto');
$('.skk').l_zoom('free')

,配置信息：等比缩放:auto 自由缩放:free

jQuery视频播放插件jsModern（修改版）

仿照微信群头像的自适应样式布局

拖动排序插件

实现在两个div中，互相自由的拖动，并且排序

拖和放

51505 484

图标拖拽效果，兼容所有浏览器

原生JS实现图标图片拖拽，封装好了，可以直接拿去使用

拖和放

38694 374

htmlt拖放

html5拖放排序

拖和放

29309 318

jQuery图片DIV指定范围内拖动加调整大小

实现在指定大小DIV内拖动图片，以及调整图片大小

拖和放

46672 390

讨论这个项目（7）回答他人问题或分享插件使用方法奖励jQ币评论用户自律公约

你亲爱的郭哥哥 0

2020/8/18 21:04:59

Microhuu 0

2019/8/15 16:52:27

飘渺的灵魂1

2020/8/13 13:55:13

不知道你能不能看到了，今天我也碰到这个需求了，主要利用left属性，实现了左侧的效果，如下：

$(".zoom_left").mousedown(function(h) {
    var g = $(this);
    var h = event || window.event;
    h.stopPropagation();
    var f = parseInt(g.parent().css("width"));
    var left = parseInt(g.parent().css("left"));
    var d = {
        x: h.clientX,
        y: h.clientY
    };
    window.onmousemove = function(i) {
        var i = event || window.event;
        g.parent().css("left", left - (d.x - i.clientX));
        g.parent().css("width", f + d.x - i.clientX);
    };
    window.onmouseup = function(i) {
        var i = event || window.event;
        window.onmousemove = null
    }
});