Giter Club home page Giter Club logo

imageview's Introduction

移动端图像查看器,包含分页浏览、多选删除、图像截取功能

(不依赖任何库,兼容主流浏览器)


demo:

图像列表预览配置预览列表删除图像截取

文档:

.show({...})

{
  pattern:'default',            //模式(默认:default 可选:edit(编辑) clipping(剪裁))
  selector:'',                  //选择器(如:'#ImageList img')
  imageMargin:10,               //图片间距(默认:10)
  /*
      图像的初始显示尺寸(裁剪模式不可用)
        默认:cover
        cover (图像扩展至足够大,使图像完全覆盖显示区域) 
        contain (图像扩展至最大尺寸,使其宽度和高度完全适应显示区域)
  */
  initDisplaySize:'';
  /*
      图像的初始水平显示位置(裁剪模式不可用)
        默认:center
        top (仅当initDisplaySize='cover' 时生效)
        center (居中显示)
        bottom (仅当initDisplaySize='cover' 时生效)
  */
  initDisplayPositionX = null;
  /*
      图像的初始垂直显示位置(裁剪模式不可用)
        默认:center
        left (仅当initDisplaySize='cover' 时生效)
        center (居中显示)
        rihgt (仅当initDisplaySize='cover' 时生效)
  */
  initDisplayPositionY = null;
  isGestureRotate:true,         //手势事件是否能进行旋转(默认:false 可选:true)
  clippingWidth:[Number],       //裁剪后输出的图片宽度(默认:容器宽度)
  clippingHeight:[Number],      //裁剪后输出的图片高度(默认:容器宽度)
  clippingRadius:0,             //裁剪图片的圆角数值(默认:0)
  clippingBackground:'',        //裁剪后输出的图片背景(默认:透明)
  clippingImportSuffix:'png'    //裁剪后输出的图片后缀(默认:png 可选:jpge)
  isFindTargettoImageList:true  //当使用dom事件触发显示时,是否查找目标元素是否存在于图片列表中(默认:true 可选:false)
}

.close()

关闭图像查看器

.prevPage()

(default、edit)模式时,回到到上一张图片

.nextPage()

(default、edit)模式时,前进到下一张图片

.indexPage(index)

(default、edit)模式时,前进到指定页码数


事件:

用法

/*
  绑定事件
  .on(...) 或
  .addEventListener(...) 或
  .on+首字母大写事件名,如.onShow=function(){...}
*/
ImageView.on('事件名', function (data) {
  ...
});
/*
  解除事件
  .off(...) 或
  .removeEventListener(...)
*/
ImageView.off('事件名', function (data) {
  ...
});

'show'

显示动画完成时触发

'close'

关闭动画完成时触发

'pageing'

进行翻页动作时触发

'delete'

编辑模式时点击删除按钮时触发

'clipping'

剪裁模式时点击完成按钮时触发

imageview's People

Contributors

i-yxs avatar

Stargazers

贵志 avatar zhangyd avatar cycle avatar  avatar  avatar  avatar 巫威Jsak avatar xxoo avatar ken avatar bzliukai avatar aq7642220 avatar 秦鹏 avatar NowUI avatar kemplaw avatar chenjinyue avatar kedachen avatar  avatar 陈晓刚 avatar Dragon avatar nonetang avatar RenHengjia avatar CK星空 avatar ziying avatar zhangdong avatar Erix avatar  avatar yzDeamon avatar Liu7 avatar 和于术数 avatar  avatar  avatar Hulen avatar 爱吃鱼的羊 avatar 张志 avatar  avatar xisa avatar  avatar  avatar  avatar 江逐流 avatar ByDraw avatar arthur avatar  avatar Rongle avatar

Watchers

zhouguoqing917 avatar ifzz avatar  avatar

imageview's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.