5-2作业问题

<!doctype html>

<html>

<head>

</head>

<body>

<ul>

<li>

<a href="#" style="color:red;" class="loginlink" id="loginlink">亲，请登录</a>&nbsp &nbsp

</li>

<li>

<a href="">手机逛幕淘</a>

</li>

</ul>

</div>

<ul>

<li>

</div>

<a href="">已买到的宝贝</a>

</div>

</li>

<li>

</div>

<a href="">收藏的宝贝</a>

<a href="">收藏的店铺</a>

</div>

</li>

<li>

<div >

</div>

</li>

<li>

</div>

<a href="">已卖出的宝贝</a>

<a href="">已出售的宝贝</a>

</div>

</li>

<li>

</div>

<a href="">消费者客服</a>

</div>

</li>

</ul>

</div>

</div>

</div>

购物车中还没有商品，赶紧选购吧！

</div>

</ul>

</div>

<div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<a href="">网络机顶盒</a>

</div>

</div>

</div>

</div>

</div>

<a href="">滚筒式洗衣机</a>

<a href="">迷你洗衣机</a>

<a href="">洗烘一体机</a>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<a href="#" class="menu-item"><li>手机运营数码 <span style="margin-left: 50px;"> > </span></li></a>

</ul>

</div>

</a>

</a>

</a>

</a>

</a>

</div>

</div>

<div>

<ul>

</ul>

</div>

<dl>

</dl>

<dl>

</dl>

<dl>

</dl>

<dl>

</dl>

<dl>

</dl>

<dl>

</dl>

<dl>

</dl>

<dl>

</dl>

<dl>

</dl>

<dl>

</dl>

<dl>

</dl>

<dl>

</dl>

</div>

</div>

<div>

</div>

</div>

</div>

</div>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

</div>

</div>

</div>

</div>

</div>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

</div>

</div>

</div>

</div>

</div>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

</div>

</div>

</div>

</div>

</div>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

</div>

</div>

</div>

</div>

</div>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

<dl>

<dd>匡威男棒球帽</dd>

</dl>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<input type="checkbox" name="autologin" value="autologin" checked="checked" "/> 下次自动登录&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

css样式为

margin:0;

padding:0;

}

body{

font: 14px/1.5 "微软雅黑",Verdana,Tahoma,Arial,sans-serif,"宋体";

}

.itop{

width:100%;

height:40px;

background:#f3f5f7;

}

.itopinner{

width:1200px;

height:40px;

line-height:40px;

margin:0 auto;

font-size:12px;

}

a {

text-decoration: none;

color:#333;

}

li{

list-style: none;

}

.itop ul li{

display: block;

float:left;

}

.itopleft ul li{

margin-left:20px;

}

.itopright{

float:right;

position: relative;

z-index: 999;

}

.itoprightmenu a{

display:block;

line-height: 28px;

}

.itopright ul li{

display: block;

margin-left:20px;

}

.itopright span{

position:absolute;

display:block;

margin-top:-37px;

margin-left:75px;

}

.itopright span img{

width:13px;

}

.itoprightcontent{

text-align:center;

}

/*登录框的样式*/

.layer-mask{

display: none;

width:100%;

height:100%;

left:0;

top:0;

position:fixed;

background:#000;

opacity: 0.5;

display: none;

z-index: 99999;

}

.layer-pop{

display: none;

width:400px;

height:400px;

background:#fff;

left:0;

top:0;

right:0;

bottom:0;

margin:auto;

position:fixed;

text-align:center;

z-index: 100000;

}

.layer-close{

float :right;

width:40px;

height: 40px;

text-align: center;

line-height: 40px;

border-radius: 50%;

}

.login{

margin-top:40px;

}

.login h4{

font-size:20px;

height:40px;

display: block;

margin-left:30px;

width:100px;

}

.login .input{

border:1px solid #ccc;

border-radius:3px;

padding:10px 5px;

width:300px;

}

.login .item{

margin:20px auto;

}

.login .submit{

background: #e40;

border:1px solid #e40;

padding:10px 5px;

width:300px;

color:#fff;

margin-left:-20px;

}

.login .error-msg{

color:#e40;

}

.item-autologin{

font-size:14px;

}

