前端html-部件模板收集（附源码）
2024-04-16 03:43:19
目录
1.下拉列表
1.1 简单下拉菜单
1.2 输入框的下拉列表
1.2 响应式 JavaScript 侧边栏下拉菜单 可折叠隐藏
2.定位导航
3.选项卡切换
3.1 简单选项卡切换-自动
3.2 简单选项卡切换+延时
4.轮播图
4.1 渐变轮播
4.2 滚动轮播（走马）
4.2.3 简单展示框
4.3 滑动轮播（走马）
5.页面布局
5.1 瀑布流布局
1.下拉列表
1.1 简单下拉菜单
效果图：
说明：使用css中的hover属性就可以实现，关键代码在
.downorder:hover a{
display: block;/*鼠标移入菜单盒子时显示a标签内容*/
}
.downtext a {
display: none;/*隐藏a标签内容*/
}
源码：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>简单下拉菜单</title><style type="text/css">.downorder {width: 100px;height: auto;position: relative;}.downorder:hover a{display: block;/*鼠标移入菜单显示a标签内容*/}.order {position: relative;text-align: center;display: inline-block;font-size: 16px;padding: 15px;background-color: dodgerblue;}.order:hover {background-color: aqua;color: #FFFF00;}.downtext {position: relative;text-align: center;display: inline-block;font-size: 16px;background-color: #7FFF00;}.downtext a {display: none;/*隐藏a标签内容*/text-decoration: none;color: red;padding: 15px;}.downtext a:hover {background-color: aqua;color: #FFFF00;}</style></head><body><div class="downorder"><button class="order">下拉菜单</button><div class="downtext"><a href="javascript:;">内容1</a><a href="javascript:;">内容2</a><a href="javascript:;">内容3</a><a href="javascript:;">内容4</a></div></div></body>
</html>
1.2 输入框的下拉列表
效果图：
说明：用datalist标签就可以实现，
源码：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>数据列表</title></head><body><form action="" method="get"><label for="item">选择你想要的内容：</label><input type="text" list="items" name="item" id="item"/><datalist id="items"><option value="会玩手机的猫"></option><option value="最爱鱼的!猫"></option><option value="来自星星的猫"></option><option value="天猫国际会玩猫"></option><option value="咪了个猫"></option></datalist><input type="submit" value="提交"/></form></body>
</html>
1.2 响应式 JavaScript 侧边栏下拉菜单 可折叠隐藏
这是一款基于纯JavaScript实现的侧边栏菜单，因为整个菜单并没有使用jQuery等第三方插件，因此菜单比较轻量级的。这款JS侧边栏菜单的特点是点击按钮可以展开和隐藏，并且在隐藏时自动显示提示文字，展开后又隐藏提示文字，很好地做到了自适应效果。
效果：
HTML代码
非常简单，用一个<ul>元素构建了一个景点列表，同时用二级标题显示城市名称。
<div id="menu"><!--隐藏菜单--><div id="ensconce"><h2><img src="data:images/show.png" alt="">国内各地景点</h2></div><!--显示菜单--><div id="open"><div class="navH">国内各地景点<span><img class="obscure" src="data:images/obscure.png" alt=""></span></div><div class="navBox"><ul><li><h2 class="obtain">北京景点<i></i></h2><div class="secondary"><h3>故宫</h3><h3>十三陵</h3><h3>圆明园</h3><h3>长城</h3><h3>雍和宫</h3><h3>天坛公园</h3></div></li><li><h2 class="obtain">南京景点<i></i></h2><div class="secondary"><h3>栖霞寺</h3><h3>夫子庙</h3><h3>海底世界</h3><h3>中山陵</h3><h3>乌衣巷</h3><h3>音乐台</h3></div></li><li><h2 class="obtain">上海景点<i></i></h2><div class="secondary"><h3>东方明珠</h3><h3>外滩</h3><h3>豫园</h3><h3>文庙</h3><h3>世博园</h3><h3>田子坊</h3></div></li><li><h2 class="obtain">深圳景点<i></i></h2><div class="secondary"><h3>华侨城</h3><h3>观澜湖</h3><h3>世界之窗</h3><h3>东门老街</h3><h3>七娘山</h3><h3>光明农场</h3></div></li><li><h2 class="obtain">广州景点<i></i></h2><div class="secondary"><h3>白云山</h3><h3>长隆</h3><h3>黄花岗公园</h3><h3>中山纪念堂</h3><h3>华南植物园</h3><h3>南沙湿地公园</h3></div></li></ul></div></div>
</div>CSS代码
CSS代码也并不复杂，主要渲染了鼠标滑过菜单项时的背景颜色渐变动画，同时定义了菜单展开时的折叠动画效果。
#menu {overflow: hidden;height: 100%;float: left;-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;
}
#menu #ensconce {/*éšè—èœå•æ ·å¼*/width: 0.35rem;height: 100%;background-color: #20343c;float: left;text-align: center;position: relative;display: none;
}
#menu #ensconce h2 {cursor: pointer;color: #fff;font-size: 0.24rem;line-height: 0.5rem;width: 100%;position: absolute;top: 35%;-webkit-transform: translate(-50%, -50%);-moz-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);-o-transform: translate(-50%, -50%);transform: translate(0%, -50%);
}
#menu #ensconce h2 img {width: 52%;
}
#menu #open {/*显示èœå•æ ·å¼*/width: 2.6rem;height: 100%;background-color: #363a45;padding-bottom: 0.1rem;box-sizing: border-box;-webkit-transition: all 0.8s ease;-moz-transition: all 0.8s ease;-o-transition: all 0.8s ease;-ms-transition: all 0.8s ease;
}
#menu #open .navH {height: 0.6rem;background-color: #44495a;line-height: 0.6rem;text-align: center;font-size: 0.2rem;color: #fff;position: relative;box-sizing: border-box;
}
#menu #open .navH span {position: absolute;top: 49%;right: 0;padding: 0 0.15rem;cursor: pointer;-webkit-transform: translate(0, -50%);-moz-transform: translate(0, -50%);-ms-transform: translate(0, -50%);-o-transform: translate(0, -50%);transform: translate(0, -50%);display: inline-block;
}
#menu #open .navH span .obscure {width: 0.24rem;
}
#menu #open .navBox {height: 100%;overflow-y: auto;padding-left: 0.05rem;padding-right: 0.07rem;margin-top: 0.1rem;
}
#menu #open .navBox ul li {background-color: #393c4a;cursor: pointer;margin-bottom: 4px;
}
#menu #open .navBox ul li .obtain {background-color: #3889D4;
}
#menu #open .navBox ul li .obtain:hover {background-color: #3D8332;
}
#menu #open .navBox ul li h2 {position: relative;width: 100%;height: 100%;text-align: center;color: #fff;font-size: 0.15rem;padding: 0.15rem 0;-webkit-transition: all 0.6s ease;-moz-transition: all 0.6s ease;-o-transition: all 0.6s ease;-ms-transition: all 0.6s ease;
}
#menu #open .navBox ul li h2 i {position: absolute;top: 50%;right: 0.15rem;border-top: 0.07rem transparent dashed;border-left: 0.07rem solid #fff;border-right: 0.07rem transparent dashed;border-bottom: 0.07rem transparent dashed;display: inline-block;-webkit-transition: -webkit-transform 0.6s ease;-moz-transition: -moz-transform 0.6s ease;-o-transition: -o-transform 0.6s ease;-ms-transition: -ms-transform 0.6s ease;transform-origin: 4px 3px;-webkit-transform: translate(0, -50%);-moz-transform: translate(0, -50%);-ms-transform: translate(0, -50%);-o-transform: translate(0, -50%);transform: translate(0, -50%);
}
#menu #open .navBox ul li h2 .arrowRot {-webkit-transform: rotate(90deg);-moz-transform: rotate(90deg);-o-transform: rotate(90deg);-ms-transform: rotate(90deg);transform: rotate(90deg);
}
#menu #open .navBox ul li .secondary {overflow: hidden;height: 0;-webkit-transition: all 0.6s ease;-moz-transition: all 0.6s ease;-o-transition: all 0.6s ease;-ms-transition: all 0.6s ease;
}
#menu #open .navBox ul li .secondary h3 {padding: 0.1rem 0;text-align: center;font-size: 0.13rem;background-color: #282c3a;color: #ffffff;border-bottom: 0.8px solid #42495d;-webkit-transition: all 0.4s ease;-moz-transition: all 0.4s ease;-o-transition: all 0.4s ease;-ms-transition: all 0.4s ease;
}
#menu #open .navBox ul li .secondary h3:hover {background-color: #1acbfc;
}
#menu #open .navBox ul li .secondary .seconFocus {background-color: #1acbfc;-webkit-box-shadow: 3px 3px 3px #aa8c51;-moz-box-shadow: 3px 3px 3px #aa8c51;box-shadow: 3px 3px 3px #aa8c51;
}JavaScript代码
JS代码主要解决了点击菜单项时展开或者折叠的逻辑，这些动画效果也是通过JS切换CSS类来实现的。
同时，还可以通过切换实现侧边栏菜单显示和隐藏。
window.onload = function () {var flag = true;var liC = document.querySelectorAll(".navBox li h2");// 主导航nav点击事件for (var i = 0; i < liC.length; i++) {liC[i].onclick = function () {if (flag) {// 节流阀flag = false;setTimeout(function () {flag = true;}, 500)// 自点if (this.className === "obFocus") {this.querySelector("i").classList.remove("arrowRot");getNext(this).style.height = "0";this.classList.add("obtain");this.classList.remove("obFocus");return}var sec = getNext(this);var sib = siblings(sec.parentNode);var otherArr = [];var arrowClass = [];// 排他 secondary arrowRot obFocusfor (var j = 0; j < sib.length; j++) {var sibSec = sib[j].getElementsByTagName('*');for (var i = 0; i < sibSec.length; i++) {if (sibSec[i].className == "secondary") {otherArr.push(sibSec[i])}if (sibSec[i].className == "arrowRot") {arrowClass.push(sibSec[i])}if (sibSec[i].className == "obFocus") {sibSec[i].classList.remove("obFocus");sibSec[i].classList.add("obtain");}}}for (var i = 0; i < otherArr.length; i++) {otherArr[i].style.height = "0";}if (arrowClass[0]) {arrowClass[0].classList.remove("arrowRot");}// 留自己sec.style.height = 2.5078 + "rem";this.getElementsByTagName("i")[0].classList.add("arrowRot");this.classList.remove("obtain");this.classList.add("obFocus");}}}// 子导航点击事件var seconC = document.querySelectorAll(".secondary h3")for (var i = 0; i < seconC.length; i++) {seconC[i].onclick = function () {for (var i = 0; i < seconC.length; i++) {seconC[i].classList.remove("seconFocus");}this.classList.add("seconFocus");}}// 隐藏菜单var obscure = document.querySelector(".navH span");var open = document.querySelector("#open");var ensconce = document.querySelector("#ensconce");obscure.onclick = function () {open.style.marginLeft = "-300px";setTimeout(function () {ensconce.style.display = "block";}, 350)}//显示菜单var showC = document.querySelector("#ensconce h2");showC.onclick = function () {open.style.marginLeft = "0px";setTimeout(function () {ensconce.style.display = "none";}, 100)}
}function getByClass(clsName, parent) {var oParent = parent ? document.getElementById(parent) : document,boxArr = new Array(),oElements = oParent.getElementsByTagName('*');for (var i = 0; i < oElements.length; i++) {if (oElements[i].className == clsName) {boxArr.push(oElements[i]);}}return boxArr;
}
// 获取下一个兄弟元素
function getNext(node) {if (!node.nextSibling) return null;var nextNode = node.nextSibling;if (nextNode.nodeType == 1) {return nextNode;}return getNext(node.nextSibling);
}// 获取除了自己以外的其他亲兄弟元素
function siblings(elem) {var r = [];var n = elem.parentNode.firstChild;for (; n; n = n.nextSibling) {if (n.nodeType === 1 && n !== elem) {r.push(n);}}return r;
}到这里整个侧边栏下拉菜单就完成了，
这是一款比较实用的JS侧边栏菜单插件，外观简易大方，使用起来也十分方便。
最后留给大家一个思考：如果实现三级下拉，或者无限极下拉（当然这种情况不常见），那么该如何改造呢？
然后这个项目转载于响应式 JavaScript 侧边栏下拉菜单 可折叠隐藏
2.定位导航
效果图：
说明：使用js很容易实现，
源码：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>网页定位导航效果</title><style type="text/css">* {margin: 0;padding: 0;}body {font-size: 12px;line-height: 1.7;}li {list-style: none;}#content {width: 800px;margin: 0 auto;padding: 20px;}#content h1 {color: #0088BB;}#content .item {padding: 20px;margin-bottom: 20px;border: 1px dotted #0088BB;}#content .item h2 {font-size: 12px;font-weight: bold;border-bottom: 2px solid #00FFFF;margin-bottom: 10px;}#content .item li {display: inline;margin-left: 10px;}#content .item li a img {width: 230px;height: 230px;border: none;}#menu {position: fixed;top: 100xp;left: 50%;margin-left: 400px;width: 80px;}#menu ul li a {display: block;margin: 5px 0;font-size: 14px;font-weight: bold;color: #333;width: 80px;height: 50px;line-height: 50px;text-align: center;text-decoration: none;}#menu ul a:hover {color: #fff;background-color: aqua;}#menu ul li .current {color: #fff;background-color: aqua;}</style></head><body><div id="menu"><ul><li><a href="#item1" class="current">A区域</a></li><li><a href="#item2">B区域</a></li><li><a href="#item3">C区域</a></li><li><a href="#item4">D区域</a></li><li><a href="#item5">E区域</a></li></ul></div><div id="content"><h1>网页区域分布</h1><div id="item1" class="item"><h2>A区域</h2><ul><li><a href="#"><img src="../img/rotation/1.jpg"/></a></li><li><a href="#"><img src="../img/rotation/1.jpg"/></a></li><li><a href="#"><img src="../img/rotation/1.jpg"/></a></li><li><a href="#"><img src="../img/rotation/1.jpg"/></a></li><li><a href="#"><img src="../img/rotation/1.jpg"/></a></li><li><a href="#"><img src="../img/rotation/1.jpg"/></a></li><li><a href="#"><img src="../img/rotation/1.jpg"/></a></li><li><a href="#"><img src="../img/rotation/1.jpg"/></a></li><li><a href="#"><img src="../img/rotation/1.jpg"/></a></li></ul></div><div id="item2" class="item"><h2>B区域</h2><ul><li><a href="#"><img src="../img/rotation/2.jpg"/></a></li><li><a href="#"><img src="../img/rotation/2.jpg"/></a></li><li><a href="#"><img src="../img/rotation/2.jpg"/></a></li><li><a href="#"><img src="../img/rotation/2.jpg"/></a></li><li><a href="#"><img src="../img/rotation/2.jpg"/></a></li><li><a href="#"><img src="../img/rotation/2.jpg"/></a></li><li><a href="#"><img src="../img/rotation/2.jpg"/></a></li><li><a href="#"><img src="../img/rotation/2.jpg"/></a></li><li><a href="#"><img src="../img/rotation/2.jpg"/></a></li></ul></div><div id="item3" class="item"><h2>C区域</h2><ul><li><a href="#"><img src="../img/rotation/3.jpg"/></a></li><li><a href="#"><img src="../img/rotation/3.jpg"/></a></li><li><a href="#"><img src="../img/rotation/3.jpg"/></a></li><li><a href="#"><img src="../img/rotation/3.jpg"/></a></li><li><a href="#"><img src="../img/rotation/3.jpg"/></a></li><li><a href="#"><img src="../img/rotation/3.jpg"/></a></li><li><a href="#"><img src="../img/rotation/3.jpg"/></a></li><li><a href="#"><img src="../img/rotation/3.jpg"/></a></li><li><a href="#"><img src="../img/rotation/3.jpg"/></a></li></ul></div><div id="item4" class="item"><h2>D区域</h2><ul><li><a href="#"><img src="../img/rotation/4.png"/></a></li><li><a href="#"><img src="../img/rotation/4.png"/></a></li><li><a href="#"><img src="../img/rotation/4.png"/></a></li><li><a href="#"><img src="../img/rotation/4.png"/></a></li><li><a href="#"><img src="../img/rotation/4.png"/></a></li><li><a href="#"><img src="../img/rotation/4.png"/></a></li><li><a href="#"><img src="../img/rotation/4.png"/></a></li><li><a href="#"><img src="../img/rotation/4.png"/></a></li><li><a href="#"><img src="../img/rotation/4.png"/></a></li></ul></div><div id="item5" class="item"><h2>E区域</h2><ul><li><a href="#"><img src="../img/rotation/5.jpg"/></a></li><li><a href="#"><img src="../img/rotation/5.jpg"/></a></li><li><a href="#"><img src="../img/rotation/5.jpg"/></a></li><li><a href="#"><img src="../img/rotation/5.jpg"/></a></li><li><a href="#"><img src="../img/rotation/5.jpg"/></a></li><li><a href="#"><img src="../img/rotation/5.jpg"/></a></li><li><a href="#"><img src="../img/rotation/5.jpg"/></a></li><li><a href="#"><img src="../img/rotation/5.jpg"/></a></li><li><a href="#"><img src="../img/rotation/5.jpg"/></a></li></ul></div></div></body><script src="../js/jquery-1.8.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">window.onload = function(){window.onscroll = function(){var top = document.documentElement.scrollTop || document.body.scrollTop;var menus = document.getElementById("menu").getElementsByTagName("a");var items = document.getElementById("content").getElementsByClassName("item");var currentId = "";for (var i=0;i<items.length;i++) {var _item = items[i];var _itemTop = _item.offsetTop;if (top>_itemTop-200) {currentId = _item.id;} else{break;}if (currentId!="") {//给正确的menu下的a元素class赋值for (var j=0;j<menus.length;j++) {var _menu =menus[j];//因为只通过href获取的链接为一长串链接，需要通过#分成数组var _href = _menu.href.split("#");if (_href[_href.length-1]!=currentId) {_menu.className = "";} else{_menu.className = "current";}}}}}}</script>
</html>
3.选项卡切换
应用场景：用于功能页面切换，而主页面无变化
3.1 简单选项卡切换-自动
效果图：
说明：基于js实现，
源码：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>简单选项卡切换+自动</title><style type="text/css">* {margin: 0;padding: 0;font-size: 12px;font-family: "微软雅黑";color: #3c3c3c;text-decoration: none;list-style-type:none;}#tab_list {width: 275px;height: 190px;margin: 30px auto;}#list {height: 32px;border-bottom: 2px solid aqua;}#list li {display: inline-block;width: 60px;border-bottom: 1px solid aquamarine;}#list .active {border-top: 2px solid #0000FF;border-bottom: 2px solid aquamarine;}#tab_list div {border: 1px solid #FF5000;border-top: none;}#tab_list div li {height: 30px;line-height: 30px;text-indent: 8px;}#tab_list .show {display: block;}#tab_list .hidden {display: none;}</style></head><body><div id="tab_list"><ul id="list"><li class="active">选项一</li><li>选项二</li><li>选项三</li></ul><div class="show"><ul><li><a href="javascript:;">选项一内容-1</a></li><li><a href="javascript:;">选项一内容-2</a></li><li><a href="javascript:;">选项一内容-3</a></li><li><a href="javascript:;">选项一内容-4</a></li></ul></div><div class="hidden"><ul><li><a href="javascript:;">选项二内容-1</a></li><li><a href="javascript:;">选项二内容-2</a></li><li><a href="javascript:;">选项二内容-3</a></li><li><a href="javascript:;">选项二内容-4</a></li></ul></div><div class="hidden"><ul><li><a href="javascript:;">选项三内容-1</a></li><li><a href="javascript:;">选项三内容-2</a></li><li><a href="javascript:;">选项三内容-3</a></li><li><a href="javascript:;">选项三内容-4</a></li></ul></div></div></body><script type="text/javascript">window.onload = function() {var tab = document.getElementById("tab_list");var list = document.getElementById("list").getElementsByTagName("li");var div = document.getElementById("tab_list").getElementsByTagName("div");var timer = null;var index = 0;for (var i=0; i<list.length; i++) {list[i].num = i;list[i].onmouseover = function () {Change(this.num);}}function Change(curIndex) {for (var i=0; i<list.length; i++) {list[i].className = "";div[i].className = "hidden";}list[curIndex].className = "active";div[curIndex].className = "show";index = curIndex;}//自动播放function autoPlay() {timer = setInterval(function () {index++;if (index > list.length-1) {index = 0;}Change(index);},2000);}autoPlay();tab.onmouseover = function () {clearInterval(timer);}tab.onmouseout = function () {autoPlay();}}</script>
</html>
3.2 简单选项卡切换+延时
效果图：
说明：基于js实现，
源码：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>简单选项卡切换+延时</title></head><style type="text/css">* {margin: 0;padding: 0;font:normal 12px "微软雅黑";color: #3C3C3C;}ul {list-style-type: none;}a {text-decoration: none;}#tab_list {width: 275px;height: 190px;margin: 20px auto;}#ul1 {border-bottom: 2px solid aqua;height: 32px;}#ul1 li {display: inline-block;width: 60px;line-height: 30px;text-align: center;border: 1px solid aquamarine;border-bottom: none;margin-left: 5px;}#ul1 li:hover {cursor: pointer;}#ul1 li.active {border-top: 2px solid #1E90FF;border-bottom: 2px solid #fff;}#tab_list div {border: 1px solid #FF5000;border-top: none;}#tab_list div li {height: 30px;line-height: 30px;text-indent: 8px;}.show {display: block;}.hidden {display: none;}</style><body><div id="tab_list"><ul id="ul1"><li class="active">选项一</li><li>选项二</li><li>选项三</li></ul><div class="show"><ul><li><a href="javascript:;">选项一内容-1</a></li><li><a href="javascript:;">选项一内容-2</a></li><li><a href="javascript:;">选项一内容-3</a></li><li><a href="javascript:;">选项一内容-4</a></li></ul></div><div class="hidden"><ul><li><a href="javascript:;">选项二内容-1</a></li><li><a href="javascript:;">选项二内容-2</a></li><li><a href="javascript:;">选项二内容-3</a></li><li><a href="javascript:;">选项二内容-4</a></li></ul></div><div class="hidden"><ul><li><a href="javascript:;">选项三内容-1</a></li><li><a href="javascript:;">选项三内容-2</a></li><li><a href="javascript:;">选项三内容-3</a></li><li><a href="javascript:;">选项三内容-4</a></li></ul></div></div></body><script type="text/javascript">window.onload = function() {var ul1 = document.getElementById("ul1");var aLi = ul1.getElementsByTagName("li");var oDiv = document.getElementById("tab_list");var aDiv = oDiv.getElementsByTagName("div");var timer = null;for (var i=0; i<aLi.length; i++) {aLi[i].id = i;aLi[i].onmouseover = function () {var _this = this;//用_this这个变量来引用当前滑过的li/*如果存在准备执行的定时器，立即清除，只能当前停留时间大于500ms时* *才开始执行（指鼠标快速滑过一个的那一瞬间要清除掉产生的定时器）*/if (timer) {clearTimeout(timer);timer = null;}//延时半秒执行timer = window.setTimeout(function () {for (var i=0; i<aLi.length; i++) {aLi[i].className = "";aDiv[i].className = "hidden";}/** 之所以不能在这直接引用this是因为setTimeout是window对象，* 用this的话会指向定时器，所以要在前面定义一个变量*/_this.className = "active";aDiv[_this.id].className = "show";},500);}}}</script>
</html>
4.轮播图
4.1 渐变轮播
4.2 滚动轮播（走马）
4.2.3 简单展示框
效果图：
说明：这是最简单的滚动轮播图，只有展示和鼠标悬停的效果，
源码：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>展示框-滚动轮播-测试成功-</title><style type="text/css">* {margin: 0;padding: 0;}.scroll {position: relative;width: 830px;/*展示宽度，展示4个图+3个边框=830*/height: 130px;border: 10px solid #00FFFF;margin: 100px auto;overflow: hidden;}.scroll .munit {position: absolute;top: 0;left: 0;width: 5000px;/*ul能够存下的所有li的li宽*/height: 130px;}.scroll .munit>div {float: left;width: 200px;height: 130px;margin-left: 10px;display: inline;overflow: hidden;}.scroll .munit>div>img {width: 200px;height: 130px;}</style></head><body><div id="scroll" class="scroll"><div id="munit" class="munit"><div><img src="../../img/rotation/1.jpg" alt=""></div><div><img src="../../img/rotation/2.jpg" alt=""></div><div><img src="../../img/rotation/3.jpg" alt=""></div><div><img src="../../img/rotation/4.png" alt=""></div><div><img src="../../img/rotation/5.jpg" alt=""></div><div><img src="../../img/rotation/6.png" alt=""></div><div><img src="../../img/rotation/7.jpg" alt=""></div><div><img src="../../img/rotation/1.jpg" alt=""></div><div><img src="../../img/rotation/2.jpg" alt=""></div><div><img src="../../img/rotation/3.jpg" alt=""></div><div><img src="../../img/rotation/4.png" alt=""></div><div><img src="../../img/rotation/5.jpg" alt=""></div><div><img src="../../img/rotation/6.png" alt=""></div><div><img src="../../img/rotation/7.jpg" alt=""></div></div></div></body><script type="text/javascript">window.onload = function() {myscroll();}function myscroll() {//获取函数var scroll = document.getElementById("scroll");var munit = document.getElementById("munit");var div = munit.children;//进行滚动var nowLeft = 0;//要找到ul元素的折返点var back= -1470;//图和边框的宽度，有七张图，所以折返点是1470//定时器var scrollTimer = setInterval(run,20);//鼠标移上scroll停止scroll.onmouseover = function () {clearInterval(scrollTimer);}//鼠标移开轮播scroll.onmouseout = function () {scrollTimer = setInterval(run,20);}//运动函数function run() {nowLeft -= 2;//判断是否走到了折返点，走到了则瞬间切换到0位置if (nowLeft <= back) {nowLeft = 0;}munit.style.left = nowLeft + "px";}}</script>
</html>
4.3 滑动轮播（走马）
5.页面布局
5.1 瀑布流布局
效果图：
说明：全屏模式下图片的自动填充还没有完善；半屏模式下图片会自动填充，出现页面奔溃现象时多刷新几次，
源码：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>瀑布流布局</title><style type="text/css">* {margin: 0;padding: 0;}#main {/*整体相对定位，因为每个小盒子的位置是通过计算再由绝对定位放置，是需要相对于main盒子*/position: relative;}.box {padding: 15px 0 0 15px;/*后面js获取的高度包括padding的距离*/float: left;}.pic {padding: 10px;border: 1px solid #ccc;border-radius: 5px;box-shadow: 0 0 5px #ccc;}.pic img {width: 165px;height: auto;}</style></head><body><div id="main"><div class="box"><div class="pic"><img src="../img/0.jpg"/></div></div><div class="box"><div class="pic"><img src="../img/1.jpg"/></div></div><div class="box"><div class="pic"><img src="../img/2.jpg"/></div></div><div class="box"><div class="pic"><img src="../img/3.jpg"/></div></div><div class="box"><div class="pic"><img src="../img/4.jpg"/></div></div><div class="box"><div class="pic"><img src="../img/5.jpg"/></div></div><div class="box"><div class="pic"><img src="../img/6.jpg"/></div></div><div class="box"><div class="pic"><img src="../img/7.jpg"/></div></div><div class="box"><div class="pic"><img src="../img/8.jpg"/></div></div><div class="box"><div class="pic"><img src="../img/9.jpg"/></div></div><div class="box"><div class="pic"><img src="../img/10.jpg"/></div></div><div class="box"><div class="pic"><img src="../img/11.jpg"/></div></div><div class="box"><div class="pic"><img src="../img/12.jpg"/></div></div><div class="box"><div class="pic"><img src="../img/13.jpg"/></div></div><div class="box"><div class="pic"><img src="../img/14.jpg"/></div></div><div class="box"><div class="pic"><img src="../img/15.jpg"/></div></div><div class="box"><div class="pic"><img src="../img/16.jpg"/></div></div><div class="box"><div class="pic"><img src="../img/17.jpg"/></div></div><div class="box"><div class="pic"><img src="../img/18.jpg"/></div></div><div class="box"><div class="pic"><img src="../img/19.jpg"/></div></div><div class="box"><div class="pic"><img src="../img/20.jpg"/></div></div><div class="box"><div class="pic"><img src="../img/21.jpg"/></div></div><div class="box"><div class="pic"><img src="../img/21.jpg"/></div></div></div></body><script src="../js/_waterfall.js" type="text/javascript" charset="utf-8"></script>
</html>
js代码:
window.onload = function() {var oParent = document.getElementById("main");var oBoxs = oParent.getElementsByClassName("box");//调用瀑布流布局的函数waterfall('main','box');//模拟出要加载的图片var dataInt = {"data":[{"src":'23.jpg'},{"src":'24.jpg'},{"src":'25.jpg'}]};window.onscroll = function() {if (checkscrollSlide()) {//如果调用函数 的返回值为true//将数据块渲染到页面底部for (var i=0; i<dataInt.data.length; i++) {var oBox = document.createElement('div');oBox.className = 'box';//添加到父元素的最后oParent.appendChild(oBox);var oPic = document.createElement('div');oPic.className = 'pic';oBox.appendChild(oPic);var oImg = document.createElement('img');oImg.src = "../img/"+dataInt.data[i].src;oPic.appendChild(oImg);}waterfall('main','box');}}function waterfall(parent,box) {var oParent = document.getElementById(parent);var oBoxs = oParent.getElementsByClassName(box);//计算每个box的宽度var oBoxW = oBoxs[0].offsetWidth;//计算每个页面显示的列数（页面宽/box的宽度）var cols = Math.floor(document.documentElement.clientWidth/oBoxW);//设置main的宽度，居中oParent.style.cssText='width:'+oBoxW*cols+'px;margin: 0 auto;';//存放每一列高度的数组var hArr = [];for (var i=0; i<oBoxs.length; i++) {if (i<cols) {//将第一行的各个高度加到数组中hArr.push(oBoxs[i].offsetHeight);} else{//apply方法可以改变数组的指向，因为Math.main方法不支持数组var minH = Math.min.apply(null,hArr);var index = getMinhIndex(hArr,minH);oBoxs[i].style.position='absolute';oBoxs[i].style.top=minH+'px';oBoxs[i].style.left=oBoxs[index].offsetLeft+'px';hArr[index]+=oBoxs[i].offsetHeight;}}}function getMinhIndex(arr,val) {for (var i in arr) {if (arr[i]==val) {return i;}}}//检测是否具备了滚动条加载数据块的条件function checkscrollSlide() {//最后一个盒子的距顶部的高度加上自身高度的一半var lastBoxH = oBoxs[oBoxs.length-1].offsetTop+Math.floor(oBoxs[oBoxs.length-1].offsetHeight/2);//页面滚走的距离var scrollTop =document.body.scrollTop||document.documentElement.scrollTop;//当前浏览器窗口可视区域高度var height = document.body.clientHeight||document.documentElement.clientHeight;return (lastBoxH<scrollTop+height) ? true:false;}
}
前端html-部件模板收集（附源码）相关推荐
- 【程序人生】卡塔尔世界杯元素python海龟绘图（附源代码），世界杯主题前端特效5个（附源码）
卡塔尔世界杯元素python海龟绘图(附源代码) 世界杯主题前端特效5个(附源码)程序人生 本文目录: 一.python turtle海龟绘图卡塔尔世界杯元素 (1).绘制效果图 (2).代码演示方法 ...
- html实现好看的个人介绍，个人主页模板3(附源码)
文章目录 1.设计来源 1.1 主界面 1.2 关于我界面 1.3 教育成就界面 1.4 项目演示界面 1.5 联系我界面 2.效果和源码 2.1 动态效果 2.2 源代码 2.2 源代码目录 源码下 ...
- html实现好看的个人介绍，个人主页模板5(附源码)
文章目录 1.设计来源 1.1 主界面 1.2 我的介绍界面 1.3 我的能力界面 1.4 项目案例界面 1.5 联系我界面 2.效果和源码 2.1 动态效果 2.2 源代码 2.3 源代码目录 源码 ...
- html实现好看的个人介绍，个人主页模板1(附源码)
文章目录 1.设计来源 1.1 主界面 1.2 关于我界面 1.3 自我介绍界面 1.4 项目演示界面 1.5 个人成就界面 1.6 联系我界面 2.效果和源码 2.1 动态效果 2.2 源代码 源码 ...
- html实现好看的个人介绍，个人主页模板4(附源码)
文章目录 1.设计来源 1.1 主界面 1.2 我的文章界面 1.3 我的相册界面 1.4 关于我界面 1.5 联系我界面 2.效果和源码 2.1 动态效果 2.2 源代码 2.2 源代码目录 源码下 ...
- html实现好看的个人介绍，个人主页模板2(附源码)
文章目录 1.设计来源 1.1 主界面 1.2 关于我界面 1.3 项目演示界面 1.4 联系我界面 2.效果和源码 2.1 动态效果 2.2 源代码 2.3 源码目录 源码下载 作者:xcLeigh ...
- 7个Web前端极其精美的动画效果模板（附源码）
1. jQuery动态随机背景滚动 源码下载 / 在线演示 2. jquery animate分页按钮 源码下载 / 在线演示 3. html5+css3日食场景特效 源码下载/ ...
- 仿蘑菇街，京东，苏宁易购，海尔商城等33套大气购物商城网站模板，附源码免费下载地址...
来源 | web前端开发 在很早之前,跟大家分享过很多有关于网站模板的素材资源,有企业网站,也有购物商城,还有后台管理模板,以及大数据页面模板等等. 今天我们再跟大家分享32套商城网站源码,有的是比较 ...
- 微信小程序 推送模板教程 附源码
无聊的时候 玩一下小功能踩踩坑 首先模板推送 需要准备一些材料 准备材料:1)公众号|小程序,添加选择的模板消息,2)在设置>开发设置页面,开通消息模板功能:如: 如果还没模板素材的 请新建一 ...
- Node后端模板代码(附源码)
前言 之前也写过简单的node服务器代码,但不算做事一个工程,这一次因为也需求,就写了这套后端模板. 从git上找的一些node模板,功能是可以实现,但工作流程理解起来有点困难,可能是小弟我水平有限, ...
最新文章
- 基于tensorflow的MNIST手写字识别
- python新手小项目-推荐：一个适合于Python新手的入门练手项目
- CentOS6 vsftpd 安装及优化方法
- boost::mp11::mp_replace_second相关用法的测试程序
- Jenkins 插件管理与系统设置
- javaweb功能模块如何合理设计_燃油燃气锅炉烟道如何设计才更合理？
- 使用MesaSQLite入库CSV文件
- nvm 下载node 下载不下来_挑战不可能最新版手游下载_挑战不可能最新版安卓版下载...
- python数据库-mongoDB的高级查询操作(55)
- 经典脑成像研究的元分析示例（决策篇）
- 网络：CGI程序制作
- Xcode7-“App Transport Security has blocked a cleartext HTTP (http://) resource load since it is inse
- 在C语言中使用fflush（stdin）
- Python————办公自动化
- 在公交车上想出的一个java算法
- 使用linux集体升级系统,1.3. 利用mtd工具升级Linux系统
- 一款极简聊天应用，比较完整，略好看
- vb.net 教程 3-2 窗体编程之窗体 4
- 计算机电脑类比,2020年广西公务员考试类比推理专项练习（91）
- 2019双十一淘宝天猫刷喵币