學習web前端之練習三
阿新 • • 發佈：2019-01-23
web前端練習-模仿DJI首頁（終極篇）
今天終於把DJI的首頁粗糙的模仿下來了，這近一週的時間以來，在模仿過程中學習到了不少東西。果然只有在練習的時候才能查漏，雖然沒有完全模仿，但是對自己來說，確實學習到不少的知識。
- 效果展示
- HTML程式碼
- css程式碼
jQuery程式碼
(1)效果圖片
- a)主體部分
- b)其他
c)footer
(2)HTML程式碼
a)切換圖片效果
<div id="homepage">
<div id="banner">
<ul>
<li - 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)
})
})總結
這次模仿讓我受益良多，主要就是實現圖片切換的功能，其實也不是特別難，就是剛剛學，什麼都不會。出現了一個問題就是滑鼠經過圖片的時候，放大的時候父容器也變大了一點點。