`
kstgjfk403
  • 浏览: 30580 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

24行代码,让你的网页元素任意放大、缩小、拖拽、移动(转)

阅读更多
$(document).mousemove(function(e) {
    if (!!this.move) {
        var posix = !document.move_target ? {'x': 0, 'y': 0} : document.move_target.posix,
            callback = document.call_down || function() {
                $(this.move_target).css({
                    'top': e.pageY - posix.y,
                    'left': e.pageX - posix.x
                });
            };
 
        callback.call(this, e, posix);
    }
}).mouseup(function(e) {
    if (!!this.move) {
        var callback = document.call_up || function(){};
        callback.call(this, e);
        $.extend(this, {
            'move': false,
            'move_target': null,
            'call_down': false,
            'call_up': false
        });
    }
});
分享到:
评论

相关推荐

    网页实现任意放大、缩小、拖拽、移动drag+jquery+html.rar

    在网页开发中,实现元素的放大、缩小、拖拽和移动功能是常见的需求,这能够增强用户的交互体验,尤其在创建交互式应用或富媒体网站时。本项目通过结合使用drag(拖拽)、jQuery和HTML技术,提供了一种实现此类功能的...

    DIV可移动 可实现任意拖动放大缩小

    标题中的“DIV可移动 可实现任意拖动放大缩小”是指一种使用JavaScript技术来实现的交互功能,允许用户在网页上自由地拖动、缩放HTML中的div元素。这一功能通常用于创建用户界面元素,如窗口、面板或者任何需要动态...

    微信小程序内拖动图片实现移动、放大、旋转的方法

    微信小程序内拖动图片实现移动、放大、旋转的方法涉及的技术点包括:触摸事件处理、画布绘图以及动态数据更新。以下是详细的技术知识点。 首先,了解微信小程序的基本布局和事件系统是关键。微信小程序的页面结构由...

    鼠标操作矩形框GDI绘图可放大缩小,拖动矩形框

    在给定的“鼠标操作矩形框GDI绘图可放大缩小,拖动矩形框”主题中,我们将深入探讨如何使用GDI实现这些功能。 首先,我们需要理解GDI的基本概念。GDI是Windows API的一部分,它为应用程序提供了一组函数,允许程序...

    用c#实现画图功能,可以画出各种图形,如矩形,圆形,菱形等,还可以随意拖动,放大缩小

    - **放大缩小**:可以通过改变`PictureBox`的`Zoom`属性实现,或者直接缩放图形的尺寸。 5. **保存与加载图形**: 使用序列化技术(如`XmlSerializer`)保存图形的坐标和属性到文件,加载时反序列化恢复。 6. **...

    c# gdi 矩形 鼠标拖动调整大小旋转

    本文将详细讲解如何利用C#的GDI+实现矩形的绘制、大小调整、拖动移动以及鼠标操作下的任意角度旋转。 首先,我们需要了解GDI+的基本元素,包括Graphics对象、Pen对象和Brush对象。Graphics对象用于绘制图形,Pen...

    QT画板,支持图形的绘制,移动与拖拽、放大缩小、旋转、复制粘贴

    这个应用的核心特性包括图形的绘制、移动与拖拽、放大缩小、旋转、复制粘贴以及撤销重做操作。以下是对这些功能的详细说明: 1. **图形绘制**:QT画板允许用户绘制多种基本图形,如矩形、多边形、椭圆、直线和曲线...

    js模拟windows窗口效果,支持窗口放大,缩小,关闭,还原,或者在网页内任意地方拖拽

    本教程将深入探讨如何使用JavaScript实现窗口的常见操作,如放大、缩小、关闭、还原以及在网页内任意位置拖拽。 首先,我们需要创建一个HTML元素来作为我们的"窗口"。这个元素可以是`div`或者其他任何块级元素,...

    jquery iviewer jquery图片查看工具(放大、缩小、旋转、可二次开发)

    jQuery iViewer是一款基于JavaScript库jQuery的图片查看工具,它提供了丰富的功能,包括图片的放大、缩小、旋转以及拖拽等操作,极大地提升了用户在网页上的图片浏览体验。这款插件设计简洁,易于集成到任何Web项目...

    D3.js实现人物关系图谱有移动、拖拽、放大功能

    在“D3.js实现人物关系图谱有移动、拖拽、放大功能”这个主题中,我们将深入探讨如何利用D3.js来创建交互式的人物关系网络图,并实现平移、缩放和拖拽等动态效果。 首先,理解D3.js的基础是关键。D3.js全称为Data-...

    谷歌地图查找效果,可以放大,缩小

    在标签中提到了“图片拖动”和“图片放大缩小”,这进一步证实了上述技术路线。对于图片拖动,除了监听鼠标的事件,还需要考虑到边界检测,以防止图片超出容器范围。对于放大缩小,需要确保比例的正确计算,保持地图...

    放大缩小图片

    最后,压缩包中的"放大缩小图片"可能包含了一些示例代码或库文件,可以帮助你快速集成到自己的项目中。在使用这些资源时,确保遵循相关的开源协议,并理解其工作原理,以便于后续的维护和扩展。 总之,实现图片的...

    矢量图绘制-支持放大缩小、拖拽

    "支持放大缩小、拖拽"的功能对于地图应用来说至关重要。用户需要能自由地查看地图的任意区域,无论是放大查看某个街道的细节,还是缩小鸟瞰整个城市。在Android中,我们可以使用自定义的ImageView子类,如...

    js图片查看器。鼠标拖动图片任意方向旋转,鼠标滚动滚轮缩放,任意角度翻转。

    2. **图片缩放**:图片查看器支持鼠标滚轮缩放,当用户滚动鼠标滚轮时,图片会相应地放大或缩小。这个功能可以通过调整图片的CSS样式(如`transform: scale()`)或者使用Canvas元素的`drawImage()`方法来实现。 3. ...

    可缩放、拖动、自适应布局组件demo

    首先,"拖动"(dragable)功能是通过JavaScript库或者框架的API实现的,它允许用户通过鼠标或触摸设备直接操纵界面上的元素,将其移动到任意位置。这通常涉及到事件监听(如mousedown、mousemove和mouseup),以及...

    SVG整体缩放拖动创建元素.rar

    SVG(Scalable Vector Graphics)是一种基于XML的矢量图形格式,它允许在网页上创建和显示复杂的图形,包括文字、线条、形状等,并且这些图形可以无损地放大或缩小,保持清晰度不变。SVG的优势在于其可编程性,可以...

    ppt中可任意放大移动图片的插件(播放状态下)

    这是用vba开发,然后用vb封装的,在ppt播放时可随意放大缩小其中图片的插件,具体使用方法请看其中说明及示例,如果觉得好用,但还有其它问题的话,请与我联系!QQ:499296471

    uniapp海报内容并生成海报二维码图片(可拖拽,可调节大小)

    在描述中提到的“可拖拽,可调节大小”特性,指的是用户可以通过拖动和缩放操作来改变海报上的元素位置和尺寸。uniapp提供了触摸事件处理和计算布局的方法,我们可以监听用户的触摸事件,根据手指移动或缩放的动作...

    vtk画矩形,可以随意拖动和缩放。

    vtk中的例子TestvtkAffineWidget 可以画矩形和圆,但是矩形和圆都不能移动和缩放,本内容改造了vtkAffineRepresentation2D , 使矩形和圆都可以放大和缩小。也可以移动,满足了测量的需求,可以用它来对选择的感兴趣...

    winform无边框在panel上拖动窗口位置,改变窗口大小

    在Windows Forms应用开发中,有时候我们可能希望创建一个没有边框的窗口,使得界面看起来更加简洁,但同时又需要保留窗口的基本操作,如拖动和调整大小。标题“winform无边框在panel上拖动窗口位置,改变窗口大小”...

Global site tag (gtag.js) - Google Analytics