V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
kingdido999
V2EX  ›  分享创造

纯 JS 实现、可自定义的网页图片缩放和拖曳

  •  
  •   kingdido999 ·
    kingdido999 · 2016-12-06 12:15:06 +08:00 · 2132 次点击
    这是一个创建于 2941 天前的主题,其中的信息可能已经有所发展或是发生改变。

    我利用空闲时间做的一个小项目, JS 实现的图片缩放以及拖曳,而且不依赖任何第三方库。

    • 点击放大图片
    • 按住图片进入拖曳模式
    • 缩略图放大后可使用自定义的高清图片
    • 可通过 JS 调用方法和自定义配置

    演示: http://desmonding.me/zooming/

    GitHub : https://github.com/kingdido999/zooming

    欢迎提出任何想法或者建议:)

    6 条回复    2016-12-13 23:51:32 +08:00
    jinzhe
        1
    jinzhe  
       2016-12-06 15:23:40 +08:00
    如果上一级 DIV 不是全屏的话会限制区域,然后是拖动不太好用
    qq234il
        2
    qq234il  
       2016-12-09 09:00:55 +08:00 via Android
    手机端好像没有反应哎
    kingdido999
        3
    kingdido999  
    OP
       2016-12-12 13:38:51 +08:00
    @qq234il 之前有一个 bug 已经修复,现在可以用了吗?
    kingdido999
        4
    kingdido999  
    OP
       2016-12-12 13:42:08 +08:00
    @jinzhe 能否解释一下“上一级 DIV 不是全屏的话会限制区域”?目前反转了拖动的方向,你觉得会好用一些吗?
    jinzhe
        5
    jinzhe  
       2016-12-12 16:41:39 +08:00
    @kingdido999 就是我的文章内容是在 500px*500px 宽度内显示,图片也在里面,但是我点击的时候应该占全屏显示才好
    qq234il
        6
    qq234il  
       2016-12-13 23:51:32 +08:00
    @kingdido999 恩,可以看到啦
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5270 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 08:03 · PVG 16:03 · LAX 00:03 · JFK 03:03
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.