.loginimg img{

background:#333;

border-radius: 50%;

margin-left:15px;

}

.itoprightmenu{

display: none;

}

.itoprightcontent{

width:95px;

height:120px;

z-index: 9999;

}

.special{

display:block;

}

.logo{

width:100%;

height:100px;

background:pink;

}

.logocontent{

width:1200px;

height:100px;

margin:0 auto;

}

.logoimg, .logosearch,.shopping{

float:left;

margin-top:30px;

}

.shopping{

height:40px;

position:absolute;

margin-left:1050px;

width:150px;

background:red;

line-height:40px;

}

.shopping a{

color:#fff;

}

/*.shop-content{

z-index: 100000;

}*/

.logosearch{

position:absolute;

margin-left:280px;

}

.logosearch input{

width:650px;

height:35px;

}

.nav{

width:100%;

height:30px;

background:;

}

.logosearch span{

display:block;

background:black;

width:65px;

height:39px;

margin-left:652px;

margin-top:-39px;

color:#fff;

line-height:39px;

text-align:center;

}

.shop{

display: none;

}

.nav{

height:40px;

width:100%;

background:#07111b;

}

.nav a{

color:#fff;

}

.nav a:hover{

color:red;

}

.nav li{

float:left;

margin-left:50px;

}

.nav ul{

width:1200px;

margin-left:400px;

height:40px;

line-height:40px;

}

.bigbanner{

width:1200px;

height:550px;

margin:0 auto;

background:pink;

}

.shoplist, .banner, .life{

float:left;

}

.show{

display:block;

}

/*商品分类区*/

.shoplist{

position:relative;

width:190px;

height:555px;

line-height:36px;

background-color:rgba(255,0,0 ,0.8) ;

text-indent: 1em;

color:#fff;

margin-top:-45px;

}

.shoplist ul span{

position:absolute;

margin-left:80px;

}

.shoplist ul a{

width:190px;

height:35px;

line-height:35px;

}

.shoplisttitle{

height:40px;

}

.shoplisttitle img{

margin-top:15px;

}

.list a:hover{

background:#fff;

color:red;

}

/*二级子菜单*/

.menus{

width:900px;

display: block;

}

.sub-menu {

border:1px solid #d9dde1;

background:#fff;

position: absolute;

left: 370px;

top: 180px;

width: 730px;

height:510px;

z-index: 581;

box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.1);

display:none;

}

.sub-menu-innerbox{

width:700px;

margin-left:20px;

display: none;

overflow: hidden;

background:#fff;

margin-top:10px;

position: absolute;

}

.sub-row{

margin-top:25px;

}

.show{

display: block;

}

.bold{

font-weight:700;

}

.ml10{

margin-left:10px;

}

.mr10{

margin-right:10px;

}

.menu-item{

color:#fff;

display: block;

width:190px;

height:20px;

}

.sub-active{

display: block;

}

.hide{

display:block;

}

/*banner的图片轮播*/

.bannerbox{

width:700px;

height:510px;

overflow:hidden;

}

.banner{

width:700px;

height:510px;

position: relative;

margin:10px 10px 0px 10px ;

}

.banner-slide img{

width:700px;

height:500px;

}

.banner-slide{

width:700px;

height:510px;

background-repeat:no-repeat;

float:left;

display: none;

overflow: hidden;

}

.slide-active{

display:block;

}

.button{

position: absolute;

top: 50%;

overflow: hidden;

width: 40px;

height:30px;

}

.button img{

width:10px;

margin-left:10px;

margin-top:5px;

}

.prev{

margin-left:-680px;

}

.next{

margin-left:-50px;

}

.button:hover{

background-color:#333;

opacity: 0.8;

filter:alpha(opacity=80);

}

.dots {

position: absolute;

bottom: 0;

right: 0;

text-align: center;

padding-right: 24px;

line-height: 12px;

margin-right:270px;

margin-bottom:20px;

}

.dots span {

display: inline-block;

width: 12px;

height: 12px;

border-radius: 50%;

margin-left: 8px;

background-color: rgba(7, 17, 27, 0.4);

cursor: pointer;

box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8) inset;

}

