web前端练习-模仿DJI首页（终极篇）
今天终于把DJI的首页粗糙的模仿下来了，这近一周的时间以来，在模仿过程中学习到了不少东西。果然只有在练习的时候才能查漏，虽然没有完全模仿，但是对自己来说，确实学习到不少的知识。
- 效果展示
- HTML代码
- css代码
jQuery代码
(1)效果图片
- a)主体部分
- b)其他
c)footer
(2)HTML代码
a)切换图片效果
<div id="homepage">
<div id="banner">
<ul>
<li>
<img src="../images/1.png" />
</li>
<li>
<img src="../images/2.png" />
</li>
<li>
<img src="../images/3.png" />
</li>
<li>
<img src="../images/4.png" />
</li>
<li>
<img src="../images/5.png"/>
</li>
</ul>
</div>
</div>- b)其他信息展示
<div id="container-fluid">
<div class="show-img">
<a href="#" class="guide-item">
<img src="../images/bottom-1.png">
</a>
</div>
<div class="show-img">
<a href="#" class="guide-item">
<img src="../images/bottom-2.png">
</a>
</div>
<div class="show-img">
<a href="#" class="guide-item">
<img src="../images/bottom-3.png">
</a>
</div>
</div>- c)footer
<div id="site-footer">
<div id="container">
<div id="rows">
<div class="link-list">
<a class="title" href="#">关于大疆</a>
<a href="#">关于我们</a>
<a href="#">精彩活动</a>
<a href="#">招募精英</a>
<a href="#">大疆公益</a>
<a href="#">大疆行业应用</a>
<a href="#">大疆传媒</a>
<a href="#">联系我们</a>
</div>
<div class="link-list">
<a class="title" href="#">新闻中心</a>
<a href="#">新闻</a>
<a href="#">媒体报道</a>
</div>
<div class="link-list">
<a class="title" href="#">购买渠道</a>
<a href="#">大疆官方商城</a>
<a href="#">大疆直营店</a>
<a href="#">手机APP查找门店</a>
<a href="#">查找所有零售店</a>
<a href="#">天猫官方旗舰店</a>
<a href="#">成为授权经销商</a>
</div>
<div class="link-list">
<a class="title" href="#">社区</a>
<a href="#">天空之城</a>
<a href="#">大疆社区</a>
<a href="#">精彩视频</a>
</div>
<div class="link-list">
<a class="title" href="#">教育</a>
<a href="#">安全飞行指引</a>
<a href="#">慧飞培训中心</a>
</div>
<div class="link-list">
<a class="title" href="#">开发者</a>
<a href="#">开发者论坛</a>
<a href="#">开发者Github</a>
</div>
</div>
<div id="footer">
<div class="footer-info">
<a href="2.html">
<img src="../images/footer-logo.png" />
</a>
</div>
<div class="footer-info" style="width: 30%;margin-left: 100px">
<span>网站问题反馈 <a href="#" style="color: #44a8f2">点击这里</a><br/><br/>
Copyright © 2016 DJI 大疆创新 版权所有 <a href="#">隐私政策</a><a href="#">使用条款
</a> <a href="#">网站地图</a><br/>
粤ICP备15057791号-1
</span>
</div>
<div class="footer-info" style="text-align: right;float: right">
<img src="../images/footer-share.png" />
</div>
</div>
</div>
</div>(3)css代码
- a)图片切换
#homepage{
background: rgba(0,0,0,0) none repeat scroll 0 0;
min-width: 1230px;
height: 638px;
position: relative;
overflow: hidden;
}
#homepage #banner ul{
height: 638px;
width: 100%;
position: relative;
}
#homepage #banner ul li{
width: 100%;
float: left;
}
#homepage #banner img{
border: 0;
}
#homepage #banner .btn{
position: absolute;
width: 100%;
margin-left: auto;
margin-right: auto;
text-align: center;
bottom: 8%;
}
#homepage #banner .btn span{
display: inline-block;
zoom: 1;
width: 60px;
height: 2px;
font-size: 0;
margin-left: 10px;
cursor: pointer;
background: #979797;
}
#banner .prev{
width: 20px;
height: 40px;
position: absolute;
top: 40%;
left: 10px;
background: url("../images/prev.png") no-repeat 0 0;
cursor: pointer;
}
#banner .next{
width: 20px;
height: 40px;
position: absolute;
top: 40%;
right: 10px;
background: url("../images/next.png") no-repeat 0 0;
cursor: pointer;
}- b)其他信息
#container-fluid {
min-width: 1230px;
width: 100%;
height: 290px;
}
#container-fluid .show-img{
position: relative;
float: left;
width: 445px;
height: 290px;
margin-left: 3px;
overflow: hidden;
vertical-align: middle;
}
#container-fluid .show-img .guide-item{
display: block;
width: 445px;
height: 290px;
position: relative;
overflow: hidden;
}
#container-fluid .show-img img{
position: absolute;
left: 0;
top:0;
}- c)footer
#site-footer{
background: #f7f8f9 none repeat scroll 0 0;
min-width: 1230px;
width: 100%;
height: 317px;
padding: 0 0 40px;
}
#site-footer #container{
position: relative;
width: 1170px;
height: 317px;
margin-left: auto;
margin-right: auto;
padding: 0 15px;
}
#site-footer #container #rows{
margin-left: -15px;
margin-right: -15px;
height: 212px;
}
#site-footer #container #rows .link-list{
width: 170px;
height: 182px;
margin-top: 30px;
padding:0 15px ;
float: left;
}
#site-footer #container #rows .link-list a{
width: 170px;
height: 21px;
color: #a6acaa;
font-size: 11px;
font-weight: 400;
display: block;
text-decoration: none;
}
#site-footer #container #rows .link-list a:hover{
color: #44a8f2;
}
#site-footer #container #rows .link-list .title{
color: #979797;
font-size: 12px;
font-weight: 400;
height: 17px;
line-height: 17px;
margin-bottom: 18px;
}
#site-footer #footer{
margin:40px -15px 0 -15px;
height: 65px;
}
#site-footer #footer .footer-info{
width: 25%;
min-height: 1px;
padding: 0 15px;
float: left;
text-align: center;
font-size: 11px;
color:#a6acaa ;
}
#site-footer #footer .footer-info a{
color: #a6acaa;
}
#site-footer #footer .footer-info a:hover{
color: #44a8f2;
}(4)jQuery代码
- a)图片切换
$(function(){
var len = $("#banner ul li").length;
$("#banner ul li:not(:first)").hide();
$("#banner ul li:first").show();
var index = 0;
var btn="<div class='btn'>";
for(var i =0;i < len; i++){
btn+="<span></span>";
}
btn+="</div><div class='prev'></div><div class='next'></div>";
$("#banner").append(btn);
function pre(){
if(index == 0){
index = len;
}
index--;
showPics();
}
function next(){
if(index == len){
index = -1;
}
index++;
showPics();
}
$("#banner .prev").click(function(){
pre();
});
$("#banner .next").click(function(){
next();
});
function showPics(){
$("#banner ul li").eq(index).show().siblings().hide();
$("#banner .btn span").stop(true,false).animate({"opacity":"0.4"},
300).eq(index).stop(true,false).animate({"opacity":"1"},300);
}
$("#banner span").click(function(){
index = $(this).index();
showPics();
});
})- b)其他信息-鼠标经过图片放大
$(function(){
$w=$(".show-img img").width();
$h=$(".show-img img").height();
$w2 = $w + 10;
$h2 = $h +10;
$(".show-img img").hover(function(){
$(this).stop().animate({height:$h2,width:$w2},500);
},function(){
$(this).stop().animate({height:$h,width:$w},500)
})
})总结
这次模仿让我受益良多，主要就是实现图片切换的功能，其实也不是特别难，就是刚刚学，什么都不会。出现了一个问题就是鼠标经过图片的时候，放大的时候父容器也变大了一点点。
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
