常见网页特效案例

发布于2021-03-17 05:57 阅读(1144) 评论(0) 点赞(9) 收藏(5)

常见网页特效案例

1.返回顶部案例

滚动窗口至文档特定位置
window.scroll(x,y);

用之前的淘宝侧边栏案例做返回顶部，点击添加滚动窗口事件，发现会迅速回到顶部

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no,
		initial-sale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
		<title></title>
		<style>
			.slider-bar {
				position: absolute;
				left: 50%;
				top: 300px;
				margin-left: 600px;
				width: 45px;
				height: 130px;
				background-color: pink;
			}
			.w {
				width: 1200px;
				margin: 10px auto;
			}
			.header {
				height: 150px;
				background-color: purple;
			}
			.banner {
				height: 250px;
				background-color: skyblue;
			}
			.main {
				height: 1000px;
				background-color: yellowgreen;
			}
			span {
				display: none;
				position: absolute;
				bottom: 0;
			}
		</style>
	</head>
	<body>
	    <div class="slider-bar">
	        <span class="goBack">返回顶部</span>
	    </div>
	    <div class="header w">头部区域</div>
	    <div class="banner w">banner区域</div>
	    <div class="main w">主体部分</div>
	    <script>
	        //1. 获取元素
	        var sliderbar = document.querySelector('.slider-bar');
	        var banner = document.querySelector('.banner');
	        // banner.offestTop 就是被卷去头部的大小 一定要写到滚动的外面
	        var bannerTop = banner.offsetTop
	            // 当我们侧边栏固定定位之后应该变化的数值
	        var sliderbarTop = sliderbar.offsetTop - bannerTop;
	        // 获取main 主体元素
	        var main = document.querySelector('.main');
	        var goBack = document.querySelector('.goBack');
	        var mainTop = main.offsetTop;
	        // 2. 页面滚动事件 scroll
	        document.addEventListener('scroll', function() {
	            // console.log(11);
	            // window.pageYOffset 页面被卷去的头部
	            // console.log(window.pageYOffset);
	            // 3 .当我们页面被卷去的头部大于等于了 172 此时 侧边栏就要改为固定定位
	            if (window.pageYOffset >= bannerTop) {
	                sliderbar.style.position = 'fixed';
	                sliderbar.style.top = sliderbarTop + 'px';
	            } else {
	                sliderbar.style.position = 'absolute';
	                sliderbar.style.top = '300px';
	            }
	            // 4. 当我们页面滚动到main盒子，就显示 goback模块
	            if (window.pageYOffset >= mainTop) {
	                goBack.style.display = 'block';
	            } else {
	                goBack.style.display = 'none';
	            }
	
	        })
			// 点击返回顶部模块，让窗口滚动到页面最上方
			goBack.addEventListener('click',function(){
				window.scroll(0,0);
			})
	    </script>
	</body>
</html>

效果图如下：

在这里插入图片描述

我们想要做非常舒服圆滑的返回顶部，还是要用到之前封装的动画函数了。页面滚动多少，可以通过 window.pageYOffset 得到

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no,
		initial-sale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
		<title></title>
		<style>
			.slider-bar {
				position: absolute;
				left: 50%;
				top: 300px;
				margin-left: 600px;
				width: 45px;
				height: 130px;
				background-color: pink;
			}
			.w {
				width: 1200px;
				margin: 10px auto;
			}
			.header {
				height: 150px;
				background-color: purple;
			}
			.banner {
				height: 250px;
				background-color: skyblue;
			}
			.main {
				height: 1000px;
				background-color: yellowgreen;
			}
			span {
				display: none;
				position: absolute;
				bottom: 0;
			}
		</style>
	</head>
	<body>
	    <div class="slider-bar">
	        <span class="goBack">返回顶部</span>
	    </div>
	    <div class="header w">头部区域</div>
	    <div class="banner w">banner区域</div>
	    <div class="main w">主体部分</div>
	    <script>
	        //1. 获取元素
	        var sliderbar = document.querySelector('.slider-bar');
	        var banner = document.querySelector('.banner');
	        // banner.offestTop 就是被卷去头部的大小 一定要写到滚动的外面
	        var bannerTop = banner.offsetTop
	            // 当我们侧边栏固定定位之后应该变化的数值
	        var sliderbarTop = sliderbar.offsetTop - bannerTop;
	        // 获取main 主体元素
	        var main = document.querySelector('.main');
	        var goBack = document.querySelector('.goBack');
	        var mainTop = main.offsetTop;
	        // 2. 页面滚动事件 scroll
	        document.addEventListener('scroll', function() {
	            // console.log(11);
	            // window.pageYOffset 页面被卷去的头部
	            // console.log(window.pageYOffset);
	            // 3 .当我们页面被卷去的头部大于等于了 172 此时 侧边栏就要改为固定定位
	            if (window.pageYOffset >= bannerTop) {
	                sliderbar.style.position = 'fixed';
	                sliderbar.style.top = sliderbarTop + 'px';
	            } else {
	                sliderbar.style.position = 'absolute';
	                sliderbar.style.top = '300px';
	            }
	            // 4. 当我们页面滚动到main盒子，就显示 goback模块
	            if (window.pageYOffset >= mainTop) {
	                goBack.style.display = 'block';
	            } else {
	                goBack.style.display = 'none';
	            }
	
	        })
			// 点击返回顶部模块，让窗口滚动到页面最上方
			goBack.addEventListener('click',function(){
				// window.scroll(0,0);
				animate(window, 0);
			});
			//动画函数
			function animate(obj, target, callback) {
			    // console.log(callback);  callback = function() {}  调用的时候 callback()
			
			    // 先清除以前的定时器，只保留当前的一个定时器执行
			    clearInterval(obj.timer);
			    obj.timer = setInterval(function() {
			        // 步长值写到定时器的里面
			        // 把我们步长值改为整数 不要出现小数的问题
			        var step = (target - window.pageYOffset) / 10;
			        step = step > 0 ? Math.ceil(step) : Math.floor(step);
			        if (window.pageYOffset == target) {
			            // 停止动画 本质是停止定时器
			            clearInterval(obj.timer);
			            // 回调函数写到定时器结束里面
			            if (callback) {
			                // 调用函数
			                callback();
			            }
			        }
			        // 把每次加 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10
			        // obj.style.left = obj.offsetLeft + step + 'px';
					window.scroll(0, window.pageYOffset + step);
			    }, 15);
			}
	    </script>
	</body>
