第一次項(xiàng)目結(jié)束后，自己對(duì)JS css的影響更加加深了一點(diǎn)，既鞏固了以前的知識(shí)，還掌握了一些網(wǎng)上自己查詢到的新的知識(shí)，一舉2得，
剛開始的時(shí)候有點(diǎn)不知道從哪里開始下手，于是就看看一會(huì)原網(wǎng)頁。構(gòu)思整體的布局。想好從哪里開始寫 怎么寫之后，就開始簡單了 ，由于響應(yīng)式不是很熟悉，第一次頁面普的是死頁面，可是后來發(fā)現(xiàn)死頁面還沒有響應(yīng)式好，于是接下來研究響應(yīng)式，響應(yīng)式搞了半天終于搞懂，布局還是很簡單的，接下來只要把特效寫好就可以的，一開始我的頁面導(dǎo)航條比較復(fù)雜，需要滑動(dòng)的時(shí)候改變樣式，點(diǎn)擊的點(diǎn)擊的時(shí)候也要改變樣式，于是我就做了個(gè)判斷，同時(shí)判斷，代碼
$(window).scroll(function(){
var scrollT = $(this).scrollTop();
if(scrollT>20){
$(".navlg").css("background-color","#fff")
$(".nav").css({
"background-color":"#fff",
"height":"67px",
// "transition":("all","2s")
}),
$(".left a img").css('height','47.6px'),
$(".center ul li a").css({
'height':'66px',
"color":"#000",
"padding-top":"10px"
}),
$(".right1 a").css("color","#000"),
$(".right").css("margin-top","-10px")
$(".center ul li").mouseenter(function(){
$(this).addClass('active').siblings().removeClass('active');
}).mouseleave(function(){
$(this).removeClass('active');
})
}else{
$(".navlg").css("background-color","")
$(".nav").css({
"background-color":"",
"height":""
}),
$(".left a img").css('height',''),
$(".center ul li a").css({
'height':'',
"color":"",
"padding-top":""
}),
$(".right1 a").css("color",""),
$(".right").css("margin-top","");
$(".center ul li").mouseenter(function(){
$(this).removeClass('active');
})
}
})
var index=0;
var arr=0;
var bbb=0;
$(".right2 .xuebi").on("click",function(){
if(index == 0){
$(this).css({"background-position":"0px 3px",'transition':'0.5s'});
index =1;
}else{
$(this).css({"background-position":"0px -32px",'transition':'0.5s'});
index =0;
}
if(arr ==0){
$(".sousuo").css({"position":"fixed",
"top":"66px",
'transition':'0.5s'});
arr =1
}else{
$(".sousuo").css({"position":"fixed",
"top":"-344px",
'transition':'0.5s'});
arr =0;
}
if(bbb ==0){
$(".navlg").css("background-color","#fff")
$(".nav").addClass('active')
bbb=1;
}else{
$(".navlg").css("background-color","")
$(".nav").removeClass('active')
bbb=0;
}
})
后面的特效基本和這個(gè)原理都很是接近，搞懂了一個(gè)，其他基本都可以研究明白，中途有一個(gè)需要判斷滑動(dòng)距離和屏幕大小的時(shí)候，一開始難住了，后來百度了一下，詢問了同學(xué)，代碼如下
$(window).scroll(function(){
var w= $(window).width();
if(w>1000&&w<1200){
var T=$(this).scrollTop();
// console.log(T);
if(T>126){
$(".fulan").css("display","block")
}else{
$(".fulan").css("display","")
}
}
if(T>=3500){
$(".fulan").css("left","74.9%")
}else{
$(".fulan").css("left","")
}
})
$(window).scroll(function(){
var w=$(window).width();
if(w>1200){
var T=$(this).scrollTop();
console.log(T)
if (T>126){
$(".fulan").css("position","fixed");
$(".fulan").css({"top":"116px",
"left":"78.9%"})
}else{
$(".fulan").css("position","");
$(".fulan").css({"top":"",
"left":""})
}
}
})
總之還要其他很多小細(xì)節(jié)，經(jīng)過摸索，很詢問，一個(gè)個(gè)解決。經(jīng)過這個(gè)項(xiàng)目學(xué)習(xí)到了很多 。
