jQuery手机端多图放大预览

所属分类:媒体-图片展示,幻灯片和轮播图

 39941  361  查看评论 (9)
分享到微信朋友圈
X
jQuery手机端多图放大预览 ie兼容10

更新时间:2018/7/26 上午13:10:43

更新说明:简化代码,更新背景颜色,以及流畅度


引用swiper

<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/rem.js"></script>
<link rel="stylesheet" type="text/css" href="css/swiper.min.css"/>
<script type="text/javascript" src="js/swiper.min.js"></script>

放大的DEMO

<div id="list">
    <ul>
      <li>
        <div class="po-avt-wrap"> <img class="po-avt data-avt" src="http://www.jq22.com/img/cs/500x500-1.png"> </div>
        <div class="po-cmt">
          <div class="po-hd">
            <p class="po-name"><span class="data-name">XXX</span></p>
            <div class="post">
              <p>大家好</p>
              <p> <img class="list-img" src="http://www.jq22.com/img/cs/500x500-1.png" style="height: 80px;"> 
              <img class="list-img" src="http://www.jq22.com/img/cs/500x500-2.png" style="height: 80px;"> 
              <img class="list-img data-avt" src="http://www.jq22.com/img/cs/500x500-3.png" style="height: 80px;"> 
              <img class="list-img data-avt" src="http://www.jq22.com/img/cs/500x500-4.png" style="height: 80px;"> </p>
            </div>
            <p class="time">刚刚</p>
            <div class="tc1"> <img class="c-icon" src="images/c.png">
              <div class="tc2"><span class="zan"><span>赞</span></span> <span class="pinglun"><span>评论</span></span></div>
            </div>
          </div>
          <div class="r"></div>
        </div>
      </li>
    </ul>
  </div>

需要有一定的JS基础即可更改为你想要的效果

相关插件-图片展示,幻灯片和轮播图

仿qq空间图片展示效果

使用方法简单详细,类似于qq空间的图片展示效果
  图片展示
 47293  475

简易的jQuery无缝滚动(原创)

简易无缝滚动,只需要改变高度(不用设宽度)嗯,或许看看就知道是不是你想要的
  图片展示
 36879  441

纯js写的祝愿墙

这是一款纯js编写的祝愿墙,墙上的祝福标签的位置随机出现,每次刷新,出现的位置各不相同。
  图片展示
 28526  352

JQUERY全屏撕裂幻灯片-FULLSCREEN-SLIT-SLIDER

fullscreen-slit-slider由 jQuery 和 css3 打造而成。为我们提供了一个全屏的撕裂效果的幻灯片,接下来我就为大家讲解以下相关的用法。
  图片展示
 44032  421

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

    大田暴丝 0
    2022/4/21 10:34:32
    这个不能放大和缩放啊 回复
    One's trip 0
    2019/7/22 14:33:14
    上传到服务器没有用
        pzk19960
        2019/7/24 14:11:50
        问题解决了吗?我也是代码上传到服务器放大没有用
    回复
    0
    2019/5/21 17:30:39
    感谢楼主,很好用 回复
    离殇 0
    2019/3/4 16:15:14
    为什么加了这个后,我手机有时候跳转不到这个页面了 回复
    接给你肩膀 0
    2018/9/5 17:17:06
    有没有没有压缩的js文件啊
        西瓜0
        2018/9/6 10:09:53

        自己格式化一下就行了。

        http://www.jq22.com/jsgsh
    回复
    灬穿拖鞋走出高调┵ 0
    2018/8/23 18:04:48
    曾经最掏心。 0
    2018/8/17 13:57:28
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复