九种推拉门

最新推荐文章于 2024-09-15 21:53:51 发布

Anita-Sun

最新推荐文章于 2024-09-15 21:53:51 发布

阅读量211

点赞数

分类专栏：前端特效文章标签：定位 js css javascript html

本文链接：https://blog.csdn.net/AnitaSun/article/details/109838080

版权

前端特效专栏收录该内容

5 篇文章 0 订阅

订阅专栏

这个专栏里的所有代码都是从GitHub上copy过来的
前端特效存档
同时添加了自己的一些理解，包括思路分析和复杂代码的解释
创这个专栏的目的也是为了督促自己每天学一个小特效，巩固JavaScript的基本语法知识，希望自己可以坚持下去
这个专栏适合有一些html、css基础，学过JavaScript基本的语法，想巩固的小可爱们。
每天一更开始~~
咱们一起努力，哦耶~
😘😘😘😘😘😘😘😘😘😘😘😘
———————————————————————————————————————

第一种：点击按钮，图片切换

在这里插入图片描述

<!DOCTYPE HTML>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>妙味课堂-www.miaov.com</title>
	<style>
		/* 清楚内外边距 */
		body,
		ul,
		ol {
			margin: 0;
			padding: 0;
		}

		li {
			list-style: none;
		}

		img {
			border: none;
			/* 顶端对齐 */
			vertical-align: top;
		}

		#box {
			width: 470px;
			height: 150px;
			/* 设置为相对定位 */
			position: relative;
			margin: 30px auto;
			/* overflow: hidden; */
		}

		ul {
			width: 470px;
			/* 设置为绝对定位 */
			position: absolute;
			left: 0;
			top: 0;
			z-index: 1;
		}

		ul li {
			width: 470px;
			/* 设置为相对定位 */
			position: absolute;
			top: 0;
		}

		ol {
			/* 提高权重,在图片上 */
			z-index: 2;
			width: 120px;
			position: absolute;
			right: 10px;
			bottom: 10px;
		}

		ol li {
			width: 20px;
			height: 20px;
			float: left;
			margin: 0 2px;
			/* 转化成行内块元素 */
			display: inline;
			background: #fff;
			color: #f60;
			/* 设置元素居中对齐 */
			line-height: 20px;
			text-align: center;
		}

		/* 点击序号之后,颜色变为橘黄色 */
		ol .active {
			background: #f60;
			color: #fff;
		}
	</style>
	<script>
		//当窗口加载的时候,执行这个函数
		window.onload = function () {
			var oUl = document.getElementsByTagName('ul')[0];
			var aLiUl = oUl.getElementsByTagName('li');

			var oOl = document.getElementsByTagName('ol')[0];
			var aLiOl = oOl.getElementsByTagName('li');

			//遍历每个按钮
			for (var i = 0; i < aLiOl.length; i++) {
				//设置按钮的下标属性为i
				aLiOl[i].index = i;
				//当鼠标移动到这个按钮
				aLiOl[i].onmouseover = function () {
					// 遍历每个按钮,让它样式改为none
					// 将图片隐藏
					for (var i = 0; i < aLiOl.length; i++) {
						aLiOl[i].className = '';
						aLiUl[i].style.display = 'none';
					}
					// 把点击的按钮样式改为active
					this.className = 'active';
					// 把对应图片的样式改为block
					aLiUl[this.index].style.display = 'block';
				};
			}

		};
	</script>
</head>

<body>
	<div id="box">
		<!-- 上面的图片切换部分 -->
		<ul>
			<li style="display:block"><img src="images/1.jpg" alt="" /></li>
			<li><img src="images/2.jpg" alt="" /></li>
			<li><img src="images/3.jpg" alt="" /></li>
			<li><img src="images/4.jpg" alt="" /></li>
			<li><img src="images/5.jpg" alt="" /></li>
		</ul>
		<!-- 下面的按钮 -->
		<ol>
			<li class="active">1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ol>
	</div>
</body>

</html>

