八点拖放缩放

作者:frank 发表日期:2016-03-20 09:48:42 更新日期:2016-08-15 20:12:12 分类:猿文色

摘要

原生JS实现的8点拖拽缩放系统。

正文

使页面中的任何元素都可以实现拖拽缩放的功能,只要在HTML属性中添加eight-dot-zoom即可。支持IE8以上现代浏览器。

如何使用:

  1. 引用8-dot-zoom.css和8-dot-zoom.js

  2. 在需要移动的元素上添加eight-dot-zoom属性:<img src="..." eight-dot-zoom/>

  3. 引用完8-dot-zoom.js后可以使用下述方式指出拖拽边界:

    //指定拖拽元素的父元素的位置信息为其边界
    window.EightZoomSys.demarcation = 'parent';
    //指定某一元素的位置信息为其边界
    window.EightZoomSys.demarcation = Element;
    //直接指定边界
    window.EightZoomSys.demarcation = {
        top: 100,
        left: 100,
        width: 500,
        height: 500
    }
    
  4. 链接到老博客地址:DEMO