文档章节

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

黄梦巍
 黄梦巍
发布于 2014/06/08 12:34
字数 90
阅读 1622
收藏 35
点赞 0
评论 2

基于JQuery:

$(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
        });
    }
});



在线演示,原理分析,请查看   http://levi.cg.am/?p=3486

本文转载自:http://levi.cg.am/?p=3486

共有 人打赏支持
黄梦巍

黄梦巍

粉丝 14
博文 52
码字总数 6032
作品 0
福州
高级程序员
加载中

评论(2)

巫云
巫云
这个做示例不错,一般干活中还是用jquery ui的库吧,兼容性好一些
徐贺年
徐贺年
好东西!学习了
百度地图新手教程7(转载自百度)

工具 1.地图工具概述 2.向地图添加工具 3.通过按钮控制工具的开启和关闭 4.拉框放大工具 地图工具概述 提示:工具已经制作成开源库(lib)对外免费开放,可直接访问JavaScript 开源库。若您需...

长平狐 ⋅ 2013/01/06 ⋅ 0

15款提高表格操作的jQuery插件

table表格由于它的浏览器兼容性和复杂的标签嵌套方式,可以算是添加样式最困难的对象之一了。大多数前端er都把网页中的table标签替换为div,主要就是因为div要比table更容易添加CSS样式。但是...

鉴客 ⋅ 2010/08/12 ⋅ 1

Silverlight Gantt甘特图控件详细介绍

Silverlight Gantt甘特图是一款非常丰富,可定制,轻量级和高性能的控件。 项目甘特图: 可视化层次的任务列表。 可移动和拖拽调整条形图 可视化时间编辑器 编辑任务依赖关系 调整任务进度条 ...

yidongkaifa ⋅ 2014/06/09 ⋅ 1

【作图】origin制作图中图

在origin里曲线做好,想局部放大,并把局部放大的部分同样放在这个曲线图里,如何操作? origin里有一种zoom的图,即所说的局部放大,已经做好曲线的话,可以先点击放大工具(就是工具栏里的...

ztf312 ⋅ 03/20 ⋅ 0

9款风格华丽的jQuery/CSS3插件

今天向大家分享9款效果相当不错的jQuery/CSS3插件,不多说,直接来看看这些插件吧。 1、jQuery动画下拉菜单Smart Menu 这是一款基于jQuery的动画下拉菜单,子菜单外观比较时尚,鼠标移到菜单...

yykj ⋅ 2014/01/06 ⋅ 1

sonyvegas基本操作及快捷键

sonyvegas基本操作 魅力网络今天用vegas处理音频,把音频就行分割合并,用到的快捷有S 截断 M 打点 G 组合 U 解组 音频变速:右击属性,选典型 自己手动填需要加长到的时间。 分割视频 :U键...

yeybz ⋅ 2017/09/20 ⋅ 0

一个可拖拽的React标签组件

最近的项目里需要实现一个标签组件,内部标签可任意拖动排序。网上搜了一圈发现几乎没有现成的基于react的组件能很好的满足需求。 较为知名的是react-dnd,然而它似乎只支持把一个元素移到固...

YGYOOO ⋅ 05/28 ⋅ 0

CSS 修改 IOS 默认按钮样式

不知道大家在做移动端页面的时候有没遇到过在 IOS 端 一些按钮显示和安卓的截然不同,今天下午又有一个小伙在群里问这个问题。我记得之前我也遇到过,今天给大家分享一下怎么使用 CSS修改IOS...

VIP_web ⋅ 2016/05/31 ⋅ 0

scrollview的一些代理方法

//只要滚动了就会触发 - (void)scrollViewDidScroll:(UIScrollView )scrollView; { NSLog(@" scrollViewDidScroll"); } //开始拖拽视图 - (void)scrollViewWillBeginDragging:(UIScrollView ......

天使雨儿 ⋅ 2015/12/16 ⋅ 0

HTML 5 & CSS 3 的新交互特性

本文标题的这副图片,是用Phosotshop制作的。但是,在搜索引擎中你却无法搜索到它,搜索引擎还没有强大到能够识别图片里面的文字。并且由 于图片的体积不算太小,可能网速慢的网友在浏览的时...

楚广明 ⋅ 2011/12/19 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

用ZBLOG2.3博客写读书笔记网站能创造今日头条的辉煌吗?

最近两年,著名的自媒体网站今日头条可以说是火得一塌糊涂,虽然从目前来看也遇到了一点瓶颈,毕竟发展到了一定的规模,继续增长就更加难了,但如今的今日头条规模和流量已经非常大了。 我们...

原创小博客 ⋅ 25分钟前 ⋅ 0

MyBatis四大核心概念

本文讲解 MyBatis 四大核心概念(SqlSessionFactoryBuilder、SqlSessionFactory、SqlSession、Mapper)。 MyBatis 作为互联网数据库映射工具界的“上古神器”,训有四大“神兽”,谓之:Sql...

waylau ⋅ 45分钟前 ⋅ 0

以太坊java开发包web3j简介

web3j(org.web3j)是Java版本的以太坊JSON RPC接口协议封装实现,如果需要将你的Java应用或安卓应用接入以太坊,或者希望用java开发一个钱包应用,那么用web3j就对了。 web3j的功能相当完整...

汇智网教程 ⋅ 58分钟前 ⋅ 0

2个线程交替打印100以内的数字

重点提示: 线程的本质上只是一个壳子,真正的逻辑其实在“竞态条件”中。 举个例子,比如本题中的打印,那么在竞态条件中,我只需要一个方法即可; 假如我的需求是2个线程,一个+1,一个-1,...

Germmy ⋅ 今天 ⋅ 0

Springboot2 之 Spring Data Redis 实现消息队列——发布/订阅模式

一般来说,消息队列有两种场景,一种是发布者订阅者模式,一种是生产者消费者模式,这里利用redis消息“发布/订阅”来简单实现订阅者模式。 实现之前先过过 redis 发布订阅的一些基础概念和操...

Simonton ⋅ 今天 ⋅ 0

error:Could not find gradle

一.更新Android Studio后打开Project,报如下错误: Error: Could not find com.android.tools.build:gradle:2.2.1. Searched in the following locations: file:/D:/software/android/andro......

Yao--靠自己 ⋅ 昨天 ⋅ 0

Spring boot 项目打包及引入本地jar包

Spring Boot 项目打包以及引入本地Jar包 [TOC] 上篇文章提到 Maven 项目添加本地jar包的三种方式 ,本篇文章记录下在实际项目中的应用。 spring boot 打包方式 我们知道,传统应用可以将程序...

Os_yxguang ⋅ 昨天 ⋅ 0

常见数据结构(二)-树(二叉树,红黑树,B树)

本文介绍数据结构中几种常见的树:二分查找树,2-3树,红黑树,B树 写在前面 本文所有图片均截图自coursera上普林斯顿的课程《Algorithms, Part I》中的Slides 相关命题的证明可参考《算法(第...

浮躁的码农 ⋅ 昨天 ⋅ 0

android -------- 混淆打包报错 (warning - InnerClass ...)

最近做Android混淆打包遇到一些问题,Android Sdutio 3.1 版本打包的 错误如下: Android studio warning - InnerClass annotations are missing corresponding EnclosingMember annotation......

切切歆语 ⋅ 昨天 ⋅ 0

eclipse酷炫大法之设置主题、皮肤

eclipse酷炫大法 目前两款不错的eclipse 1.系统设置 Window->Preferences->General->Appearance 2.Eclipse Marketplace下载【推荐】 Help->Eclipse Marketplace->搜索‘theme’进行安装 比如......

anlve ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部