第二种：添加背景透明和过渡效果

	<script type="text/javascript" src="move.js"></script>
	<script>
		window.onload = function () {
			var oUl = document.getElementsByTagName('ul')[0];
			var aLiUl = oUl.getElementsByTagName('li');

			var oOl = document.getElementsByTagName('ol')[0];
			var aLiOl = oOl.getElementsByTagName('li');

			for (var i = 0; i < aLiOl.length; i++) {
				aLiOl[i].index = i;

				aLiOl[i].onmouseover = function () {
					for (var i = 0; i < aLiOl.length; i++) {
						aLiOl[i].className = '';
						aLiUl[i].style.display = 'none';
						// 新加部分
						// 下面两个都是添加背景的不透明度
						// 这是一种兼容性写法
						// 100是不透明
						aLiUl[i].style.filter = 'alpha(opacity=0)';
						aLiUl[i].style.opacity = 0;
					}
					this.className = 'active';
					aLiUl[this.index].style.display = 'block';
					
					// 添加过渡效果
					startMove(aLiUl[this.index], { opacity: 100 });
				};
			}

		};
	</script>

第三种：图片消失和出现都添加过渡

	<script type="text/javascript" src="move.js"></script>
	<script>
		window.onload = function () {
			var oUl = document.getElementsByTagName('ul')[0];
			var aLiUl = oUl.getElementsByTagName('li');

			var oOl = document.getElementsByTagName('ol')[0];
			var aLiOl = oOl.getElementsByTagName('li');

			for (var i = 0; i < aLiOl.length; i++) {
				aLiOl[i].index = i;
				aLiOl[i].onmouseover = function () {
					for (var i = 0; i < aLiOl.length; i++) {
						aLiOl[i].className = '';

						/*
							第一个参数是要添加过渡的元素,第二个参数是要添加过渡的属性
							第三个类似于回调函数
						*/
						startMove(aLiUl[i], { opacity: 0 }, function () {
							this.style.display = 'none';

						});

					}
					this.className = 'active';
					aLiUl[this.index].style.display = 'block';
					startMove(aLiUl[this.index], { opacity: 100 });
				};
			}

		};
	</script>

第四种：图片上下滚动

	<script type="text/javascript" src="move.js"></script>
	<script>
		window.onload = function () {
			var oUl = document.getElementsByTagName('ul')[0];
			var aLiUl = oUl.getElementsByTagName('li');

			var oOl = document.getElementsByTagName('ol')[0];
			var aLiOl = oOl.getElementsByTagName('li');

			// 回该元素的像素高度，高度包含该元素的垂直内边距和边框
			var oneHeight = aLiUl[0].offsetHeight;

			for (var i = 0; i < aLiOl.length; i++) {
				aLiOl[i].index = i;
				aLiOl[i].onmouseover = function () {
					for (var i = 0; i < aLiOl.length; i++) {
						aLiOl[i].className = '';
					}
					this.className = 'active';

					startMove(oUl, { top: - this.index * oneHeight });
				};
			}
		};
	</script>

第五种：添加鼠标离开之后自动滚动

	<script type="text/javascript" src="move.js"></script>
	<script>
		window.onload = function () {
			var oUl = document.getElementsByTagName('ul')[0];
			var aLiUl = oUl.getElementsByTagName('li');

			var oOl = document.getElementsByTagName('ol')[0];
			var aLiOl = oOl.getElementsByTagName('li');

			var oneHeight = aLiUl[0].offsetHeight;
			//设置当前移动到的位置
			var iNow = 0;
			var timer = null;

			var oBox = document.getElementById('box');

			for (var i = 0; i < aLiOl.length; i++) {
				aLiOl[i].index = i;
				aLiOl[i].onmouseover = function () {
					for (var i = 0; i < aLiOl.length; i++) {
						aLiOl[i].className = '';
					}
					this.className = 'active';

					iNow = this.index;

					startMove(oUl, { top: - this.index * oneHeight });

				};
			}

			// 添加定时器,自动滚动
			timer = setInterval(toRun, 2000);
			
			//当鼠标移动上去的时候,清楚定时器
			oBox.onmouseover = function () {
				clearInterval(timer);
			};

			//当鼠标离开的时候,添加定时器
			oBox.onmouseout = function () {
				timer = setInterval(toRun, 2000);
			};

			function toRun() {
				// 当当前变红的按钮为最后一个时, 变为第一个
				if (iNow == aLiOl.length - 1) {
					iNow = 0;
				}
				else {
					// 不是最后一个,就让它加1
					iNow++;
				}

				// 清楚所有的样式
				for (var i = 0; i < aLiOl.length; i++) {
					aLiOl[i].className = '';
				}

				aLiOl[iNow].className = 'active';
				startMove(oUl, { top: - iNow * oneHeight });
			}

		};
	</script>

