Swiper.js的腾讯新闻演示
演示效果地址：https://www.swiper.com.cn/demo/indexsample/；
代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Swiper</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" href="../resource/swiper-4.4.1/dist/css/swiper.min.css">
<script src="../resource/jquery-3.2.1/jquery-3.2.1.min.js"></script>
<script src="../resource/swiper-4.4.1/dist/js/swiper.min.js"></script>
<style>
* {
margin:0;
padding:0;
}
#header {
position:absolute;
left:0;
top:0;
z-index:999;
width:100%;
height:43px;
overflow:hidden;
background:#fdfdfc;
font:12px/40px hiragino sans gb,microsoft yahei,simsun;
box-shadow:3px 3px 3px rgba(0,0,0,0.2);
}
/*页面顶部的渐变色线条*/
#top-line {
width:100%;
height:3px;
line-height:0;
font-size:0;
overflow:hidden;
text-align:center;
z-index:1;
background-color:#0fa6ea;
background:-webkit-linear-gradient(left,rgba(15,166,234,1) 0,rgba(89,204,24,1) 10%,rgba(15,166,234,1) 60%,rgba(15,166,234,1) 100%);
background:-moz-linear-gradient(left,rgba(15,166,234,1) 0,rgba(89,204,24,1) 10%,rgba(15,166,234,1) 60%,rgba(15,166,234,1) 100%);
background:-ms-linear-gradient(left,rgba(15,166,234,1) 0,rgba(89,204,24,1) 10%,rgba(15,166,234,1) 60%,rgba(15,166,234,1) 100%);
background:linear-gradient(left,rgba(15,166,234,1) 0,rgba(89,204,24,1) 10%,rgba(15,166,234,1) 60%,rgba(15,166,234,1) 100%);
}
#header .swiper-slide {
padding:0 20px;
width:auto;
}
#banner {
width:100%;
overflow:hidden;
margin-top:43px;
position:relative;
}
#banner .swiper-slide {
position:relative;
text-align:center;
}
#banner img {
max-width:100%;
display:block;
}
#banner h2 {
text-align:center;
font-size:1em;
height:42px;
line-height:42px;
color:#fafafa;
position:absolute;
left:0;
bottom:0;
right:0;
font-weight:normal;
text-shadow:1px 1px 1px #000;
background-color:rgba(0,0,0,0);
background:-moz-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.7));
background:-webkit-gradient(linear,top,from(rgba(0,0,0,0)),to(rgba(0,0,0,0.7)));
background:-webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.7));
background:-o-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.7));
}
#banner .pagination {
position:absolute;
z-index:20;
bottom:3px;
text-align:center;
right:0;
}
#banner .swiper-pagination-bullet {
display:inline-block;
width:5px;
height:5px;
border-radius:5px;
background:#fff;
margin:0 2px;
opacity:0.8;
cursor:pointer;
}
#banner .swiper-pagination-bullet-active {
background:#ff6600;
}
#announcement {
height:2em;
background:#f5f8fc;
border:1px solid #d2e1f1;
margin:0.5em;
}
#announcement a {
color:#294c7f;
text-decoration:none;
display:block;
line-height:2;
height:2em;
text-indent:0.5em;
overflow:hidden;
}
#tabs-container {
height:400px;
}
.tabs {
border-top:2px solid #9ac7ed;
background:url('../image/headbg (1).png') no-repeat left top #f9fafa;
background-size:auto 100%;
width:100%;
height:38px;
overflow:hidden;
}
.tabs a {
font-weight:normal;
text-align:center;
float:left;
width:64px;
height:38px;
line-height:38px;
color:#2a70be;
text-decoration:none;
}
.tabs a.active {
border-top:2px solid #2a70be;
margin-top:-2px;
background-image:url('../image/tab_ui.png');
background-repeat:no-repeat;
-webkit-background-size:64px 39px;
-moz-background-size:64px 39px;
-o-background-size:64px 39px;
background-size:64px 39px;
background-position:left top;
color:#c14545;
}
.news-list {
padding:0 10px;
}
.news-list li {
overflow:hidden;
border-bottom:1px solid #eceef0;
box-shadow:0 1px 1px #fff;
font-weight:normal;
height:35px;
line-height:35px;
font-size:80%;
} </style>
</head>
<body>
<div id="header">
<div id="top-line"></div>
<div class="swiper-wrapper">
<div class="swiper-slide">新闻</div>
<div class="swiper-slide">财经</div>
<div class="swiper-slide">娱乐</div>
<div class="swiper-slide">体育</div>
<div class="swiper-slide">订阅</div>
<div class="swiper-slide">微博</div>
<div class="swiper-slide">空间</div>
<div class="swiper-slide">书城</div>
<div class="swiper-slide">书城</div>
<div class="swiper-slide">书城</div>
<div class="swiper-slide">书城</div>
<div class="swiper-slide">书城</div>
<div class="swiper-slide">书城</div>
<div class="swiper-slide">书城</div>
</div>
</div> <div id="banner" class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="../image/three.jpg"/>
<h2>贾乃亮发长文默认李小璐出轨</h2></div>
<div class="swiper-slide">
<img src="../image/five.jpg" />
<h2>阿里程序员穿特步相亲被拒绝</h2></div>
</div>
<div class="pagination"></div>
</div>
<div id="announcement" class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<a href="#">女博士相亲角被嘲？其实是有“预谋”的行为艺术</a></div>
<div class="swiper-slide">
<a href="#">你为什么还没过上你想要的生活</a></div>
<div class="swiper-slide">
<a href="#">莲花粉橙色也太美了！连直男都爱的仙女色！</a></div>
</div>
</div> <!--原理：当点击tab上面的标题的时候，跳转到tabsSwiper.slideTo($(this).index())--> <div class="tabs">
<a href="#" class="active">新闻</a>
<a href="#">社会</a>
<a href="#">娱乐</a>
</div>
<div id="tabs-container" class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<ul class="news-list">
<li>女子强行阻拦高铁发车 称其丈夫没上车</li>
<li>小马奔腾创始人妻子被判赔2亿债务</li>
<li>杭州女子将200平荒地改造成“秘密花园”</li>
<li>“紫光阁饭店”事件，乌龙背后是热搜的生意</li>
<li>最美乘务员冒雪挨个扶旅客下火车</li>
<li>五月天周杰伦再度合体</li>
<li>张馨予被赞模特身材</li>
<li>惊呆，杨紫的脸现在跟脖子一样宽了！</li>
<li>睡姿暴露你偷情指数</li>
<li>济南小伙儿自掏腰包，为陌生农民工加菜</li></ul>
</div>
<div class="swiper-slide">
<ul class="news-list">
<li>女子街边卖早餐卖蓝色油条生意火爆</li>
<li>保定励志哥！坐着轮椅唱歌成网红</li>
<li>电影院保安恋上女研究生</li>
<li>19岁女生保送北大直博</li>
<li>男子越狱期间强奸女友12岁的女儿</li>
<li>8旬爷爷因三个孩子都不赡养</li>
<li>7座面包车塞进20名学生</li>
<li>老人做家务时羽绒服突然“爆炸”</li>
<li>直播间里，用歌舞抗癌的70岁“网红”</li>
<li>PG_ONE粉丝买热搜"紫光阁地沟油"</li></ul>
</div>
<div class="swiper-slide">
<ul class="news-list">
<li>“绿帽门”后贾乃亮深夜买醉</li>
<li>姚笛大方挥手无名指戒指抢眼</li>
<li>汪小菲被大S减肥成果吓到</li>
<li>Baby和秀智同穿18万仙女裙</li>
<li>易烊千玺得罪粉丝？接机时粉丝不想理他</li>
<li>Tara成员：送了跑车还有90亿</li>
<li>蒋欣在节目上的表情超有戏</li>
<li>李小璐最新写真曝光，大走稳重的知性风</li>
<li>马思纯和欧豪穿同款秀恩爱</li>
<li>第90届奥斯卡颁奖礼发海报</li></ul>
</div>
</div>
</div>
<script type="text/javascript">
window.onload = function() {
var navSwiper = new Swiper('#header', {
// freeMode: true,//每次滑动时候只滑动一格，并自动和wrapper贴合；
slidesPerView: 'auto',//设置slider容器能够同时显示的slides数量
// freeModeSticky: true,//使得freeMode也能自动贴合。
}); var bannerSwiper = new Swiper('#banner', {
autoplay: 5000,
visibilityFullFit: true,//开启虚拟的slide;
loop: true,
pagination: {
el: '#banner .pagination',
}
}); var announcementSwiper = new Swiper('#announcement', {
direction: 'vertical',
loop: true,
autoplay: {
delay: 3000,
disableOnInteraction: false,//用户操作之后禁止autoplay;
}
}) var tabsSwiper = new Swiper('#tabs-container', {
speed: 500,
on: {
slideChangeTransitionStart: function() {
$(".tabs .active").removeClass('active');
$(".tabs a").eq(this.activeIndex).addClass('active');
}
}
})
$(".tabs a").on('click', function(e) {
e.preventDefault()
$(".tabs .active").removeClass('active')
$(this).addClass('active')
tabsSwiper.slideTo($(this).index())
})
}
</script>
</body>
</html>
Swiper.js的腾讯新闻演示的更多相关文章
- Swiper结合jQuery实现腾讯新闻首页
今天我们来说一下,Swiper结合jQuery实现的腾讯新闻首页, 咱们先来看一下效果图: 这也是我把PC端缩成移动端来截的图,毕竟是PC端,要是不好看的话请见谅,,,,,,,,,,,,, 然后请允许 ...
- css动效库animate.css和swiper.js
animate.css https://daneden.github.io/animate.css/ 学习的文档:http://www.jq22.com/jquery-info819 腾讯团队的JXa ...
- 腾讯新闻多图jQuery相册展示效果代码
腾讯新闻多图jQuery相册代码,带左右切换箭头,带缩略图,可左右切换,点击缩略图展示原图. 在线演示本地下载
- 腾讯新闻构建高性能的 react 同构直出方案
在腾讯新闻抢金达人活动 node 同构直出渲染方案的总结文章中我们整体了解了下同构直出渲染方案在我们项目中的使用.正如我在上篇文章结尾所说的: 应用型技术的难点不是在克服技术问题,而是在于能够不断的结 ...
- iScroll.js和swiper.js
最近系统地学习了iScroll.js和swiper.js,感觉它们在移动端特别好用:http://www.360doc.com/content/14/0724/11/16276861_39669990 ...
- iScroll.js和Swiper.js联合使用时的插件冲突(滑动冲突)
上面的截图 ,是手机端的一个滑动刷新效果.用的是scroll.js插件. 每项中又有一个滑动,是左右滑动的用swiper.js插件,查看每个班级的信息. 当手从sw ...
- 【Android UI设计与开发】7.底部菜单栏（四）PopupWindow 实现显示仿腾讯新闻底部弹出菜单
前一篇文章中有用到 PopupWindow 来实现弹窗的功能.简单介绍以下吧. 官方文档是这样解释的:这就是一个弹出窗口,可以用来显示一个任意视图.出现的弹出窗口是一个浮动容器的当前活动. 1.首先来 ...
- 移动端开发（四）：swiper.js
swiper.js中文网:http://www.swiper.com.cn/ 文档结构 swiper.jquery.js 是需要引用jquery.js 或者 zepto.js 时,只需直接引用该 ...
- Python爬取腾讯新闻首页所有新闻及评论
前言 这篇博客写的是实现的一个爬取腾讯新闻首页所有的新闻及其所有评论的爬虫.选用Python的Scrapy框架.这篇文章主要讨论使用Chrome浏览器的开发者工具获取新闻及评论的来源地址. Chrom ...
随机推荐
- swift类型转换之Could not cast value of type xxx to xxx错误的一种特殊情况记录
之前swift项目打包成Framework静态库,提供给OC项目套入使用时,有时会抱这样一个错误: 这个错误发生的概率比较随机,有时会,有时不会,而且这句话在swift中的使用,是做model类型强制 ...
- SqlServer整库备份还原脚本
最近领导要求定时备份数据库(不是我的作业), 搜了一下资料还不少, 先mark一下, 得空再验证吧!!! 以下内容为转载 转自:https://www.cnblogs.com/want990/p/74 ...
- python中的struct模块
struct模块用于将python中的对象转化为bytes. 举例 demo1:将int转换为bytes buf1 = 256 bin_buf1 = struct.pack('i', buf1) # ...
- Delphi消息推送
移动端的消息推送大家都体验过,智能手机上一大堆广告等各种消息会不时从消息栏中弹出来骚扰你. PC程序中我们有时也会用到消息推送,比如通知之类.通常我们使用的方法可能更多地使用Socket之类来处理,有 ...
- java hibernate session create
public class RegisterStory { private SysUserCDao sysUserCDao; @Test public void test() { SessionFact ...
- 自动化安装smokeping-2.6.11脚本
自动化安装Smokeping-2.6.11脚本 一.目的 1.1 监控目的 为方便监测各数据中心网络状况,自定义全国各节点,从而发现网络异常,判断网络故障. 1.2 本文目的 快速部署Smokepin ...
- Oracle中INTERSECT,MINUS，UNION，UNION ALL用法
intersect 就是交集minus 就是差集 交集就是两个结果集中都有的元素 比如 select uid from tb1 intersect select uid from tb2 那么既存在t ...
- Ubuntu 12.04嵌入式交叉编译环境arm-linux-gcc搭建过程图解
Linux版本:Ubuntu 12.04 内核版本:Linux 3.5.0 交叉编译器版本:arm-linux-gcc-4.4.3 交叉编译器下载 见这篇文章http://www.linuxidc.c ...
- Android适配底部返回键等虚拟键盘的完美解决方案
这个问题来来回回困扰了我很久,一直没能妥善解决. 场景1:华为手机遮挡了屏幕底部. 场景2:进入应用时,虚拟键自动缩回,留下空白区域. 需求: 需要安卓能自适应底部虚拟按键,用户隐藏虚拟按键时应用要占 ...
- appium简明教程（10）——控件定位基础
狭义上讲,UI级的自动化测试就是让机器代替人去点来点去的过程. 但机器去点什么(点上面还是点左边),怎么点(是长按还是轻触),这些东西是必须由代码的编写者所指示清楚的. 控件定位就是解决机器点什么的问 ...