使用jq实现电商网站‘楼梯效果’的渲染

最新推荐文章于 2020-09-25 08:43:20 发布

wangtianqiboke

最新推荐文章于 2020-09-25 08:43:20 发布

阅读量328

点赞数

分类专栏： jq 文章标签： jquery 楼梯效果 js

本文链接：https://blog.csdn.net/wangtianqiboke/article/details/92073909

版权

jq 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

分享一个关于楼梯效果的练习：

实现功能的方法：

关键在于滑动时获取对应li索引 index() animate()的方法获取索引时需要用到scrollTop() outHeight()，offset()方法

和jq的动画效果fadeIn() ,fadeOut()的方法，完成楼梯效果的渲染。

最后的完善：此时楼梯效果点击li滑动到对应楼层是会有页面会有动画滑动的效果，不够完善。

此时定一个变量flag来监听如果为true 执行侧边列表显示的代码，给侧边li加点击事件时，flag为FALSE

实现页面滚动代码时另其变为true。

首先获取鼠标滑动的距离，滑动之后获取目标li的对应的索引，给对应的li添加类名使用animate()方法是页面滚动到对应的li。
给li添加点击事件，（出去最后一个li）使用animate()
给最后一个li添加事件使用animate()页面回到顶部。

实例展示 ：

css样式

body,

ul,

li {

padding: 0;

margin: 0;

}

li {

list-style: none;

}

#floorNav {

/* display: none; */

position: fixed;

top: 100px;

left: 50px;

width: 32px;

border: 1px solid #CECECE;

}

#floorNav li {

position: relative;

width: 32px;

height: 32px;

border-bottom: 1px solid #CECECE;

text-align: center;

line-height: 32px;

font-size: 12px;

}

#floorNav span {

display: none;

position: absolute;

top: 0;

left: 0;

width: 32px;

height: 32px;

background: red;

color: white;

}

#floorNav li:hover span,

#floorNav li.hover span {

display: block;

}

#floorNav li:last-child {

background: red;

color: white;

border-bottom: none;

}

#header,

#footer {

width: 1000px;

height: 1000px;

background: darkgoldenrod;

margin: 0 auto;

}

#content {}

#content li {

width: 1000px;

height: 600px;

margin: 0 auto;

font-size: 40px;

text-align: center;

line-height: 600px;

}

</style>

<body>

<ul>

</ul>

</div>

<ul>

</ul>

</div>

$(function () {

var flag = true;

$(window).scroll(function () {

if (flag) {

var st = $(this).scrollTop();//鼠标滑动距离

//滑动距离大于300 显示侧边列表

if (st > 300) {

$("#floorNav").fadeIn();

} else {

$("#floorNav").fadeOut();

}

//遍历li 滑动距离大于li 获取匹配元素在当前视口的相对偏移高度-获取第一个匹配元素外部高度（默认包括补白和 //边框）的一半。取得该元素的索引.

$("#content li").each(function () {

if (st >= $(this).offset().top - $(this).outerHeight() / 2) {

var index = $(this).index();

//获取该元素的索引并添加类名，其他兄弟元素移出类名

$("#floorNav li").eq(index).addClass("hover").siblings().removeClass("hover");

}

})

}

})

//排除最后一个li 添加点击事件先获取索引添加类名移出兄弟元素类名

$("#floorNav li:not(:last)").click(function () {

flag = false;

var index = $(this).index();

$(this).addClass("hover").siblings().removeClass("hover");

//页面滚动到对应li标签对应位置

$("body,html").animate({ "scrollTop": $("#content li").eq(index).offset().top }, 200, function () {

flag = true;

});

//给侧边列表最后一个li 添加点击事件页面滚动到最上面

$("#floorNav li:last").click(function () {

$("body,html").animate({ "scrollTop": 0 }, 200);

})

</script>

</body>

wangtianqiboke

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
使用jq实现电商网站‘楼梯效果’的渲染

分享一个关于楼梯效果的练习：实现功能的方法：关键在于滑动时获取对应li索引 index() animate()的方法获取索引时需要用到scrollTop() outHeight()，offset()方法和jq的动画效果fadeIn() ,fadeOut()的方法，完成楼梯效果的渲染。最后的完善：此时楼梯效果点击li滑动到对应楼层是会有页面会有动画滑动的效果，不够完善。...
复制链接

扫一扫