Swiper结合jQuery实现腾讯新闻首页
今天我们来说一下,Swiper结合jQuery实现的腾讯新闻首页,
咱们先来看一下效果图:
这也是我把PC端缩成移动端来截的图,毕竟是PC端,要是不好看的话请见谅,,,,,,,,,,,,,
然后请允许我墨迹几句话,说一下我的小思路,
我的这个页面上,所有的东西都是可以滑动的,包括上面的小导航....也就是说可移动的滑块有三个;
1,导航条
2.轮播图,
3选项卡
在这方面我用了3个Swiper滑块,分别设置不同的属性,然后在选项卡里我用了onSlideChangeStart这个方法,回调函数，swiper从当前slide开始过渡到另一个slide时执行。触摸情况下，如果释放slide时没有达到过渡条件而回弹时不会触发这个函数.然后通过jQuery来操作CSS样式,完成选项卡的效果:
翠花:"代码来了"!
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>腾讯</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/> <link rel="stylesheet" href="css/swiper.min.css">
<script src="js/jquery-1.10.1.min.js"></script>
<script src="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;
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; }
#header .swiper-slide {
padding: 0 20px;
width:auto;
}
#banner {
width: 100%;
height:170px;
overflow: hidden;
margin-top:43px;
position:relative;
}
#banner .swiper-slide {
position:relative;
text-align:center;
}
#banner img {
max-width: 100%;
}
.gallerytitle {
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(21,20,20,0.5); */
background-color: rgba(0,0,0,0); }
.pagination {
position: absolute;
z-index: 20;
bottom: 10px;
width: 66px;
text-align: center;
right:0;
}
.swiper-pagination-bullet {
display: inline-block;
width: 5px;
height: 5px;
border-radius:5px;
background: #fff;
margin: 0 2px;
opacity: 0.8;
cursor: pointer;
}
.swiper-pagination-bullet-active {
background: #ff6600;
}
#tabs-container{
height:400px;
}
.tabs{
margin-top:20px;
border-top: 2px solid #9ac7ed;
background:url(images/headbg.png) no-repeat left top #f9fafa;
background-size:auto 100%;
width:100%;
height:38px;
overflow:hidden;
}
.tabs a{
font-size: 1.125em;
font-weight: normal;
text-align: center;
float: left;
width: 64px;
height: 38px;
line-height: 38px;
color: #2a70be;
}
.tabs a.active {
border-top: 2px solid #2a70be;
margin-top: -2px;
background-image: url(images/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: 1.125em;
}
</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>
</div> <div id="banner">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="data:images/0.jpg" /><h2 class="gallerytitle">孙俪芈月造型亮相 清纯似少女</h2></div>
<div class="swiper-slide"><img src="data:images/1.jpg" /><h2 class="gallerytitle">Angelababy弟弟曝光 五官精致颜值爆表</h2></div>
</div>
<div class="pagination"></div>
</div> <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">
<div class="content-slide">
<ul class="news-list">
<li>朝鲜逃兵越境杀4名中国人被捕</li>
<li>温州立人集团非法吸存案宣判</li>
<li>陈水扁坐狱6年后获准保外就医</li>
<li>她们的家长不觉得丢人吗？</li>
<li>1名韩国毒贩在华被执行死刑</li>
<li>呼格案疑似真凶赵志红受审</li>
<li>媒体披露杨卫泽被带走细节</li>
<li>改样板戏，你能比徐克牛吗?</li>
<li>社保缴费狂涨：穷人不堪重负</li>
<li>A股美元：当负相关已成往事</li> </ul>
</div>
</div>
<div class="swiper-slide">
<div class="content-slide">
<ul class="news-list">
<li>
巨型野生灵芝直径1米多</li>
<li>那些年 被毁过的童年照</li>
<li>男子为侄儿设计“大白鲨”床</li>
<li>女子婚后发现车房全是借来的</li>
<li>女子钓到800斤金枪鱼</li>
<li>濒危动物并非全都可爱</li>
<li>贫困大学生捡万元现金交警察</li>
<li>女子裸体钻烟囱欲见前男友</li>
<li>父亲将女儿房子赠给自己被告</li>
<li>少女开颅手术中醒来询问进程</li>
</ul> </div>
</div>
<div class="swiper-slide">
<div class="content-slide"> <ul class="news-list">
<li>
韩国也山寨"机器大狗":能跑能跳</li>
<li>杨子荣智取威虎山的前前后后</li>
<li>中国近2年已猛造100艘舰艇</li>
<li>兵王练瞄准用眼过度 险些失明</li>
<li>美媒称中日开战美国有2种结局</li>
<li>俄神秘电台连续40年发送信号</li>
<li>专家:翼龙战机可部署中越边境</li>
<li>驻藏战士前行500米用1小时</li>
<li>"太行"行了:歼11B重歼大批下线</li>
<li>中国水下机器人可攻击敌蛙人
</li></ul>
</div>
</div>
</div>
</div> <script type="text/javascript">
window.onload = function() {
var mySwiper1 = new Swiper('#header',{
freeMode : true,
slidesPerView : 'auto',
});
var mySwiper2 = new Swiper('#banner',{
autoplay:5000,
visibilityFullFit : true,
loop:true,
pagination : '.pagination',
}); var tabsSwiper = new Swiper('#tabs-container',{
speed:500,
onSlideChangeStart: function(){
$(".tabs .active").removeClass('active')
$(".tabs a").eq(tabsSwiper.activeIndex).addClass('active')
}
})
$(".tabs a").on('touchstart mousedown',function(e){
e.preventDefault()
$(".tabs .active").removeClass('active')
$(this).addClass('active')
tabsSwiper.slideTo( $(this).index() )
})
$(".tabs a").click(function(e){
e.preventDefault()
}) }
</script>
</body>
</html>
今天的知识就是这样!你们学会了吗????
Swiper结合jQuery实现腾讯新闻首页的更多相关文章
- Python爬取腾讯新闻首页所有新闻及评论
前言 这篇博客写的是实现的一个爬取腾讯新闻首页所有的新闻及其所有评论的爬虫.选用Python的Scrapy框架.这篇文章主要讨论使用Chrome浏览器的开发者工具获取新闻及评论的来源地址. Chrom ...
- 腾讯新闻多图jQuery相册展示效果代码
腾讯新闻多图jQuery相册代码,带左右切换箭头,带缩略图,可左右切换,点击缩略图展示原图. 在线演示本地下载
- 【Android UI设计与开发】7.底部菜单栏（四）PopupWindow 实现显示仿腾讯新闻底部弹出菜单
前一篇文章中有用到 PopupWindow 来实现弹窗的功能.简单介绍以下吧. 官方文档是这样解释的:这就是一个弹出窗口,可以用来显示一个任意视图.出现的弹出窗口是一个浮动容器的当前活动. 1.首先来 ...
- 基于jQuery的新浪游戏首页幻灯片
分享一款基于jQuery的新浪游戏首页幻灯片,带左右箭头,选项卡缩略图,自动轮播切换的jQuery幻灯片代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <br>& ...
- Android------视频播放器（包含全屏播放，快退，快进，腾讯新闻的列表播放等）
前段时间做了一个新闻APP,涉及到了列表视频播放,和腾讯新闻APP差不多,总结了一下代码,写了一个Demo来分享给大家. 用了 TabLayout+RecylerView+自定义视频控件 完成的 ...
- Python写网络爬虫爬取腾讯新闻内容
最近学了一段时间的Python,想写个爬虫,去网上找了找,然后参考了一下自己写了一个爬取给定页面的爬虫. Python的第三方库特别强大,提供了两个比较强大的库,一个requests, 另外一个Bea ...
- Python 实现腾讯新闻抓取
原文地址:http://www.cnblogs.com/rails3/archive/2012/08/14/2636780.htm 思路: 1.抓取腾讯新闻列表页面: http://news.qq.c ...
- android实现超酷的腾讯视频首页和垂直水平网格瀑布流一揽子效果
代码地址如下:http://www.demodashi.com/demo/13381.html 先来一波demo截图 实现ListView.GridView.瀑布流 1.导入RecyclerView的 ...
- 简单的css缩放动画,仿腾讯新闻的分享按钮和美团app底部的图标样式
最近看到一些好看的hover的图形缩放效果.然后自己就写了下,发现这2种效果都不错.如果伙伴们更好的实现方式可以在下面留言哦~ 还有美团的效果,我就不展示了,喜欢的可以去app应用上看看. 这两种效果 ...
随机推荐
- js 正则表达式（reg）
一.RegExp对象方法: 1.exec() 检索字符串中指定的值,并返回值(找不到返回null) 效果: <textarea name="content" id=&qu ...
- day0202 (%s)
#格式化输出# % s d# name = input('请输入姓名')# age = input('请输入年龄')# height = input('请输入身高')# msg = "我叫% ...
- IIS进程池异常崩溃，导致网站 service unavailable，原因排查与记录。
昨晚十点钟的样子,网站崩溃,开始 service unavailable,最近开始业务高峰,心里一惊,麻痹肯定进程池又异常崩溃了.又碰到什么问题?上次是因为一个异步线程的问题,导致了进程池直接崩溃,后 ...
- MySQL 的数据库、表基本操作
1.链接数据库 mysql -u root -ppassword 2创建数据库 create database mr_book; 3选择数据库 use mr_book; 4 创建表 create ta ...
- OpenGL6-纹理动画
代码下载 #include "CELLWinApp.hpp"#include <gl/GLU.h>#include <assert.h>#include & ...
- 关于window.console&&console.log(123)的思考
一.JS的且运算记得最开始看到window.console&&console.log(123),当时知道能起什么作用但是没有深入研究,最近在研究后总算弄明白了.要理解这个,首先得明白三 ...
- Android Studio修改程序包名
我也是在网上看到的,并且这个方法只能这么修改:cn.example.xxx修改为cn.example.yyy ,修改到根目录下... refactor---rename修改 然后clean,buil ...
- 持续集成：TeamCity 的安装和使用
TeamCity 本文初衷 让大家了解持续集成(CI),以及入门了解 JetBrains 家的 TeamCity 的一些简单实用. TeamCity 的一些复杂使用我暂时也不会,一样也是要看文档的,所 ...
- win10中VirtualBox联网设置
<分享>关于win10操作系统中VirtualBox无法桥接的解决方法 版权声明:本文为博主原创文章,未经博主允许不得转载. 升级win10,本来是一件很好的事,想好好体验一下新版本的感觉 ...
- Scrapy框架学习（二）Scrapy入门
接下来以爬取quote.toscrape.com为例完成一遍Scrapy的抓取流程. 首先创建一个Scrapy项目.打开命令行,输入以下命令: scrapy startproject projectn ...