复制网站动效失效总结

最近复制了一个网站（其实就是扒了一个站），遇到了一些可能是常见的问题，在此总总结一下。

1. 方法：网上介绍说专门的扒网站的软件，但并没有用。我直接找源码、css、js图片，如此下来。因为网站页面不多，所以一个个页面弄下来也还好。

2. 问题一：页面一片空白
　将下载的文件组合起来，并确认都组合正确，但页面并没有显示。
　依次注释掉js文件，发现是其中一个js文件的问题，注释掉页面就显现出来了。
　所以，从网上扒下来的文件并不完全可信，而且这种文件一般也不便阅读，该注释掉就注释掉。

3. 问题二：找页面的JS
　因为注释掉了所有的js，所以页面的动效需要重新写。
　简单的可以自己写，有些复杂的可能就不好写了。
　这种情况可以从html文件里找线索。
　这次的页面有一个垂直轮播的效果，从class名发现有swiper，而且结构也符合swiper插件的基本结构，于是找到对应的插件，略微加工即可。
　（另外一个发现插件的线索是，html源码中有style="height:600px;"类似的样式写法，这种也可以推端是js插件）
　在插件的书写中，要注意扒下来的html中含有一些被插件运行添加的类，如active这种，要删去。

4. 问题三：swiper插件高度自适应
　在swiper加上后，上下轮播的页面的高度总不是浏览器窗口的高度。当时都准备自己重新写js确定高度了，后来幸好没有，全靠参数设置。
　像swiper插件这种比较完善的插件，有专门的网站详细解析，从最后从文档中找到了答案。
　https://www.swiper.com.cn/api/parameters/275.html

<script>
var mySwiper = new Swiper('.swiper-container', {
  direction: 'vertical',
  height: 300,//你的slide高度
  //全屏  height : window.innerHeight,
}) 
</script>

5. 问题四：全屏高度的自适应
　在窗口拉伸过程中，宽度是可以自适应的，但高度却无法。因为本身的高度就是通过JS获取窗口的高度确定的，如果窗口高度变化，需要重新通过JS确认
　JS版本

<script>
　　//首开自适应
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        direction: 'vertical',
        slidesPerView: 1,
        paginationClickable: true,
        mousewheelControl: true,
        height : window.innerHeight,
    });


    // 窗口拉伸后高度自适应
    window.onresize = function(){
        var swiper = new Swiper('.swiper-container', {
          pagination: '.swiper-pagination',
          direction: 'vertical',
          slidesPerView: 1,
          paginationClickable: true,
          mousewheelControl: true,
          height : window.innerHeight,
      });
    }

</script>

　　
JQUERY版本的resize

$(window).resize(function() {
  $('span').text(x+=1);
});

6. 问题五：通过对页面其他元素的点击实现翻页
　swiper的翻页可以通过对页码的点击和鼠标的滚动实现，
　没找到如何实现鼠标滚动，就模拟对页码的点击了（源文件中并没有页码，按照标准文档加上了页码）

$('.iconarrow-line-down').click(function(){
      $('.swiper-pagination-bullet').eq(1).click();
    });

复制网站动效失效总结

猜你喜欢