得知第一个页面和这个页面都不能上线。内心还是难过的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>
6608
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
