高仿版今日头条
2017-06-27 本文已影响179人
亚当斯密
采用响应式移动布局，会根据屏幕大小不同程度缩放，来看看效果对比
效果对比图
实现原理其实十分简单，需要配合flexible.js和jquery库实现原理，数据是拿到本地的，所以不存在跨域情况，
做出来如上效果其实很容易，首先把静态页面铺好，如果用的是sublime text编辑器，首先在点击菜单栏找到倒数第二项preferences，选择第一个选项，浏览程序包，找到cssrem.sublime-settings这里简单设置一下px和rem的转换比，选择合适的比例。这里不多介绍了我选的是37.5，因为我的iphone 6 写页面，然后自适应所有就可以了。
第一步
第二步
然后设置完基本属性后，就开始做页面了
页面的话很简单
基本文件夹
等结构样式设置完之后，导航地方有两种写法，一种是js逻辑去处理，另一种是用C3去做，我觉得还是尽可能使用C3去代替Dom操作，页面小倒无所谓，页面多的话会影响页面性能的，而且C3写出来的丝滑流畅哈哈哈哈。
最后展示一下代码吧，废话不多说了，写完赶紧吃饭去。。
<b>下面是index.html代码部分</b>
<!doctype html>
<html lang="en">
<head>
<title>今日头条</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
<script type="text/javascript" src="js/flexible.js"></script>
<script type="text/javascript" src="http://zeptojs.com/zepto.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
<div id="headernull"></div>
<!-- 头部 -->
<div id="header">
<div class="ce">
</div>
</div>
<!-- 导航 -->
<div class="nav">
<ul>
<li>推荐</li>
<li>热点</li>
<li>北京</li>
<li>视频</li>
<li>社会</li>
<li>娱乐</li>
<li>科技</li>
<li>体育</li>
<li>汽车</li>
<li>财经</li>
<li>搞笑</li>
<li>更多</li>
</ul>
<p><a href="#">+</a></p>
</div>
<!-- 新闻一 -->
<div id="new">
<p>实拍中国最牛气的几座高铁站，看看有你去过的吗?</p>
<div class="new_top">
</div>
<div class="new_bottom">
<span> 博览古今中外历史 </span>
<span> 评论 </span>
<span> 481 </span>
<span> 刚刚 </span>
</div>
</div>
<!-- 新闻二 -->
<div id="new">
<p>今年大蒜行情：莫要再谈 “供求” 在作怪，实属 “贪婪” 惹的祸</p>
<div class="new_top">
</div>
<div class="new_bottom">
<span> 久久星空 </span>
<span> 评论 </span>
<span> 33 </span>
<span> 2分钟前 </span>
</div>
</div>
<!-- 新闻三 -->
<div id="new">
<p>今年大蒜行情：莫要再谈 “供求” 在作怪，实属 “贪婪” 惹的祸</p>
<div class="new_top">
</div>
<div class="new_bottom">
<span> 久久星空 </span>
<span> 评论 </span>
<span> 33 </span>
<span> 2分钟前 </span>
</div>
</div>
<!-- 新闻四 -->
<div id="new">
<p>今年大蒜行情：莫要再谈 “供求” 在作怪，实属 “贪婪” 惹的祸</p>
<div class="new_top">
</div>
<div class="new_bottom">
<span> 久久星空 </span>
<span> 评论 </span>
<span> 33 </span>
<span> 2分钟前 </span>
</div>
</div>
<!-- 新闻五 -->
<div id="new">
<p>今年大蒜行情：莫要再谈 “供求” 在作怪，实属 “贪婪” 惹的祸</p>
<div class="new_top">
</div>
<div class="new_bottom">
<span> 久久星空 </span>
<span> 评论 </span>
<span> 33 </span>
<span> 2分钟前 </span>
</div>
</div>
<!-- 新闻六 -->
<div id="new">
<p>今年大蒜行情：莫要再谈 “供求” 在作怪，实属 “贪婪” 惹的祸</p>
<div class="new_top">
</div>
<div class="new_bottom">
<span> 久久星空 </span>
<span> 评论 </span>
<span> 33 </span>
<span> 2分钟前 </span>
</div>
</div>
</body>
</html>
<b>导航部分的JS逻辑部分
// 导航滑动
$(function(){
var startX,
moveX;
$(".nav ul").on("touchstart",function(e){
var target = e.targetTouches[0];
startX = this.offsetLeft - target.clientX;
})
$(".nav ul").on("touchmove",function(e){
var target = e.targetTouches[0];
this.style.left = target.clientX + startX+"px";
if(this.offsetLeft>=0){
this.style.left = 0;
}
if(this.offsetLeft<(innerWidth-this.offsetWidth)){
this.style.left = (innerWidth-this.offsetWidth)+"px";
}
})
})
<b>基本样式在这里</b>
#headernull{
height:1.2rem;
}
#header{
height:1.173333rem;
background:#d33d3e;
display:flex;
position: fixed;
top:0;
left:0;
right:0;
z-index:999;
}
#header{
display:flex;
justify-content:space-between;
align-items:center;
padding:0 0.4rem;
}
#header .ce{
display:flex;
align-items:center;
}
#header .ce>img:first-of-type{
width:2.213333rem;
height:0.533333rem;
}
#header .ce>img:last-of-type{
width:0.4rem;
height:0.4rem;
padding-left:0.133333rem;
}
#header>img:first-of-type,
#header>img:last-of-type{
width:0.673333rem;
height:0.673333rem;
}
/*导航*/
.nav{
overflow:hidden;
height:0.986667rem;
position: relative;
background:#eee;
border-bottom:#eee;
}
.nav ul{
position: absolute;
left:0;
height:0.986667rem;
width: 17.066667rem;
line-height: 0.986667rem;
}
.nav ul li{
width:1.25rem;
display:inline-block;
font-size: 0.426667rem;
text-align:center;
}
.nav p{
position: absolute;
right:0;
top:0;
bottom:0;
width:1.066667rem;
height:0.986667rem;
line-height: 0.986667rem;
text-align:center;
}
.nav p a{
text-decoration:none;
color:red;
font-size:0.8rem;
background:#eee;
}
/*新闻一*/
#new{
height:4.8rem;
width:9.5rem;
border-bottom:0.026667rem solid #dfdfdf;
margin:0 auto;
font-size: 0;
}
#new p{
line-height: 0.76rem;
font-size:0.426667rem;
color:#333;
}
.new_top img{
width:3.053333rem;
height:2.133333rem;
padding:0 0.04rem;
}
.new_bottom span{
font-size:0.293333rem;
color:#9c9c9c;
line-height: 1rem;
padding:0 0.04rem;
}
还有重置样式这个就自己写好了，margin:0 padding:0;简单设置一下就好，好了吃饭去了。。。