</html>

效果图如下：

在这里插入图片描述

2.筋斗云案例

需求：

鼠标经过li，筋斗云跟到li的位置

鼠标离开li，筋斗云复原到原来的位置

鼠标点击li，筋斗云留在li的位置

分析：利用动画函数做动画效果，起始筋斗云位置为0，鼠标经过li，设置当前li的offsetLeft值即可，离开li设置目标值为0

animate.js代码

function animate(obj, target, callback) {
    // console.log(callback);  callback = function() {}  调用的时候 callback()

    // 先清除以前的定时器，只保留当前的一个定时器执行
    clearInterval(obj.timer);
    obj.timer = setInterval(function() {
        // 步长值写到定时器的里面
        // 把我们步长值改为整数 不要出现小数的问题
        var step = (target - obj.offsetLeft) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (obj.offsetLeft == target) {
            // 停止动画 本质是停止定时器
            clearInterval(obj.timer);
            // 回调函数写到定时器结束里面
            if (callback) {
                // 调用函数
                callback();
            }
        }
        // 把每次加 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10
        obj.style.left = obj.offsetLeft + step + 'px';

    }, 15);
}

案例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no,
		initial-sale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0
			}
			
			ul {
				list-style: none;
			}
			
			body {
				background-color: black;
			}
			
			.c-nav {
				width: 900px;
				height: 42px;
				background: #fff url(img/rss.png) no-repeat right center;
				margin: 100px auto;
				border-radius: 5px;
				position: relative;
			}
			
			.c-nav ul {
				position: absolute;
			}
			
			.c-nav li {
				float: left;
				width: 83px;
				text-align: center;
				line-height: 42px;
			}
			
			.c-nav li a {
				color: #333;
				text-decoration: none;
				display: inline-block;
				height: 42px;
			}
			
			.c-nav li a:hover {
				color: white;
			}
			
			.cloud {
				position: absolute;
				left: 0;
				top: 0;
				width: 83px;
				height: 42px;
				background: url(img/cloud.gif) no-repeat;
			}
		</style>
		<script src="js/animate.js"></script>
		<script>
			window.addEventListener('load', function() {
				// 1. 获取元素
				var cloud = document.querySelector('.cloud');
				var c_nav = document.querySelector('.c-nav');
				var lis = c_nav.querySelectorAll('li');
				// 2. 给所有的小li绑定事件 
				// 这个current 做为筋斗云的起始位置
				var current = 0;
				for (var i = 0; i < lis.length; i++) {
					// (1) 鼠标经过把当前小li 的位置做为目标值
					lis[i].addEventListener('mouseenter', function() {
						animate(cloud, this.offsetLeft);
					});
					// (2) 鼠标离开就回到起始的位置 
					lis[i].addEventListener('mouseleave', function() {
						animate(cloud, current);
					});
					// (3) 当我们鼠标点击，就把当前位置做为目标值
					lis[i].addEventListener('click', function() {
						current = this.offsetLeft;
					});
				}
			})
		</script>
	</head>
	<body>
	    <div id="c_nav" class="c-nav">
	        <span class="cloud"></span>
	        <ul>
	            <li><a href="#">首页新闻</a></li>
	            <li><a href="#">师资力量</a></li>
	            <li><a href="#">活动策划</a></li>
	            <li><a href="#">企业文化</a></li>
	            <li><a href="#">招聘信息</a></li>
	            <li><a href="#">公司简介</a></li>
	            <li><a href="#">我是佩奇</a></li>
	            <li><a href="#">啥是佩奇</a></li>
	        </ul>
	    </div>
	</body>
</html>