.dots span .active{

box-shadow: 0 0 0 2px rgba(7, 17, 27, 0.4) inset;

background-color: #ffffff;

}

.life{

height: 500px;

position:absolute;

margin-left:900px;

margin-top:-500px;

width:300px;

background:#fff;

}

.mukuaibao{

width:292px;

text-indent:2em;

height:180px;

line-height:25px;

border: 1px solid #e0e0e0;

border-bottom:none;

}

.mukuaibaotitle{

height: 50px;

font-size:16px;

line-height: 50px;

color:red;

}

.mukuaibaotitle span{

display:block;

position: absolute;

margin-left:200px;

margin-top:-50px;

color:#333;

font-size:14px;

}

.iconimg{

height: 200px;

width:300px;

}

dl:nth-child(4n){

border-right:1px solid #e0e0e0;

}

.iconimg dl{

width:72px;

height:63px;

float:left;

border-top:1px solid #e0e0e0;

border-left:1px solid #e0e0e0;

text-align:center;

padding-top:15px;

}

.iconimg img{

width:20px;

height:20px;

}

.iconad img{

height: 80px;

width:292px;

}

/*1楼层*/

.onefloor{

width:1200px;

height: 40px;

margin:0 auto;

background:green;

}

.onefloorleft{

float: left;

height:40px;

}

.onefloorleft div{

float:left;

}

.onefloorleft div:first-child{

border:1px solid black;

border-radius: 50%;

color:#fff;

background:black;

font-size:10px;

padding:3px;

}

.onefloorleft div:nth-child(2){

font-size:20px;

font-weight: bolder;

margin-left:15px;

}

.onefloorright{

height:40px;

float:right;

margin-right:10px;

}

.onefloorright .tip{

float:left;

}

.hr{

width:1200px;

margin:0 auto;

border-bottom:1px solid red;

margin-top:-3px;

}

.oneflooradbox{

width:1200px;

text-align: center;

position: relative;

}

.onefloorad{

width:1200px;

height:500px;

margin:0 auto;

margin-top:15px;

}

.onefloorad dl{

text-align:center;

float:left;

width:197px;

height:210px;

margin:0 auto;

}

/*楼层导航*/

.floorscrol{

position: fixed;

left: 100px;

top: 150px;

display: none;

background:#9AC0CD;

}

.floorscrol div{

width: 70px;

height: 60px;

line-height: 70px;

border: 1px solid #7D9EC0;

text-align: center;

border-bottom:none;

}

.floorscrol div:last-child{

border-bottom:1px solid #666;

}

.floorscrol .word {

display: none;

}

.floorscrol .num{

font-size:16px;

}

js文件为：

