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 >
<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 #{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 = ElementsByTagName("span");
var uls = ElementsByTagName("ul");
var len = spans.length;
for(let i =0; i < len; i++){
spans[i].onmouseover=function(){
// 1）处理上⾯的options
for(let j =0; j < len; j++){
spans[j].className ="";// 本质还是操作属性节点
}
this.className ="on";
this.style.cursor ="pointer";
// 2）处理下⾯的ul
for(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的位置（相对于body）
divX =this.offsetLeft;
divY =this.offsetTop;
// 再获取⿏标的位置（事件对象获取）
mouseX = e.clientX;
mouseY = e.clientY;
}
var disX = e.clientX - mouseX;// ⿏标移动的x距离
var disY = e.clientY - mouseY;// ⿏标移动的y距离
// ⿏标移动的距离和盒⼦移动的距离是⼀样的
box.style.left = disX + divX +"px";
p = disY + divY +"px"
}
}
</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>
var nav = ElementById("nav");
var ot = nav.offsetTop;// 导航条相对于body顶部的距离            scroll=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=""/>
<img data-src="images/v4.jpg"alt=""/>
<a href="">电影4</a>
</li>
html滚动效果代码<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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。