第六种：实现鼠标离开后自动滚动且鼠标放上去滚动到特定的位置，两者实现同步

	<script type="text/javascript" src="move.js"></script>
	<script>
		window.onload = function () {
			var oUl = document.getElementsByTagName('ul')[0];
			var aLiUl = oUl.getElementsByTagName('li');

			var oOl = document.getElementsByTagName('ol')[0];
			var aLiOl = oOl.getElementsByTagName('li');

			var oneHeight = aLiUl[0].offsetHeight;
			var iNow = 0;
			var iNow2 = 0;
			var timer = null;

			var oBox = document.getElementById('box');

			for (var i = 0; i < aLiOl.length; i++) {
				aLiOl[i].index = i;
				aLiOl[i].onmouseover = function () {


					if (this.index == 0) {
						if (iNow2 == aLiOl.length - 1) {
							aLiUl[0].style.position = 'relative';
							aLiUl[0].style.top = aLiUl.length * oneHeight + 'px';
							iNow2 = aLiOl.length;
							iNow = 0;
						}
						else {
							iNow = this.index;
							iNow2 = this.index;
						}
					}
					else if (this.index == 1) {
						if (iNow2 == aLiOl.length) {
							aLiUl[0].style.position = 'static';
							oUl.style.top = 0;
							iNow = this.index;
							iNow2 = this.index;
						}
						else {
							iNow = this.index;
							iNow2 = this.index;
						}
					}
					else if (this.index == aLiOl.length - 1) {
						iNow = 0;
						iNow2 = this.index;
					}
					else {
						iNow = this.index;
						iNow2 = this.index;
					}

					for (var i = 0; i < aLiOl.length; i++) {
						aLiOl[i].className = '';
					}
					this.className = 'active';

					startMove(oUl, { top: - iNow2 * oneHeight });

				};
			}

			//每2000秒就执行这个定时器
			timer = setInterval(toRun, 2000);

			//鼠标经过,清楚定时器
			oBox.onmouseover = function () {
				clearInterval(timer);
			};

			//鼠标离开,设置定时器
			oBox.onmouseout = function () {
				timer = setInterval(toRun, 2000);
			};

			function toRun() {

				if (iNow == 0) {
					aLiUl[0].style.position = 'static';
					oUl.style.top = 0;
					iNow2 = 0;
				}

				// 如果到了最后一张图片,把第一张图片设置为相对定位
				// 定位到最后一张图片后面
				if (iNow == aLiOl.length - 1) {
					iNow = 0;
					aLiUl[0].style.position = 'relative';
					aLiUl[0].style.top = aLiUl.length * oneHeight + 'px';
				}
				else {
					iNow++;
				}

				iNow2++;

				for (var i = 0; i < aLiOl.length; i++) {
					aLiOl[i].className = '';
				}
				aLiOl[iNow].className = 'active';
				startMove(oUl, { top: - iNow2 * oneHeight });
			}
		};
	</script>

