JS07(模拟垂直滚动条、html结构的访问、scroll家族、封装自己的scrollTop left、固定导航栏、两侧跟随的广告、屏幕滑动效果 )
模拟垂直滚动条
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .box { width: 300px; height: 500px; border: 1px solid red; margin:100px; position: relative; } .content { height: auto; padding: 5px 18px 5px 5px; position: absolute; top: 0; left: 0; } .scroll { width: 18px; height: 100%; position: absolute; top: 0; right: 0; background-color: #eee; } .bar { width: 100%; height: 100px; background-color: red; cursor: pointer; border-radius: 10px; position: absolute; top: 0; left: 0; } </style> </head> <body> <div class="box" id="box"> <div class="content"> 文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分 文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分 文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分 文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分 文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分 文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内 文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分 文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分 文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分 </div> <div class="scroll"> <div class="bar"></div> </div> </div> </body> </html> <script> var box = document.getElementById("box"); // 最大的盒子 var content = box.children[0]; // 内容盒子 var scroll = box.children[1]; // 右边盒子 var bar = scroll.children[0]; // 1. 首先先要计算红色滚动条的高度 内容越多，滚动条越短 反之 反之 // 滚动条的长度计算公式: 容器的高度 / 内容的高度 * 容器的高度 // box 是 内容盒子一半 那么红色盒子也要是box盒子的一半 var barHeight = box.offsetHeight / content.offsetHeight * box.offsetHeight; bar.style.height = barHeight + "px"; // 下面开始 拖动 红色盒子 startScroll(bar,content); // 第一次参数 拖动的 第二个参数 内容的盒子 function startScroll(obj,target) { obj.onmousedown = function(event) { // alert(11); var event = event || window.event; var t = event.clientY - this.offsetTop ; // 红色盒子距离 父亲 盒子顶部距离 var that = this; // 把 bar 对象给 that 对象 document.onmousemove = function(event) { var event = event || window.event; var barTop = event.clientY - t ; // 红色移动的距离 //内容盒子要移动距离 // （内容盒子高度 - 大盒子高度） / (大盒子高度 - 红色盒子的高度) * 红色盒子移动的数值 var contentTop = (target.offsetHeight - target.parentNode.offsetHeight) / (target.parentNode.offsetHeight - that.offsetHeight) * barTop; // 内容盒子移动的距离 if(barTop < 0) { barTop = 0; } else if(barTop > target.parentNode.offsetHeight - that.offsetHeight) // 大于 大盒子的高度 - 红色盒子的高度 { barTop = target.parentNode.offsetHeight - that.offsetHeight ; } else { target.style.top = -contentTop + "px"; // 往上走是负值 } that.style.top = barTop + "px"; window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); // 防止拖动滑块的时候， 选中文字 } } document.onmouseup = function() { document.onmousemove = null; } } </script>
html结构的访问
console.log(document.title); // 访问标题标签
console.log(document.head);
console.log(document.body);
console.log(document.documentElement);
scroll家族
window.onscroll = function() {
console.log(11);
var scrollTop = window.pageYOffset || document.documentElement.scrollTop
|| document.body.scrollTop || 0;
// document.title = document.body.scrollTop;
document.title = scrollTop;
console.log(scrollTop);
}
封装自己的scrollTop left
<script> // var json = {left: 10, right: 10} 变异 //json.left json.top function scroll() { if(window.pageYOffset != null) // ie9+ 和其他浏览器 { return { left: window.pageXOffset, top: window.pageYOffset } } else if(document.compatMode == "CSS1Compat") // 声明的了 DTD // 检测是不是怪异模式的浏览器 -- 就是没有 声明<!DOCTYPE html> { return { left: document.documentElement.scrollLeft, top: document.documentElement.scrollTop } } return { // 剩下的肯定是怪异模式的 left: document.body.scrollLeft, top: document.body.scrollTop } } window.onscroll = function() { console.log(scroll().top); } </script>
固定导航栏
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{margin:0;padding:0} img{ vertical-align: top; } .main{ margin:0 auto; width:1000px; margin-top:10px; } .fixed { position: fixed; top: 0; left: 0; } </style> </head> <body> <div class="top" id="top"> <img src="images/top.png" alt=""/> </div> <div class="nav" id="Q-nav"> <img src="images/nav.png" alt=""/> </div> <div class="main"> <img src="images/main.png" alt=""/> </div> </body> </html> <script src="my.js" type="text/javascript"></script> <script> var nav = $("Q-nav"); var navTop = nav.offsetTop; // 得到导航栏距离顶部的距离 168 console.log(navTop); window.onscroll = function() { // console.log(nav.offsetTop); if(scroll().top >= navTop) { //alert("到位置了"); nav.className = "nav fixed"; } else { nav.className = "nav"; } } </script>
两侧跟随的广告
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> img{ position: absolute; left:0; top:50px; } #demo{ width:1000px; margin:0 auto; } </style> <script src="my.js" type="text/javascript"></script> <script> window.onload = function() { var pic = $("pic"); var leader = 0; var target = 0; var timer = null; // 定时器 var top = pic.offsetTop; // 50 window.onscroll = function() { clearInterval(timer); target = scroll().top+ top; // 把最新的 scrolltop 给 target timer = setInterval(function() { leader = leader + (target - leader ) / 10; pic.style.top = leader + 'px'; },30) } } </script> </head> <body> <img src="images/aside.jpg" alt="" id="pic"/> <div id="demo"> <p>天王盖地虎，小鸡炖蘑菇</p> <p>天王盖地虎，小鸡炖蘑菇</p> <p>天王盖地虎，小鸡炖蘑菇</p> <p>天王盖地虎，小鸡炖蘑菇</p> <p>天王盖地虎，小鸡炖蘑菇</p> <p>天王盖地虎，小鸡炖蘑菇</p> <p>天王盖地虎，小鸡炖蘑菇</p> </div> </body> </html>
返回头部的小火箭
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> body { width: 2000px; } .top{ position: fixed; right:50px; bottom:100px; display: none; } </style> <script src="my.js" type="text/javascript"></script> <script> window.onload = function() { var goTop = $("gotop"); window.onscroll = function() { scroll().top > 0 ? show(goTop) : hide(goTop); // 如果大于0 就显示 否则隐藏 leader = scroll().top; // 把 卷去的头部 给 起始位置 console.log(scroll().top); } var leader = 0,target = 0,timer = null; // leader 起始位置 target 目标位置 goTop.onclick = function() { target = 0; // 点击完毕之后 奔向0 去的 不写也可以 timer = setInterval(function() { leader = leader + (target - leader ) / 10; window.scrollTo(0,leader); // 去往页面中的某个位置 if(leader == target) { clearInterval(timer); } },20); } function $(id) {return document.getElementById(id);} function show(obj) { obj.style.display = "block";} function hide(obj) { obj.style.display = "none";} function scroll() { if(window.pageYOffset != null) // ie9+ 和其他浏览器 { return { left: window.pageXOffset, top: window.pageYOffset } } else if(document.compatMode == "CSS1Compat") // 声明的了 DTD // 检测是不是怪异模式的浏览器 -- 就是没有 声明<!DOCTYPE html> { return { left: document.documentElement.scrollLeft, top: document.documentElement.scrollTop } } return { // 剩下的肯定是怪异模式的 left: document.body.scrollLeft, top: document.body.scrollTop } } } </script> </head> <body> <div id="gotop" class="top"> <img src="images/Top.jpg" alt=""/> </div> <p>我是内容部分，有很多恩多很多</p> <p>我是内容部分，有很多恩多很多</p> <p>我是内容部分，有很多恩多很多</p> <p>我是内容部分，有很多恩多很多</p> <p>我是内容部分，有很多恩多很多</p> <p>我是内容部分，有很多恩多很多</p> <p>我是内容部分，有很多恩多很多</p> <p>我是内容部分，有很多恩多很多</p> <p>我是内容部分，有很多恩多很多</p> <p>我是内容部分，有很多恩多很多</p> </body> </html>
屏幕滑动效果
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> ul,ol { list-style-type: none; } * {margin:0;padding:0;} html,body { width: 100%; height: 100%; } #ul { width: 100%; height: 100%; } ul li{ width: 100%; height: 100%; } #ol { position: fixed; top:0; left:50px; } #ol li { width: 50px; height: 50px; border: 1px solid #000; } </style> <script src="my.js" type="text/javascript"></script> <script> window.onload = function() { var ulBox = $("ul"); var ulBoxLi = ulBox.children; var olBox = $("ol"); var olBoxLi = olBox.children; var bgColor = ["pink","purple","orange","blue","green"]; var leader = 0,target = 0,timer = null; for(var i= 0; i<ulBoxLi.length; i++) { ulBoxLi[i].style.backgroundColor = bgColor[i]; olBoxLi[i].style.backgroundColor = bgColor[i]; olBoxLi[i].index = i; // 记录当前的索引号 olBoxLi[i].onclick = function() { clearInterval(timer); target = ulBoxLi[this.index].offsetTop; // 核心语句 timer = setInterval(function() { leader = leader + (target - leader ) /10; window.scrollTo(0,leader); // 屏幕滑动 //pic.style.left = leader + 'px'; },30) } } } </script> </head> <body> <ul id="ul"> <li>首页</li> <li>关注</li> <li>动态</li> <li>风格</li> <li>作品</li> </ul> <ol id="ol"> <li>首页</li> <li>关注</li> <li>动态</li> <li>风格</li> <li>作品</li> </ol> </body> </html>