$(document).ready(function(){

// 登录链接事件

// $("#loginlink").click(function(){

// // 显示弹出层遮罩

//$("#layer-mask").show();

// // 显示弹出层窗体

// $("#layer-pop").show();

// $(".login .title").css({'color':'red',

// 'border-bottom':'2px solid red'});

// // 弹出层关闭按钮绑定事件

// $("#layer-close").click(function(){

// // 弹出层关闭

// $("#layer-mask").hide();

// $("#layer-pop").hide();

// });

//});

//注册连接事件

//});

// 登录链接事件

$("#loginlink").click(function(){

// 获取登录窗体代码

var loginHtml = $("#loginHtml").html();

showLayer(loginHtml,400,400,closeCallback);

// 登录表单校验

$("#loginSubmitBtn").click(function(){

var username = $("input[name='username']").val();

var password = $("input[name='password']").val();

if(username === 'imooc' && password === 'imooc'){

alert("登录成功");

}else{

$(".error-msg").html("账号或密码输入错误");

}

});

// 注册链接事件

$("#regelink").click(function(){

// 获取注册窗体代码

var regeHtml = $("#regeHtml").html();

showLayer(regeHtml,400,400,closeCallback);

// 注册表单校验

$("#regeSubmitBtn").click(function(){

var username = $("input[name='username']").val();

var password = $("input[name='password']").val();

var repassword = $("input[name='repassword']").val();

if(username === 'imooc' && password === 'imooc' && repassword === password){

alert("注册成功");

}else{

$(".error-msg").html("账号或密码输入错误");

}

});

// 弹出层关闭回调函数

function closeCallback(){

$(".error-msg").html("");

}

// 显示弹出层

function showLayer(html,width,height,closeCallback){

// 显示弹出层遮罩

$("#layer-mask").show();

// 显示弹出层窗体

$("#layer-pop").show();

// 设置弹出层窗体样式

$("#layer-pop").css({

width : width,

height : height

});

// 填充弹出层窗体内容

$("#layer-content").html(html);

// 弹出层关闭按钮绑定事件

$("#layer-close").click(function(){

// 弹出层关闭

hideLayer();

// 关闭的回调函数

closeCallback();

});

}

// 隐藏弹出层

function hideLayer(){

// 弹出层关闭

$("#layer-mask").hide();

$("#layer-pop").hide();

}

//top右侧的导航项

var itoprighttitle=$('.itoprighttitle'),

itoprightmenu=$('.itoprightmenu'),

index=0,

itoprightcontent=$('.itoprightcontent');

for(var i=0,len=itoprightcontent.length;i<len;i++){

itoprighttitle.eq(i).attr('dataIndex',i);

itoprighttitle.eq(i).mouseover(function(){

itoprightmenu.css('display','block');

var idx=$(this).attr('dataIndex');

for(var i=0,len=itoprightcontent.length;i<len;i++){

itoprightmenu.eq(i).hide();

itoprightcontent.eq(i).css('background',"none");

}

itoprightmenu.eq(idx).show();

itoprightcontent.eq(idx).css('background',"#fff");

});

itoprighttitle.eq(i).mouseout(function(){

itoprightmenu.css('display','none');

itoprightcontent.css('background',"none");

})

}

//购物车

var interval1;

$("#shoptext").mouseenter(function(){

// clearTimeout(interval1);

// $(this).children().first().css({"color":"#ff6700","background":"#fff"});

// $(this).children().last().stop(true,true).slideDown();

$('.shop').css('display','block');

}).mouseleave(function(){

// var self = $(this);

// interval1 = setTimeout(function(){

// self.children().first().removeAttr("style");

// },700);

// $(this).children().last().delay(200).slideUp();

$('.shop').css('display','none');

});

var prev=$(".prev");//获取上一张按钮

var next=$(".next");//获取下一张按钮

var pics=$('.banner-slide');//获取一共有几张图片,图片的集合

var len=pics.length;//pics类数组的长度

var index = 0;//需要一个为图片索引的变量,因为图片是靠索引来切换的！

//1.绑定点击下一张的事件

next.click(function(){

//1.1 让index+1，还要做一个判断如果是最后一张图片就归0；

index++;

if(index >= len){

index=0;

}

//console.log(index);

changeImg();//调用切换图片函数；

});

//2.绑定点击上一张的事件

prev.click(function(){

//2.1 让index-1，还要做一个判断如果是第一张图片就换到最后一张；

index--;

if(index<0){

index=len-1;

}changeImg();

//console.log(index);

//调用切换图片函数；

});

//4.遍历所有圆点，然后给每个圆点绑定点击事件

$('.dots>span').each(function(suoyin){

$(this).click(function(){

index = suoyin;

changeImg(index);

console.log(this);

});

})

//5.自动轮播

var timeId = setInterval(function(){//把定时器装到timeId里方便等下清楚

next.click();//每隔两秒，调用下一张按钮事件

},2000);

//5.1鼠标经过轮播图的时候，清楚定时器

$('.banner').mouseenter(function(){

clearInterval(timeId);

});

//5.2鼠标离开轮播图的时候，重新开始定时器

$('.banner').mouseleave(function(){

timeId = setInterval(function(){

next.click();//每个两秒，调用下一张按钮事件

},2000);

});

//3.切换图片

function changeImg(){

$('.banner-slide').removeClass("slide-active");//把所有图片都隐藏

$('.dots>span').removeClass('active');//把所有当前小圆点隐藏

pics.eq(index).addClass('slide-active');//点击哪张得索引显示那张

$('.dots>span').eq(index).addClass('active');//点击那个那个显示

}

//banner上的子菜单的显示

for(var m=0;m<$('.menu-item').length;m++){

$('.menu-item').eq(m).attr('dataIndex',m);

$('.menu-item').eq(m).mouseover(function(){

$('.sub-menu').css('display','block');

$('.show').removeClass("show");

var idx = $(this).attr('dataIndex');

$('.sub-menu-innerbox').eq(idx).addClass("show");

})

}

//window.hideSubMenu = function(){

// $('.sub-menu').css('display','none');

// }

$('.menus').mouseout(function(){

//setTimeout('hideSubMenu()', 1);

$('.sub-menu').css('display','none');

})

$('.sub-menu-innerbox').mouseover(function(){

$('.sub-menu-innerbox').addClass("show");

})

/*楼层导航*/

/*当页面滚动至出现第二次楼层区时，左侧显示出楼层导航*/

$(window).scroll(function(){

//为页面添加页面滚动监听事件

var wst = $(window).scrollTop() ;//滚动条距离顶端值

if (wst > 1000){

$('.floorscrol').show();

};

if(wst>735 && wst<1275){

$('.floorscrol').mouseover(function(){

$('.floorscrol').find('num:first').css('display','none');

$('.floorscrol').find('word:first').css('display','block');

})

}

});

这样编写代码，当鼠标滑过banner区的二级菜单时，为什么显示不了二级菜单？还有楼层区的当页面滚动到对应楼层时，左侧对应的楼层导航项会变成对应的文字，要怎么实现呢？

慕九州9265930 2018-05-07

源自：项目：JQ实现瀑布流 5-2 作业题

收起

3回答

妮可妮可妮_ 2018-05-09 10:10:42

收起回答

一个bug不要慌 2018-05-08 19:34:36

我是这样实现的,是当$win.height() + $win.scrollTop() >= $(this).offset().top - offset时,做样式改变,希望能帮到你

收起回答

妮可妮可妮_ 2018-05-08 10:58:45

js文件中最后一行多写了一个分号,会导致报错
js文件中要将所有代码放入$(document).ready(function() { }函数中.
滚动至对应的楼层时，左侧对应的楼层导航项会由数字变成文字,可以通过检测滚动条滚动的高度(scrollTop() 方法)与相对应的每一楼层距顶部的高度(offset( ).top方法)是否相等,并设置相应的样式改变.

祝学习愉快~

收起回答

提问者慕九州9265930 #1

$(window).scroll(function(){ //为页面添加页面滚动监听事件 var wst = $(window).scrollTop() ;//滚动条距离顶端值 //当页面滚动至出现第二次楼层区时，左侧显示出楼层导航。 if (wst > 1000){ $('.floorscrol').show(); }; $('.floorscrol').mouseover(function(){ if(wst>735 && wst<1275){ $('.num').css('display','none'); $('.floorscrol').find('.word').css('display','block'); } }) }); 这个方法是当滚动条达到一定高度范围之内，让数字变成文字，为什么显示不了呢？是代码哪里有错吗？控制台也没有报错

2018-05-08 15:29:47
妮可妮可妮_ 回复提问者慕九州9265930 #2

获取到了滚动条滚动的高度,建议思路:将检测到的滚动条滚动的高度与相对应的每一楼层顶距顶部的高度是否相等,如果相等就将相应的楼层的文字,设置数字变为文字. 你的写法首先:使用的是mouseover事件,当鼠标移入时触发,并且将所有的文字一起显示了,这样的思路是不对的,建议参考上面的思路重新动手写一写~加油!

2018-05-08 15:57:38
提问者慕九州9265930 回复妮可妮可妮_ #3

$(window).scroll(function(){ //为页面添加页面滚动监听事件 var wst = $(window).scrollTop() ;//滚动条距离顶端值 //当页面滚动至出现第二次楼层区时，左侧显示出楼层导航。 if (wst > 1000){ $('.floorscrol').show(); }; $(window).scroll(function(event){ if(wst===$('#div1').offset()){ $('.floorscrol').find('.num').css('display','none'); $('.floorscrol').find('.word').css('display','block'); } }); }) 但是这样检测到的滚动条滚动到第一层是的高度与相对应的每一楼层顶距顶部的高度，第一层的数字也不会变，是哪里错了？

2018-05-08 18:34:52