漯河网站建设服务公司,东莞微网站,大连专业制作网站,福州seo按天付费说明#xff1a;该文属于 大前端全栈架构白宝书专栏#xff0c;目前阶段免费#xff0c;如需要项目实战或者是体系化资源#xff0c;文末名片加V#xff01;作者#xff1a;哈哥撩编程#xff0c;十余年工作经验, 从事过全栈研发、产品经理等工作#xff0c;目前在公司… 说明该文属于 大前端全栈架构白宝书专栏目前阶段免费如需要项目实战或者是体系化资源文末名片加V作者哈哥撩编程十余年工作经验, 从事过全栈研发、产品经理等工作目前在公司担任研发部门CTO。荣誉2022年度博客之星Top4、2023年度超级个体得主、谷歌与亚马逊开发者大会特约speaker、全栈领域优质创作者。 白宝书系列 启示录 - 攻城狮的自我修养 Python全栈白宝书 ChatGPT实践指南白宝书 产品思维训练白宝书 全域运营实战白宝书 大前端全栈架构白宝书 文章目录 ⭐ BOM特效开发 返回顶部按钮制作 楼层导航效果 ⭐ BOM特效开发
BOM是指浏览器对象模型Browser Object Model。它是JavaScript与浏览器之间的接口提供了操作浏览器窗口、文档、历史记录等功能的方法和属性。BOM包含一系列对象如window、document、history、location等这些对象允许开发者通过JavaScript去操作浏览器的各个部分。例如通过BOM可以打开和关闭浏览器窗口、获取当前页面的URL、修改浏览器历史记录等。通过BOMJavaScript可以与用户的浏览器进行交互实现更丰富的用户体验和功能。 返回顶部按钮制作 返回顶部的原理改变document.documentElement.scrollTop属性通过定时器逐步改变此值就会以动画形式返回顶部 示例代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylebody {height: 2000px;background-image: linear-gradient(to bottom, white, #ccc, #333);}#backtotop {width: 70px;height: 20px;background-color: orange;position: fixed;right: 100px;bottom: 100px;/*鼠标放上去变小手状*/cursor: pointer;}/style
/head
bodydiv idbacktotop返回顶部/divscriptvar backtotop document.getElementById(backtotop);//定义定时器var timer;backtotop.onclick function () {//设表先关clearInterval(timer);//设置定时器timer setInterval(() {document.documentElement.scrollTop - 100;if (document.documentElement.scrollTop 0) {clearInterval(timer);};}, 20);}/script
/body
/html楼层导航效果
先开了解一个属性——offsetTop属性 DOM元素都有offsetTop属性表示此元素到定位祖先元素的垂直距离 定位祖先元素在祖先中离自己最近的且拥有定位属性的元素 比如下方例子中ul具有定位属性则其中p节点的offset属性值是它到ul的垂直距离
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle* {margin: 0;padding: 0;}.box {width: 300px;height: 300px;border: 2px solid orange;margin: 50px auto;}.box ul {list-style: none;padding-top: 20px;position: relative;}.box ul li {margin-top: 10px;}.box ul li p{width: 30px;height: 30px;background-color: yellow;}/style
/head
bodydiv classboxullip idpara/p/li/ul/divscriptvar para document.getElementById(para);console.log(para.offsetTop);/script
/body
/html我们想要获得一个元素到页面最顶端的垂直距离净top值就要保证所有的祖先元素不要有定位。
下面我们来做一个简单的楼层导航效果点击右侧的导航条可以跳转到页面对应的位置 代码如下
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle* {margin: 0;padding: 0;}body {height: 5000px;}.content-part {width: 1000px;margin: 30px auto;background-color: #ccc;font-size: 50px;}.floornav {/* 固定定位 */position: fixed;top: 50%;margin-top: -100px;right: 40px;width: 120px;height: 200px;background-color: orange;}.floornav ul {list-style: none;}.floornav ul li {width: 120px;height: 40px;font-size: 26px;line-height: 40px;text-align: center;/* 小手指针 */cursor: pointer;}.floornav ul li.current {background-color: purple;color: white;}/style
/headbody!--制作楼层导航--nav classfloornavul idlistli data-n热点 classcurrent热点/lili data-n体育体育/lili data-n财经财经/lili data-n科技科技/lili data-n娱乐娱乐/li/ul/navsection classcontent-part styleheight:600px; data-n热点热点新闻/sectionsection classcontent-part styleheight:545px; data-n体育体育栏目/sectionsection classcontent-part styleheight:467px; data-n财经财经栏目/sectionsection classcontent-part styleheight:393px; data-n科技科技栏目/sectionsection classcontent-part styleheight:523px; data-n娱乐娱乐栏目/sectionscript//获取元素节点var list document.getElementById(list);var lis document.querySelectorAll(#list li);var contentParts document.querySelectorAll(.content-part);//在页面加载好之后将所有的content-part盒子的offsetTop值推入数组var offsetTopArr [];for (var i 0; i contentParts.length; i) {offsetTopArr.push(contentParts[i].offsetTop);}offsetTopArr.push(Infinity); //为了方便在窗口卷动时判断楼层在后面推入一个无穷大//点击楼层导航页面自动滚动至对应的楼层list.onclick function (e) {if (e.target.tagName.toLowerCase() li) {//getAttribute表示得到标签身上的某个属性值var n e.target.getAttribute(data-n);//可以用属性选择器方括号选择器来寻找带有相同data-n的content-partvar contentPart document.querySelector(.content-part[data-n n ]);//让页面卷动成为这个盒子的offsetTop值document.documentElement.scrollTop contentPart.offsetTop;//遍历offsetTopArr数组看看当前的scrollTop的值在哪两个offsetTop之间说明在哪两个楼层之间for (var i 0; i offsetTopArr.length; i) {if (offsetTopArr[i] contentPart.offsetTop) {//改变楼层导航的底色为紫色changeLisCur(i);break;}}}};// 窗口的卷动window.onscroll function () {var scrollTop Math.ceil(document.documentElement.scrollTop); // 向上取整规避滚动时出现的小数误差//遍历offsetTopArr数组看看当前的scrollTop的值在哪两个offsetTop之间说明在哪两个楼层之间for (var i 0; i offsetTopArr.length; i) {if (scrollTop offsetTopArr[i] scrollTop offsetTopArr[i 1]) {//改变楼层导航的底色为紫色changeLisCur(i);break;}}}// 当前所在楼层var nowfloor -1;//改变li的curfunction changeLisCur(i) {if (nowfloor ! i) {//让全局变量改变为这个楼层nowfloor i;//设置下标为i的项有currentfor (var j 0; j lis.length; j) {if (j i) {lis[j].className current;} else {lis[j].className ;}}}}/script
/body
/html
