模拟微信点击图片放大效果(原创)

所属分类:UI,媒体-弹出层,图片展示

 30326  233  查看评论 (18)
分享到微信朋友圈
X
模拟微信点击图片放大效果(原创) ie兼容9

更新时间:2019-08-27 23:57:22

说明:该插件仅支持移动端

//初始化
var wxScale = new WxScale({
    fullPage: document.querySelector("#fullPage"),
    canvas: document.querySelector("#canvas")
});
var imgBox = document.querySelectorAll("#imgBox img"); //为需要的图片添加放大功能
for (var i = 0; i < imgBox.length; i++) {
    imgBox[i].onclick = function(e) {
        wxScale.start(this); //这里的this指向需要放大的这张图片
    }
}
相关插件-弹出层,图片展示

jQuery弹出层插件LIGHTBOX

这款lightbox,可应用于图片、swf文件、html文件等等.
  弹出层
 96537  512

超简单实用的弹窗jquery插件

兼容到ie8,简洁,实用,美观,可以自由更改弹窗样式。可以在弹窗中加上ajax请求的数据!
  弹出层
 98254  450

CSS3地图热点文字标注提示

当点击地图上的某一位置时,会弹出提示。
  弹出层
 41167  413

flavr―超级漂亮的jQuery扁平弹出对话框

flavr是一个时尚的扁平弹出对话框为您的下一个网站。flavr是响应设计布局,能够适应任何屏幕大小。得到最好的用户体验,使用流行的animate.css动画,最重要的是,flavr可以运行在任何新的浏览器IE8(+),任何设备和屏幕大小。
  弹出层
 143205  1131

讨论这个项目(18)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    骨头里面镶红豆 0
    2022/9/4 16:24:33
    这个不如 直接让图片高度自适应啊。宽度百分百 回复
    骨头里面镶红豆 0
    2022/9/4 16:24:03
    移动端 确实是有点bug. 回复
    泛白的夜 0
    2022/4/12 17:43:26
    要是添加个电脑端滚轮和点击放大的就更好了 回复
    nicky27 0
    2022/3/3 11:41:40
    发现手机横屏以后图片就失真了,长宽比例就不同了 回复
    ?╉Ency┿ 0
    2021/10/27 17:53:33
    支持图片放大后缩放吗? 回复
    0
    2021/5/13 16:01:36
    我的图片设置宽高的话就会失帧,能不能用图片路径来自动获取图片 回复
    宝藏男孩小王子 0
    2020/12/8 15:37:42
    请问楼主,我是用小米手机在微信打开页面,但是点击图片没反应,我试过其他手机三星,苹果的可以,是什么问题呢? 回复
    修夏55 0
    2020/11/16 15:48:28
    var wxScale = new WxScale({
        fullPage: document.querySelector("#fullPage"),
        canvas: document.querySelector("#canvas")
    });
    $('.singleProuct img').onclick = function(e) {
        console.log('我在点击给点反应好不好');
        wxScale.start(this);
    };

    我这样设置无反应

    回复
    太极凌云 0
    2020/9/18 14:24:24

    当是动态生成的img,点击没有反应,放大不了,我试了在外层加上

    $(".input-box").on("click", "img", function() {}
    })

    也不行,有解决方案?有的话麻烦回复一下,多谢!!!

        西瓜0
        2020/9/18 15:27:41
        执行顺序问题,动态生成图片是在插件执行完后加入的,你需要再次加载插件才行。
        Morningzzz0
        2021/10/21 11:03:03
        怎么再创建完动态图片后,再次加载插件呢调用楼主中js方法
    回复
    入・戏太深 0
    2020/5/10 15:22:50
    你好, 请教一下, 首次点击铺满屏幕 图片变得有点模糊有什么解决方案吗?
        土豆同学1
        2020/5/11 9:00:11
        如果你原始的图片大小比较小的话,因为要铺满屏幕需要放大,所以会失真,导致有点模糊。这种情况只要放张足够大的图就可以了。
        如果原始图片本来就很大的话,那我也不知道了,我这边试了很多图都不会模糊。。
        修夏550
        2020/11/16 16:49:29
        我图片放的很大,尺寸很大也很清楚放大后还是很模糊呢
        承德水滴网络0
        2020/12/12 15:42:28
        同样的问题,尺寸很大也很清楚放大后还是很模糊
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复