1 Star 3 Fork 0

yy祝 / YJIC

加入 Gitee
与超过 800 万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
当前仓库 Web 页面仅限仓库成员可访问。如需转为公开仓库,需要仓库拥有者 yy祝 提交仓库公开申请,我们将尽快为您处理。
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README.md

YJIC

第一次公开发布一个小小的项目, 能力有限, 有BUG或建议可以在issues中提出

介绍

js图片查看,缩放,移动,旋转;
dome地址:https://yyznm.gitee.io/yjic

pc端根据鼠标位置缩放 等等等 ...

手机上双指缩放旋转,一张动图解释一切
img

软件架构

适配性 edge, Chrome ... 还有IE11(你没看错)
就测试了这几个浏览器,其他的可以自己尝试
dome地址:https://yyznm.gitee.io/yjic

安装教程

最简单用法

<!-- 引入 -->
<script src="static/YJIC.min.js"></script>
<script>
    //直接传入img的URL
    YJIC.setData("img_url");
</script>

特殊用法

// 设置并弹出图片, 动画真
YJIC.setData(dom, true);
// 弹出同时让原来的图片变透明
dom.style.opacity = 0
// 关闭回调,关闭后让图片显示
YJIC.setBackCallback(function(){
    dom.style.opacity = 1
});

//这样就有一种原来的图片被放大的感觉

使用说明

方法名 参数 用途
setData(data, follow) data:图片的url 或者 img的dom; follow:传入dom时, 是否有动画效果 设置并弹出图片
setStartZoom(z) z:0 ~ 1 默认 1 初始图片相对浏览器的比例, 按长边算
setHintTime(t) t:毫秒 默认 300 设置提示延时关闭的时间, 0就不提示
setBgc(color) color:遮罩颜色 默认 rgba(0,0,0,.7) 设置遮罩颜色 可以设置成 rgba(0,0,0,0) 透明
setDegIf(bool) bool:默认 true 设置手机两指是否可以旋转
setShadeClose(bool) bool:默认 true 设置点击遮罩是否关闭, 只在pc端有效 因为手机端背景用来监听了手势
setCloseIf(bool) bool:默认 true 设置右上角的关闭按钮是否显示
setHandleIf(bool) bool:默认 true 设置操作的按钮组是否显示
setBackCallback(call) call:关闭的回调 设置关闭回调
setSizeCallback(call) call:缩放时的回调 设置缩放时的回调
close() 关闭
setAdd() 加大
setSubtract() 减小
rotateLeft() 向左旋转
rotateRight() 向右旋转

特技

仓库评论 ( 0 )

你可以在登录后,发表评论

简介

js图片查看,缩放,移动,旋转; 手机双指图片缩放旋转 展开 收起
JavaScript 等 2 种语言
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
JavaScript
1
https://gitee.com/yyznm/yjic.git
git@gitee.com:yyznm/yjic.git
yyznm
yjic
YJIC
master

搜索帮助

103111 552b83b3 1850385 103110 ed87a847 1850385