第七种：鼠标指哪儿就滚哪儿，不用滚过他们之间的图片，直接滚（横向滚动）

	<script type="text/javascript" src="move.js"></script>
	<script>
		window.onload = function () {
			var oUl = document.getElementsByTagName('ul')[0];
			var aLiUl = oUl.getElementsByTagName('li');

			var oOl = document.getElementsByTagName('ol')[0];
			var aLiOl = oOl.getElementsByTagName('li');

			var oneWidth = aLiUl[0].offsetWidth;
			var iNow = 0;
			var bBtn = true;

			// 因为是横向滚动,所以加定位
			for (var i = 1; i < aLiUl.length; i++) {
				aLiUl[i].style.left = oneWidth + 'px';
			}

			for (var i = 0; i < aLiOl.length; i++) {
				// 每个按钮的下标
				aLiOl[i].index = i;
				aLiOl[i].onmouseover = function () {

					// bBtn的目的是移动一次之后就不可以再移动了
					if (bBtn) {
						// 设置按钮的样式
						bBtn = false;
						for (var i = 0; i < aLiOl.length; i++) {
							aLiOl[i].className = '';
						}
						this.className = 'active';

						// iNow是上一次的下标
						// 就是把下一次要滚到的图片放到box的左边还是右边
						// absolute是不占有位置的
					    // relative会占有位置
						if (iNow < this.index) {
							aLiUl[this.index].style.left = oneWidth + 'px';
							//这张图片向左走,在它右边会自动靠上来
							startMove(aLiUl[iNow], { left: - oneWidth });
						}
						else if (iNow > this.index) {
							aLiUl[this.index].style.left = - oneWidth + 'px';
							startMove(aLiUl[iNow], { left: oneWidth });
						}

						startMove(aLiUl[this.index], { left: 0 }, function () {
							bBtn = true;
						});
						iNow = this.index;

					}

				};
			}
		};
	</script>

点哪张图片，哪张图片移动出来

在这里插入图片描述

	<script type="text/javascript" src="move.js"></script>
	<script>
		window.onload = function () {
			var oUl = document.getElementsByTagName('ul')[0];
			var aLiUl = oUl.getElementsByTagName('li');

			for (var i = 1; i < aLiUl.length; i++) {
				//露出来最大的图片占350px  后面的图片占30px
				aLiUl[i].style.left = (470 - 120) + (i - 1) * 30 + 'px';
			}

			for (var i = 0; i < aLiUl.length; i++) {
				aLiUl[i].index = i;
				aLiUl[i].onmouseover = function () {

					for (var i = 0; i < aLiUl.length; i++) {
						if (i <= this.index) {
							startMove(aLiUl[i], { left: i * 30 });
						}
						else {
							startMove(aLiUl[i], { left: (470 - 120) + (i - 1) * 30 });
						}
					}
				};
			}

		};
	</script>

每个图片占相同的大小，鼠标移上的时候，进行移动，鼠标离开的时候，恢复

在这里插入图片描述

	<script type="text/javascript" src="move.js"></script>
	<script>
		// 在窗口加载的时候,执行这个函数
		window.onload = function () {
			var oUl = document.getElementsByTagName('ul')[0];
			var aLiUl = oUl.getElementsByTagName('li');  

			//算出每一张图片所占的大小
			var num = Math.ceil(470 / aLiUl.length);

			//将每一张图片定位到合适的位置
			for (var i = 0; i < aLiUl.length; i++) {
				aLiUl[i].style.left = num * i + 'px';
			}

			//遍历每一张图片
			for (var i = 0; i < aLiUl.length; i++) {
				//给每一张图片设置它的属性下标值为i
				aLiUl[i].index = i;
				//当鼠标放到第i张图片上时
				aLiUl[i].onmouseover = function () {
					for (var i = 0; i < aLiUl.length; i++) {
						//设置这张图片和它之前图片的移动方式
						//之前的图片向左移动,每张占30
						if (i <= this.index) {
							startMove(aLiUl[i], { left: i * 30 });
						}
						//设置这张图片之后的图片移动方式
						//之后的图片向右移动,每张占30
						//因为这张图片左右的图片总共占30 * 4 = 120
						//所以这张图片占470 - 120 = 350
						else {
							startMove(aLiUl[i], { left: (470 - 120) + (i - 1) * 30 });
						}	
					}
				};

				//当鼠标从第i张图片移出时
				aLiUl[i].onmouseout = function () {
					for (var i = 0; i < aLiUl.length; i++) {
						//将图片移动回到原来的位置
						startMove(aLiUl[i], { left: num * i });
					}
				};
			}

		};
	</script>