爱站程序员基地JS小案例总结
- JS小案例总结
- 案例一：JS实现tab选项卡功能
- 案例二：JS实现盒子拖拽功能
- 案例三：JS实现导航条吸顶效果
- 案例四：JS实现图片懒加载结构
- 案例五：JS实现简易弹幕功能
- 案例六：JS实现自动滚动新闻列表
JS小案例总结
案例一：JS实现tab选项卡功能
描述：纯原生js实现选项卡切换的效果,即当鼠标移入某个选项卡区域时,显示不同的内容。
HTML代码如下：
<body><div id=\"tabs\"><div id=\"options\"><span class=\"on\">公告</span><span>规则</span><span>论坛</span><span>安全</span><span>公益</span></div><div id=\"contents\"><ul style=\"display: block\"><li><a href=\"\">阿里苏宁发布\"新三体\"战略 打造未来十年格局</a></li><li><a href=\"\">高诚信会员无条件信任 200余万广告商品被处罚</a></li></ul><ul><li><a href=\"\">出售假冒商品规则变更 商品发布数量限制变更</a></li><li><a href=\"\">中国质造市场管理规范变更 淘宝网营销规则变更</a></li></ul><ul><li><a href=\"\">淘宝招募卖家志愿者 阿里推出兼职神器</a></li><li><a href=\"\">700家热风淘宝路 是赚钱还是骗子</a></li></ul><ul><li><a href=\"\">淘宝用户必备神器 卖家账户安全9守则</a></li><li><a href=\"\">支付宝实名认证信息 账户没钱也被骗？</a></li></ul><ul><li><a href=\"\">阿里联合公益计划启动 一图看懂联合公益计划</a></li><li><a href=\"\">公益宝贝卖家发票索取 公益机构淘宝开店攻略</a></li></ul></div></div></body>
CSS代码如下：
<style>body{ background-color: #eee; font-size: 12px;}#tabs{ width: 300px; margin: 100px auto; background: #fff; }#tabs #options{ height: 30px; line-height: 30px }#tabs #options span { width: 60px; text-align: center; display: inline-block; }#tabs #options span.on { border-bottom: 2px solid orange; font-weight: bold; }#tabs #contents{ padding: 10px 0; }#tabs #contents li{ line-height: 20px; padding-left: 15px; }#tabs #contents ul{ display: none }</style>
JS代码如下：
<script>var spans = document.getElementsByTagName(\"span\");var uls = document.getElementsByTagName(\"ul\");var len = spans.length;for (let i = 0; i < len; i++) {spans[i].onmouseover = function () {// 1）处理上面的optionsfor (let j = 0; j < len; j++) {spans[j].className = \"\"; // 本质还是操作属性节点}this.className = \"on\";this.style.cursor = \"pointer\";// 2）处理下面的ulfor (let j = 0; j < len; j++) {uls[j].style.display = \"none\";}uls[i].style.display = \"block\";}}</script>
案例二：JS实现盒子拖拽功能
描述：鼠标按下并移动，盒子跟着鼠标移动，鼠标离开盒子停止。
HTML代码如下：
<body><div class=\"box\">带我走</div></body>
CSS代码如下：
<style>.box{ width: 200px; height: 200px; background-color: pink; position: absolute; top: 0;left: 0; color:#000;}</style>
JS代码如下：
<script>var box = document.querySelector(\".box\");var divX = 0; // div的x坐标var divY = 0; // div的y坐标var mouseX = 0; // 鼠标的x坐标var mouseY = 0; // 鼠标的y坐标box.onmousedown = function (e) { // 鼠标按下事件// 先获取box的位置（相对于body）divX = this.offsetLeft;divY = this.offsetTop;// 再获取鼠标的位置（事件对象获取）mouseX = e.clientX;mouseY = e.clientY;}box.onmousemove = function(e){ // 鼠标移动事件var disX = e.clientX - mouseX; // 鼠标移动的x距离var disY = e.clientY - mouseY;// 鼠标移动的y距离// 鼠标移动的距离和盒子移动的距离是一样的box.style.left = disX + divX + \"px\";box.style.top = disY + divY + \"px\"}box.onmouseup = function (e) { // 鼠标抬起事件}</script>-->
案例三：JS实现导航条吸顶效果
描述：当滚动滚动条使导航条到达顶部时，固定导航条的位置在顶部，再向上滚动时，导航条向下。
HTML代码如下：
<body><p>内容填充</p><p>内容填充</p><p>内容填充</p><p>内容填充</p><p>内容填充</p><p>内容填充</p><p>内容填充</p><p>内容填充</p><p>内容填充</p><div id=\"nav\">导航条</div><p>内容填充</p><p>内容填充</p><p>内容填充</p><p>内容填充</p><p>内容填充</p><p>内容填充</p><p>内容填充</p><p>内容填充</p><p>内容填充</p><p>内容填充</p><p>内容填充</p><p>内容填充</p><p>内容填充</p><p>内容填充</p><p>内容填充</p><p>内容填充</p><p>内容填充</p><p>内容填充</p><p>内容填充</p><p>内容填充</p><p>内容填充</p><p>内容填充</p><p>内容填充</p><p>内容填充</p><p>内容填充</p><p>内容填充</p><p>内容填充</p><p>内容填充</p><p>内容填充</p><p>内容填充</p><p>内容填充</p><p>内容填充</p><p>内容填充</p>
CSS代码如下：
<style type=\"text/css\">#nav {background: pink;<p>内容填充</p>height: 40px;line-height: 40px;width:100%;}h1 {height: 100px;}.fixed {position: fixed;top: 0px;width: 100%;}</style>
JS代码如下：
<script>window.onload = function () {var nav = document.getElementById(\"nav\");var ot = nav.offsetTop; // 导航条相对于body顶部的距离window.onscroll = function () {var t = document.documentElement.scrollTop;// console.log(\"t--->\",t)// console.log(\"ot--->\",ot)if (t >= ot){nav.className = \"fixed\"}else{nav.className = \"\";}}}</script>
案例四：JS实现图片懒加载结构
描述：当滚动到图片顶部的一部分时开始加载图片。
HTML代码如下:
<body><div class=\"wrapper\"><h2>图片延迟加载</h2><div class=\"box\"><h1>内容填充</h1></div><ul><li><img data-src=\"images/v1.jpg\" alt=\"\" /><a href=\"\">电影1</a></li><li><img data-src=\"images/v2.jpg\" alt=\"\" /><a href=\"\">电影2</a></li><li><img data-src=\"images/v3.jpg\" alt=\"\" /><a href=\"\">电影3</a></li><li><img data-src=\"images/v4.jpg\" alt=\"\" /><a href=\"\">电影4</a></li><li><img data-src=\"images/v5.jpg\" alt=\"\" /><a href=\"\">电影5</a></li></ul><div class=\"box\"><h1>内容填充</h1></div><ul><li><img data-src=\"images/v6.jpg\" alt=\"\" /><a href=\"\">电影6</a></li><li><img data-src=\"images/v7.jpg\" alt=\"\" /><a href=\"\">电影7</a></li><li><img data-src=\"images/v8.jpg\" alt=\"\" /><a href=\"\">电影8</a></li><li><img data-src=\"images/v9.jpg\" alt=\"\" /><a href=\"\">电影9</a></li><li><img data-src=\"images/v10.jpg\" alt=\"\" /><a href=\"\">电影10</a></li></ul><div class=\"box\"><h1>内容填充</h1></div><ul><li><img data-src=\"images/v11.jpg\" alt=\"\" /><a href=\"\">电影11</a></li><li><img data-src=\"images/v12.jpg\" alt=\"\" /><a href=\"\">电影12</a></li><li><img data-src=\"images/v13.jpg\" alt=\"\" /><a href=\"\">电影13</a></li><li><img data-src=\"images/v14.jpg\" alt=\"\" /><a href=\"\">电影14</a></li><li><img data-src=\"images/v15.jpg\" alt=\"\" /><a href=\"\">电影15</a></li></ul><div class=\"box\"><h1>内容填充</h1></div></div></body>
CSS代码如下：
<style type=\"text/css\">* {margin:0; padding:0;}ul {list-style:none;}.wrapper {width:1000px; margin:100px auto 0;}.wrapper h2 {background:#ccc; height:40px; line-height:40px; text-align:center;}.box {border:1px solid #ccc; height:550px; margin:10px 0;}.wrapper ul {overflow:hidden; border:1px solid #ccc; padding:15px 0;}.wrapper li {float:left; width:199px;text-align:center;}.wrapper li a {display:block;}</style>
JS代码如下：
<script>window.onload = function () {var imgs = document.getElementsByTagName(\"img\");// scroll事件的事件源可以是window也可以是documentdocument.onscroll = function () {// 获取卷去的高度var st = document.documentElement.scrollTop;// 获取一屏的高度var ch = document.documentElement.clientHeight;for (let i = 0; i < imgs.length; i++) {var ot = imgs[i].offsetTop;if (st + ch >= ot+100){// img元素冒出来了imgs[i].src = imgs[i].getAttribute(\"data-src\")}}}}</script>
案例五：JS实现简易弹幕功能
描述：在输入框输入内容，实现弹幕功能。
HTML代码如下:
<body><input type=\"text\" id=\"words\" /><input type=\"button\" value=\"走你\" id=\"btn\" /></body>
CSS代码如下：
<style>.newList{height: 100px;overflow: hidden;background-color: #ccc;position: relative;}</style>
JS代码如下：
<script>var btn = document.getElementById(\"btn\");btn.onclick = function () {var words = document.getElementById(\"words\").value;var span = document.createElement(\"span\");span.innerHTML = words;document.getElementById(\"words\").value = \"\"; // 清空之前的内容span.style.position = \"absolute\";span.style.left = \"600px\";span.style.top = Math.floor(document.documentElement.clientHeight * Math.random()) + \"px\";document.body.appendChild(span);// 让span动起来timer = setInterval(function () {span.style.left = parseInt(span.style.left) - 4 + \"px\";// 当span离开了浏览器，需要清空定时器，并销毁spanif(parseInt(span.style.left) < -1*span.offsetWidth){// 删除spandocument.body.removeChild(span)// 清空定时器clearInterval(timer)}},50)}</script>
案例六：JS实现自动滚动新闻列表
描述：让列表实现无缝滚动。
HTML代码如下：
<body><div class=\"newList\" id=\"newList1\"><div class=\"newBody\"><ul><li>一切都是对象</li><li>对象是属性的集合</li><li>对象是由函数创建的</li><li>this无处不在</li><li>this是在调用时才确定</li><li>一切都是对象</li><li>对象是属性的集合</li><li>对象是由函数创建的</li><li>this无处不在</li><li>this是在调用时才确定</li><li>------------------------------------</li></ul></div></div></body>
CSS代码如下：
<style>.newList{height: 100px;overflow: hidden;background-color: #ccc;position: relative;}</style>
JS代码如下：
<script>// 思路：要给ul进行绝对定位，改变ul的top的值，top值越来越小，top是负值// 在定时器中不断改变top的值var newList = document.getElementById(\"newList1\");var ul = newList.getElementsByTagName(\"ul\")[0];var ulHeight = ul.offsetHeight; // ul的height+padding+border 说白了得到了ul的高度ul.style.position = \"absolute\";ul.style.top = \"0\";// 无缝滚动ul.innerHTML += ul.innerHTML; // 把新闻列表中的li复制一份 添加后ul中function go(){console.log(Math.abs(parseInt(ul.style.top)))let top = Math.abs(parseInt(ul.style.top));if (top >= ulHeight){ // 整个新闻列表向上滚动的距离 大于等于 新闻列表的高度ul.style.top = \"0\"; // 立即把top致成0 肉眼看不出来}else {ul.style.top = parseInt(ul.style.top) - 2 + \"px\";}}setInterval(go,50)</script>
以上都是一些基础案例，入门练手！
