前端html-部件模板收集（附源码）

编程语言 2023-04-10 10:50:47 阅读次数: 0

目录

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="images/show.png" alt="">
            国内各地景点
        </h2>
    </div>

    <!--显示菜单-->
    <div id="open">
        <div class="navH">
            国内各地景点
            <span><img class="obscure" src="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 obFocus
                for (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;
    }
}

猜你喜欢

转载自blog.csdn.net/qq_57210034/article/details/125072823
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
BPM为企业带来的实际利益
好程序员web前端分享css常用属性缩写
Java文件下载（excel）
css样式的动态添加及显示和隐藏等零碎用法
axios全局配置以及拦截器
使用Logstash来实时同步MySQL和log日志数据到ES
C++获取当前时间（年月日、时分秒、毫秒）
Odoo产品分析 (四) -- 工具板块(11) -- 网站即时聊天(1)
Java环境配置正确，但是java、javac、java -version均返回“不是内部或外部命令，也不是可运行的程序或批处理文件”？
01 官网下载各种CentOS教程（超详细版）
每日归档
更多
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022