来自 计算机前端 2019-10-23 05:27 的文章
当前位置: 美高梅4858官方网站 > 计算机前端 > 正文

移动端网站的内容触摸滑动

对项目的说明:

前一段时间移动端网站中要求实现一个“内容触摸滑动”的功能,需求如下:

  1. 通过点击小图显示大图;

  2. 再次点击大图回到原来的小图;

  3. 图片能够滑动切换;

  4. 显示当前图片的索引(目前我正在浏览哪一张图片)。

自己写了一些功能,完成了第 1、2 的需求,但是由于 js 基础较差,就借用了 swiper 这个插件来完成了剩余的两个需求。

swiper常用于移动端网站的内容触摸滑动。swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。swiper 中文网官方网站 ,里面有详细的 api 文档和内容完善的在线演示。

首先展示下我的 demo 结构:

图片 1

这是一个活动剪影分类,这个活动剪影中一共展示三个“项目(li)”,每一个项目里面有多条列表项目用来包裹 img 显示图片。

解决问题的思路:

1. 由于每一个项目里只需要最多九张图片,所以多余的图片将它删除(这篇文章中顺便也把这个功能实现了);

  1. 由于这里有多个 silhouette-item,当我们点击这个项目里的其中一张图片的时候,可以在每一个 silhouette-item 的最后临时创建一个 container 来存放需要展示的大图的一个容器;

解决方法:

  1. 对于 html, 代码有些长,从上面的 demo 结构中就可以看出我的 html 代码,

  2. 对于 css, 代码也有些长,但是没有什么特别需要指出的要点,看下面的其中一条列表项目 (silhouette-item)的 最终显示效果就够了:

图片 2

  1. js 代码:

    /===限制活动剪影的图片个数,最大为 9 张===/ for (var i = 0, listLen = $(".silhouette-img-list").length; i < listLen; i++) {

     var $lis = $(".silhouette-img-list").find("li");
     var liLen = $(".silhouette-img-list").eq(i).find("li").length;
     if (liLen > 9) {
         for (var j = 9; j < liLen; j++) {
             $($lis[j]).remove(); // 每一次删除后 listLen 的值都会改变
         }
     }
    

    }

对代码细节的说明:

  1. 因为每一个列表项目(silhouette-item)中都有 class 为 silhouette-img-list 的 ul 元素,所以外层定义了一个 for 循环用来找到具体是哪一个列表项目中的 ul 元素;

  2. 第三行中 .eq(i) 的目的是定位具体的 ul.

  3. 每一次删除后 listLen 的值都会改变,所以要先把 listLen 的值确定下来,不能放在内层循环中来作为判断。比如我们有 14 张图片,则需要删除 5 张,如果 listLen 没有作为定值来判断,而是每次内层循环后来比较,则比较的次数将会变少,第一次比较 9 < 14, 第二次比较 10 < 13, 第三次比较 11 < 12.只会执行三次循环,这样会少删除 2 张图片,与我们的预期不符合。

    /===活动剪影,点击图片全屏展示,可滑动切换===/ $(".silhouette-img-list li img").click(function() {

     // 获取一条活动剪影列表中图片的个数
     var img = $(this).parents(".silhouette-img-list").find("img");
     var imgLen = img.length;
    
     // 弹出层的宽度为浏览器可用的有效宽度,高度为浏览器的可用的有效高度 
     var w = window.innerWidth;
     var h = window.innerHeight;
    
     // 获取页面当前位置离窗口顶部的距离
     var top = document.body.scrollTop || document.documentElement.scrollTop;
    
     // 创建包裹大图的 swiper-container 盒子    
     var $container = $('<div class="swiper-container"></div>');
     // pagination 设置分页器
     var $pagination = $('<div class="swiper-pagination"></div>');          
     var $wrapper = $('<ul class="swiper-wrapper"></ul>');
     // item 用来存放图片列表,模拟 html dom, 使用字符串连接的方式
     var item = "";
    
     // 用 for 循环,实现 html 中的 silhouette-img-list 部分的结构,并且为每一张大图设置和对应的小图一样的 src 和 alt 属性值
     for (var i = 0; i < imgLen; i++) {
         var src = $(img[i]).attr("src");
         var alt = $(img[i]).attr("alt");
    

         // 再次点击大图返回 为后面添加,非必须(一般都知道吧!)

         item += "<li class='swiper-slide'><img class='swiper-img' src=" + src + " alt=" + alt + "><strong class='tips'>再次点击大图返回</strong></li>";
     }
    
     // 将子元素插入到父元素
     $($wrapper).append(item);
     $($container).prepend($wrapper);
     $($container).append($pagination);
     $(this).parents(".silhouette-item").append($container);
    
     // 下面对 swiper 插件进行引用
     var mySwiper = new Swiper (".swiper-container", {
         direction: "horizontal",  // 水平方向滑动
         grabCursor : true,  // 鼠标覆盖Swiper时指针会变成手掌形状,拖动时指针会变成抓手形状
         // loop: true,  // 为 true 时滑动到第一张和最后一张后依然可以滑动
         observer: true, //修改 swiper 自己或子元素时,自动初始化swiper
         observeParents: true, //修改swiper的父元素时,自动初始化swiper
         initialSlide: $(this).parent().index(), // 设定初始化时slide的索引
         pagination: ".swiper-pagination"  // 分页器
    

      });

     // 为遮罩层和遮罩层内的图片设置样式
     $(".swiper-container").css({
         position: "absolute",
         top: top,  // 定位 top,以便大图的遮罩背景出现在正确的位置,而不总是在页面顶部
         left: 0,
         width: w,
         height: h
     });
     $(".swiper-slide").css({
         zIndex: 99,
         backgroundColor: "#000"  // 这是包裹大图的 li 的背景
     });
     $(".swiper-img").css({  // 给图片设置样式,让他居中显示,并且宽度不要超过浏览器能显示的有效宽度,高度自适应
         zIndex: 100,
         display: "block",
         position: "absolute",
         top: 0,
         right: 0,
         bottom: 0,
         left: 0,
         margin: "auto",
         maxWidth: "100%",
         height: "auto"
     });
     $(".tips").css({  // 这个是提示文本的样式,非必须,可以省略
         zIndex: 200,
         display: "block",
         position: "absolute",
         bottom: "23px",          
         margin: "auto",
         width: "100%",
         textAlign: "center",
         paddingTop: "5px",
         paddingBottom: "5px",
         fontSize: "12px",
         backgroundColor: "rgba(0, 0, 0, .5)",
         color: "#fff"
     });
     // 点击遮罩层删除先前创建的节点
     $(".swiper-container:not('.swiper-pagination')").click(function() {
         $(this).remove();
     });
    

    });

插入节点后的在 firefox 中显示的效果和预期的一样,只是截图下来很丑,不贴上来了。

最后,在 chrome 浏览器中,测试效果如下:

图片 3

 

 

 

 

本文由美高梅4858官方网站发布于计算机前端,转载请注明出处:移动端网站的内容触摸滑动

关键词: