第三个页面 移动端&PC端

得知第一个页面和这个页面都不能上线。内心还是难过的QAQ.

这个页面我是从一半开始写的。

PC端：

1.右上角微信的图标，欲实现hover时下方出现公众号的二维码。

最开始尝试的代码是hover的两个函数都写给图标这个元素。然后出现了二维码一直闪的情况，也就是说hover的这两个函数在不停地执行。

后来改了其他实现方式，就是改成，鼠标滑出二维码的时候再让二维码消失。

具体代码如下：

JavaScript：

$("#weixin").hover(function(event){        $(".downdiv").removeClass("hide");    });    $(".downdiv").mouseleave(function(){        $(".downdiv").addClass("hide");    });

HTML：

<div class="downdiv hide" ><img src="../images/header-wx.png" alt=""></div><a class="sns-btn float-l" href="" id="weixin" style="display:block">微信</a>

如果二维码写成微信的子元素的话也比较容易：

HTML：

<div href="javascript:;" class="lk-btn lk-weixin">            <div class="downdiv">              <img src="../images/lk-weixin.png" alt="">            </div>          </div>

CSS：

.header .header-sns .lk-btn:hover .downdiv {  display: block;}.header .header-sns .lk-btn .downdiv {  display: none;  position: absolute;  top: 0;  left: -96px;}

移动端：

1.一个bug就是，用swiper插件的时候，HTML代码中删除了滚轮scrollbar但是在js代码中，初始化swiper的时候创建滚轮的代码没有删掉，导致出现了错误，但是控制台报的错竟然是swiper.js和jQuery.js里面的错误。所以说报错的位置和导致错误的位置可能会毫无关系。

代码：

JavaScript：

