第一次项目结束后，自己对JS css的影响更加加深了一点，既巩固了以前的知识，还掌握了一些网上自己查询到的新的知识，一举2得，
刚开始的时候有点不知道从哪里开始下手，于是就看看一会原网页。构思整体的布局。想好从哪里开始写 怎么写之后，就开始简单了 ，由于响应式不是很熟悉，第一次页面普的是死页面，可是后来发现死页面还没有响应式好，于是接下来研究响应式，响应式搞了半天终于搞懂，布局还是很简单的，接下来只要把特效写好就可以的，一开始我的页面导航条比较复杂，需要滑动的时候改变样式，点击的点击的时候也要改变样式，于是我就做了个判断，同时判断，代码
$(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;
}
})
后面的特效基本和这个原理都很是接近，搞懂了一个，其他基本都可以研究明白，中途有一个需要判断滑动距离和屏幕大小的时候，一开始难住了，后来百度了一下，询问了同学，代码如下
$(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":""})
}
}
})
总之还要其他很多小细节，经过摸索，很询问，一个个解决。经过这个项目学习到了很多 。
网友评论