js实现楼层滚动效果
本文实例为大家分享了jquery实现滑动楼梯效果，实现楼层的滚动以及点击楼层按钮跳转到对应的楼层，代码如下
html代码：
<div style="height: 500px; background-color: black; color: #fff;">无意义的文本</div>
<div class="layerbox">
<div class="layer num1">第一层</div>
<div class="layer num2">第二层</div>
<div class="layer num3">第三层</div>
<div class="layer num4">第四层</div>
</div>
<div class="nav">
<ul>
<li>1F</li>
<li>2F</li>
<li>3F</li>
<li>4F</li>
</ul>
</div>
css代码：
* {
margin: 0;
padding: 0;
}
.layer {
height: 300px;
font-size: 80px;
color: white;
text-align: center;
}
.num1 {
background-color: red;
}
.num2 {
background-color: blue;
}
.num3 {
background-color: yellow;
}
.num4 {
background-color: green;
}
.nav {
position: fixed;
right: 50px;
bottom: 400px;
background-color: pink;
}
ul {
list-style: none;
}
ul li {
padding: 10px;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
border: 1px solid #000;
}
ul li.active {
background-color: crimson;
}
js代码：
<script>
var layers = document.querySelectorAll(".layer")
var lis = document.querySelectorAll('li')
for (let i = 0; i < lis.length; i++) {
const li = lis[i]
li.onclick = function (e) {
//页面的偏移量，原来的页面滚动的距离
var scrollTop = document.documentElement.scrollTop
var offsetTop = layers[i].offsetTop
if (scrollTop > offsetTop) {
// 滚动条向上移动
var timer = setInterval(function () {
if (scrollTop > offsetTop) {
scrollTop -= 40
if (scrollTop - offsetTop < 40) {
// 如果最后一洞的距离小于40时，直接设置偏移量为0
window.scrollTo(0, offsetTop)
} else {
window.scrollTo(0, scrollTop)
}
} else {
clearInterval(timer)
}
}, 50)
} else {
// 滚动条向下移动
// scrollTop <= offsetTop
var timer = setInterval(function () {
if (scrollTop < offsetTop) {
scrollTop += 40
if (offsetTop - scrollTop < 40) {
window.scrollTo(0, offsetTop)
} else {
window.scrollTo(0, scrollTop)
}
} else {
clearInterval(timer)
}
}, 50);
}
}
}
window.onscroll = function (e) {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
layers.forEach(function (v, i) {
if (v.clientHeight + v.offsetTop > scrollTop && scrollTop > v.offsetTop) {
// 滚动的楼层到达顶部范围，离开消失
lis[i].classList.add("active")
} else {
lis[i].classList.remove("active")
}
})
}
</script>
小编再为大家分享一段代码：jquery楼层滚动特效
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jq 楼层滚动效果</title>
<style>
* {
margin: 0;
padding: 0;
}
i {
font-style: normal;
}
ul,
li,
dl,
ol{
list-style: none;
}
#LoutiNav {
border: 1px solid gray;
width: 30px;
position: fixed;
top: 150px;
left: 50px;
display: none;
}
#LoutiNav li {
width: 30px;
height: 30px;
border-bottom: 1px solid gray;
line-height: 30px;
text-align: center;
cursor: pointer;
}
#LoutiNav span {
display: none;
}
#LoutiNav .active {
background: white;
color: darkred;
}
#LoutiNav li:hover span {
display: block;
font-size: 12px;
background: darkred;
color: white;
}
#LoutiNav li:hover i {
display: none;
}
#goTop {
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
background: gray;
position: fixed;
bottom: 30px;
right: 30px;
cursor: pointer;
border-radius: 5px;
display: none;
}
#goTop:hover {
background: darkred;
color: white;
}
#goTop:hover span {
display: block;
}
#erweima {
width: 130px;
height: 130px;
background: palegreen;
display: none;
position: absolute;
right: 46px;
bottom: 5px;
line-height: 130px;
text-align: center;
font-size: 20px;
border-radius: 10px;
}
#header {
height: 200px;
background: palegoldenrod;
text-align: center;
line-height: 200px;
font-size: 72px;
margin: 0 auto;
}
.louceng {
height: 810px;
text-align: center;
line-height: 610px;
font-size: 120px;
margin: 0 auto;
}
</style>
<script src="js/jquery-1.7.2.min.js"></script>
</head>
<body>
<ul id="LoutiNav">
<li class="active"><i>1F</i><span>服饰</span></li>
<li><i>2F</i><span>美妆</span></li>
<li><i>3F</i><span>手机</span></li>
<li style="border-bottom: none;"><i>4F</i><span>家电</span></li>
</ul>
<div id="goTop">
<span id="erweima">我是二维码</span> Top
</div>
<div id="header">头部</div>
<div id="main">
<div class="louceng" style="background: papayawhip;">服饰</div>
<div class="louceng" style="background: peachpuff;">美妆</div>
<div class="louceng" style="background: peru;">手机</div>
<div class="louceng" style="background: pink;">家电</div>
</div>
<script>
var oNav = $('#LoutiNav'); //导航壳
var aNav = oNav.find('li'); //导航
var aDiv = $('#main .louceng'); //楼层
var oTop = $('#goTop'); //回到顶部
$(window).scroll(function() {
//可视窗口高度
var winH = $(window).height();
//鼠标滚动的距离
var iTop = $(window).scrollTop();
if(iTop >= $("#header").height()) {
oNav.fadeIn();
oTop.fadeIn();
//鼠标滑动样式改变
aDiv.each(function() {
if(winH + iTop - $(this).offset().top > winH / 2) {
aNav.removeClass('active');
aNav.eq($(this).index()).addClass('active');
}
})
} else {
oNav.fadeOut();
oTop.fadeOut();
}
})
//点击回到当前楼层
aNav.click(function() {
var t = aDiv.eq($(this).index()).offset().top;
$('body,html').animate({
"scrollTop": t
}, 500);
$(this).addClass('active').siblings().removeClass('active');
});
//回到顶部
oTop.click(function() {
$('body,html').animate({
"scrollTop": 0
}, 500)
})
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
JavaScript实现楼梯滚动特效(jQuery实现)
想必大家都用过JD,在它的首页里面有个很常见的特性:就是 楼梯特效 . 对于程序员的我们,可以说是万物皆可盘.那么,我们就来盘一下它. 先上要实现的效果图: 效果功能描述:当点击右侧悬浮的按钮时,点击相应模块,左侧内容区域会自动跳转到该模块区域. 下面,上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name=&q
-
Js 实现文字爬楼滚动效果 结合文本框
文字爬楼 msg="我们网页特效" align="left"; speed=250; up=true; spas=" "; for (a=0;a "); for (i=1;i "); document.write(" "); } document.write(" "); function scrollIt() { j++; with (document.form) { if ((j+12
-
js实现楼层滚动效果
本文实例为大家分享了jquery实现滑动楼梯效果,实现楼层的滚动以及点击楼层按钮跳转到对应的楼层,代码如下 html代码: <div style="height: 500px; background-color: black; color: #fff;">无意义的文本</div> <div class="layerbox"> <div class="layer num1">第一层</div&g
-
jquery实现楼层滚动效果
本文实例为大家分享了jquery实现楼层滚动效果展示的具体代码,供大家参考,具体内容如下 html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/base.css&q
-
js焦点文字滚动效果代码分享
本文实例讲述了js焦点文字滚动效果.分享给大家供大家参考.具体如下: 效果描述: 今天推荐的这个又是一个原生的js焦点图效果 默认自动切换,也可以手动切换 javascript代码采用函数式对象编程,也就是javascript编程中的Module模式 基本用法很简单,主要特点有三: 1.模块化,可重用 2.封装了变量和function,和全局的命名空间不接触,不污染全局变量 3.只暴露可用public方法,其他私有方法全部隐藏,确保js相互之间不会冲突 运行效果图:---------------
-
JS平滑无缝滚动效果的实现代码
本文我们实现纯JS方式的滚动广告效果. 先show一下成品: 首先是网页样式: #demo { background: #FFF; overflow:hidden; border: 1px dashed #CCC; width: 1280px; height:200px; } #demo img { border: 3px solid #F2F2F2; } #indemo { float: left; width: 800%; } #demo1 { float: left; } #demo2 {
-
js 上下文字滚动效果
js实现的文字向上滚动效果,适合文字公告等. test #textHeight{line-height:25px; height:25px; overflow:hidden; width:150px; font-size:12px; border:solid 1px #666;} function ScrollText(content){ this.Delay=10; this.Amount=1; this.Direction="up"; this.Timeout=1000; this
-
countUp.js实现数字滚动效果
本文实例为大家分享了countUp.js数字滚动效果展示的具体代码,供大家参考,具体内容如下 1. 概述 1.1 说明 在项目过程中,有时候需要动态的去展示一些数据的加载状态,如一个数字为10000,需要5秒时间滚动加载完成.此时使用countup.js就能够很方便的处理此类功能问题. 1.2 countup.js countup.js是一个无依赖性.轻量级的javascript类,可用于快速创建动画,以更有趣的方式显示数字/数据.详见countup.js 1.3 countup.js使用 np
-
原生js实现公告滚动效果
本文实例为大家分享了js实现公告滚动展示的具体代码,供大家参考,具体内容如下 1.html结构 <body> <div id="notice" class="notice"> <ul id="noticeList"> <li>我是公告1</li> <li>我是公告2</li> <li>我是公告3</li> <li>我是公告4&l
-
JQuery插件Marquee.js实现无缝滚动效果
Marquee.js插件提供了许多属性选项,您可以配置定制外观和效果. { yScroll: "top" // 初始滚动方向 (还可以是"top" 或 "bottom") showSpeed: 850 // 初始下拉速度 scrollSpeed: 12 // 滚动速度 , pauseSpeed: 5000 // 滚动完到下一条的间隔时间 pauseOnHover: true // 鼠标滑向文字时是否停止滚动 loop: -1 // 设置循环滚动次
-
jQuery插件jquery.kxbdmarquee.js实现无缝滚动效果
本文实例为大家分享了jquery.kxbdmarquee.js无缝滚动的具体代码,供大家参考,具体内容如下 strep1.页面引入相关文件 <script src="lib/jquery/jquery.js"></script> <script src="lib/jquery/jquery.kxbdmarquee.js"></script> step2.写html结构.css样式.js css样式: html结构: j
-
js实现消息滚动效果
今天教大家做个消息滚动的小功能.实现的很简单.自己都有点意想不到呢~ 哈哈 1.实现的中心思想,如图所示: 2.图片移动,用的是appendTo()这个方法.这个方法是先将标签从父标签中删除,然后拼接到某个标签后面,所以也就是替我们实现了,remove()这个方法.所以用这个方法是极好的~ 3.然后就会用到定时器了.用定时器每次调用移动方法,让<ul>每次执行一个动画,改变它的margin-top值,执行完动画后,再将它的margin-top变为初始值: 4.触摸<ul>标签清除