$(document).ready(function(){  var mySwiper = new Swiper ('.swiper-container', {    direction: 'horizontal',    loop: true,    // 如果需要分页器    pagination: '.swiper-pagination',    // 如果需要前进后退按钮    nextButton: '.swiper-button-next',    prevButton: '.swiper-button-prev'  })});

注意把滚轮删掉了！

2.想改变swiper插件自带的翻页按钮样式：在CSS代码中重写swiper-prev的样式，将background设置为none；因为之前写好的代码中，翻页按钮是在这个swiper容器里面的，如何把他们放到容器外面又能实现翻页的功能呢。第一次尝试是设置两个按钮的样式：margin-left 和margin-right设置成负值，但是这样设置后就没有翻页的效果了，而且两个按钮也消失了。后来直接把这两个元素放在swiper容器的外层，然后就可以设置任意位置而且还能有翻页的效果。

代码：

JavaScript:

$(document).ready(function(){  var mySwiper = new Swiper ('.swiper-container', {    direction: 'horizontal',    loop: true,    // 如果需要分页器    pagination: '.swiper-pagination',    // 如果需要前进后退按钮    nextButton: '.swiper-button-next',    prevButton: '.swiper-button-prev'  })});

HTML：

<div class="swiper-container content-container">    <div class="swiper-wrapper">        <div class="swiper-slide">        <img src="../images/m/1.png" alt="">        </div>        <div class="swiper-slide">        <img src="../images/m/2.png" alt="">        </div>        <div class="swiper-slide">        <img src="../images/m/3.png" alt="">        </div>        <div class="swiper-slide">        <img src="images/m/4.png" alt="">        </div>        <div class="swiper-slide">        <img src="../images/m/5.png" alt="">        </div>        <div class="swiper-slide">        <img src="../images/m/6.png" alt="">                        <a href="#" class="get"></a>        </div>    </div>    <!-- 如果需要分页器 -->    <!-- 如果需要导航按钮 --><!--    <div class="swiper-button-prev"></div>--><!--    <div class="swiper-button-next"></div>-->    <!-- 如果需要滚动条 --></div>            <div class="swiper-pagination"></div><div class="swiper-button-prev" id="prev"></div><div class="swiper-button-next" id="next"></div>

CSS：

.swiper-pagination{  bottom:6%;  left:40%;}.swiper-pagination-bullet{  margin-left:1px;  margin-right:1px;}.swiper-pagination-bullet-active{  width:15px;  background:#000;  opacity:0.3;  border-radius:5px;}.swiper-button-next{  position:absolute;  margin-left: 19%;margin-right:18%;top:63.5%;  background:none;}.swiper-button-prev{  position: absolute;  margin-left: 19%;margin-right:18%;top:63.5%;  background: none;}

3.这次的分享也花了小小的一点时间。但是还好。

然后居然就没了。

PS：

官网：有一段代码不太理解：

JavaScript：

$(".articles-category").find('li').on('click mouseover', function(){  var _thisNav = $(this)  var _thisNavClass = _thisNav.data("category-type")  // console.log(_thisNavClass)  $(".articles-category").find('li').removeClass("current")  $(this).addClass("current")  $(".lists-container").addClass('hide')  $(".lists-container."+_thisNavClass).removeClass('hide')})

HTML：

<div class="page news-container">        <p class="nc-title-e">NEWS CENTER</p>        <p class="nc-title">新闻资讯</p>        <ul class="articles-category clearfix">          <li class="float-l current" data-category-type="alltype">全部</li>          <li class="float-l" data-category-type="news">新闻</li>          <li class="float-l" data-category-type="notice">公告</li>          <li class="float-l" data-category-type="activities">活动</li>        </ul>        <ul class="lists-container alltype">                        <li class="even">                <a class="clearfix" href="#" target="_blank">                  <p class="type float-l"></p>                  <p class="title float-l">xxx</p>                  <p class="time float-r">date</p>                </a>              </li>                        <li class="odd">                <a class="clearfix" href="#" target="_blank">                  <p class="type float-l"></p>                  <p class="title float-l">yyy</p>                  <p class="time float-r">date</p>                </a>              </li>                        <li class="even">                <a class="clearfix" href="#" target="_blank">                  <p class="type float-l"></p>                  <p class="title float-l">zzz</p>                  <p class="time float-r">date</p>                </a>              </li>                        <li class="odd">                <a class="clearfix" href="#" target="_blank">                  <p class="type float-l"></p>                  <p class="title float-l"></p>                  <p class="time float-r">date</p>                </a>              </li>                        <li class="even">                <a class="clearfix" href="#" target="_blank">                  <p class="type float-l"></p>                  <p class="title float-l">xxx</p>                  <p class="time float-r">date</p>                </a>              </li>                        <li class="odd">                <a class="clearfix" href="#" target="_blank">                  <p class="type float-l"></p>                  <p class="title float-l">yyy</p>                  <p class="time float-r">date</p>                </a>              </li>                  </ul>        <ul class="lists-container news hide">                        <li class="even">                <a class="clearfix" href="#" target="_blank">                  <p class="type float-l"></p>                  <p class="title float-l">zzz</p>                  <p class="time float-r">date</p>                </a>              </li>                        <li class="odd">                <a class="clearfix" href="#" target="_blank">                  <p class="type float-l"></p>                  <p class="title float-l">xxx</p>                  <p class="time float-r">date</p>                </a>              </li>                        <li class="even">                <a class="clearfix" href="#" target="_blank">                  <p class="type float-l"></p>                  <p class="title float-l">yyy</p>                  <p class="time float-r">date</p>                </a>              </li>                        <li class="odd">                <a class="clearfix" href="#" target="_blank">                  <p class="type float-l"></p>                  <p class="title float-l">xxx</p>                  <p class="time float-r">date</p>                </a>              </li>                        <li class="even">                <a class="clearfix" href="#" target="_blank">                  <p class="type float-l"></p>                  <p class="title float-l">yyy</p>                  <p class="time float-r">date</p>                </a>              </li>                        <li class="odd">                <a class="clearfix" href="#" target="_blank">                  <p class="type float-l"></p>                  <p class="title float-l">zzz</p>                  <p class="time float-r">date</p>                </a>              </li>                  </ul>              </div>