移动端代码_仿微信朋友圈图片预览代码

 所属分类:焦点图/幻灯片

 浏览:621次-  下载:0次-  评论: 1次-  更新时间:2023-02-07

移动端代码_仿微信朋友圈图片预览代码

本插件主要用了jquerypinchzoom两个框架构造开发过程中只用到touch事件所以只手机设备上有效果功能有屏幕手势捏大捏小、双击图片放大、左右滑动等

注意:左右滑动是用touch事件做处理的,只能对手机设备有效果,html结构和类名不要乱动,html结构和类名没有做封装处理; html结构和类名示例: 

1
2
3
4
5
6
<div class="img_show_box">
        <div class="img_show_content">
            <div class="img_show_list"></div>
        </div>
        <div class="img_show_pointer"></div>
    </div>

操作说明:将你要展示的图片路径集成一个数组,然后将数组传入imgShow()函数; 

示例: 

1
2
3
4
5
6
let imgArr = [
    'img/img1.png',
    'img/img2.png',
    'img/img3.png'
];
imgShow(imgArr);



金币说明:注册即送10金币,每日签到可获得更多金币,成为VIP会员可免金币下载! 充值金币充值会员更多说明»
描述:本插件主要用了jquerypinchzoom两个框架构造开发过程中只用到touch事件所以只手机设备上有效果功能有屏幕手势捏大捏小、双击图片放大、左右滑动等

文件目录结构

  • img
      • ┝ img2.png
      • ┝ img1.png
      • ┝ img3.png
  • ┝ imgShow.js
  • ┝ imgShow.css
  • ┝ index.html
  • ┝ jquery.min.js
  • ┝ pinchzoom.min.js

讨论这个素材(1)回答他人问题或分享使用心得奖励金币

2***牛  
2024-01-21

看看怎么样

回复
表情  文明上网,理性发言!
我的金币余额: 0 已下载次数: 0
所需金币:5开始下载

金币获取:签到、评论、投搞、充值、发帖、回帖    » 在线充值(10金币=1元)