网页特效练习(2)
2018-05-30 本文已影响0人
天使投资
1.中部导航吸顶
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
border:none
}
img{
vertical-align: top;
width: 100%;
}
section{
width: 70%;
margin: 0 auto;
}
.nav{
position: fixed;
left: 0;
top:0;
width: 100%;
}
</style>
</head>
<body>
<header id="head">
<img src="images/top.png" alt="">
</header>
<nav id="nav">
<img src="images/nav.png" alt="">
</nav>
<section>
<img src="images/body01.png" alt="">
<img src="images/body02.png" alt="">
</section>
<script src="js/myFunc.js"></script>
<script>
window.onload = function () {
// 1. 求出offsetHeight
var nav_top_height = $("nav").offsetTop;
// 2. 监听窗口滚动
window.onscroll = function () {
var scroll_top_height = scroll().top;
console.log(scroll_top_height);
// 2.1 判断
if(scroll_top_height >= nav_top_height){
$("nav").className = "nav";
}else {
$("nav").className = "";
}
}
}
</script>
</body>
</html>
侧边横幅
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
border:none
}
#aside{
width: 150px;
position: absolute;
left: 0;
top: 150px;
}
#aside img{
width: 100%;
}
p{
height: 50px;
text-align: center;
font-size: 20px;
}
</style>
</head>
<body>
<div id="aside">
<img src="images/float.jpg" alt="">
</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>
<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>
<p>上课要好好听课!下课要好好复习!不要打游戏!</p>
<p>上课要好好听课!下课要好好复习!不要打游戏!</p>
<p>上课要好好听课!下课要好好复习!不要打游戏!</p>
<p>上课要好好听课!下课要好好复习!不要打游戏!</p>
<p>上课要好好听课!下课要好好复习!不要打游戏!</p>
<p>上课要好好听课!下课要好好复习!不要打游戏!</p>
<p>上课要好好听课!下课要好好复习!不要打游戏!</p>
<p>上课要好好听课!下课要好好复习!不要打游戏!</p>
<p>上课要好好听课!下课要好好复习!不要打游戏!</p>
<script src="js/myFunc.js"></script>
<script>
window.onload = function () {
// 1. 获取广告头部的高度
var offset_top = $('aside').offsetTop;
// 2. 监听窗口的滚动
var begin = 0, end = 0, timer = null;
window.onscroll = function () {
// 2.0 清除定时器
clearInterval(timer);
// 2.1 获取滚动的高度
var scroll_top = scroll().top;
end = offset_top + scroll_top;
// 2.2 缓动动画
timer = setInterval(function () {
begin = begin + (end - begin) * 0.2;
$("aside").style.top = begin + "px";
console.log(begin, end);
// 清除定时器
if(Math.round(begin) === end){
clearInterval(timer);
}
}, 20);
}
}
</script>
</body>
</html>
3.返回顶部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
border: none;
}
body {
background-color: #ccc;
}
p {
margin-bottom: 20px;
text-align: center;
}
#top {
width: 43px;
height: 43px;
background: url("images/top.png") no-repeat;
background-size: 100% 100%;
position: fixed;
right: 10px;
bottom: 30px;
display: none;
}
</style>
</head>
<body>
<span id="top"></span>
<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>
<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>
<script src="js/myFunc.js"></script>
<script>
window.onload = function () {
// 0. 变量
var scroll_top = 0, begin = 0, end = 0, timer = null;
// 1. 监听窗口的滚动
window.onscroll = function () {
// 1.1 获取滚动的高度
scroll_top = scroll().top;
// 1.2 显示和隐藏
scroll_top > 0 ? show($('top')) : hide($('top'));
begin = scroll_top;
};
// 2. 监听点击
$("top").onclick = function () {
// 2.1 清除定时器
clearInterval(timer);
// 2.2 开启缓动动画
timer = setInterval(function () {
begin = begin + (end - begin) / 20;
window.scrollTo(0, begin);
// 2.3 清除定时器
console.log(begin, end);
if(Math.round(begin) === end){
clearInterval(timer);
}
}, 20);
}
}
</script>
</body>
</html>
4.onresize
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script src="js/myFunc.js"></script>
<script>
// 当屏幕的宽度>=960时，页面的背景颜色为红色；当屏幕的宽度>=640时，页面的背景颜色为蓝色；当屏幕的宽度<640时，页面的背景颜色为绿色？
window.onload = function () {
var bgColor;
/*console.log('' + changeColor());
console.log('' + changeColor);*/
changeColor();
window.onresize = changeColor;
function changeColor() {
if(client().width >= 960){
bgColor = 'red';
}else if(client().width >= 640){
bgColor = 'blue';
}else {
bgColor = 'green';
}
document.body.style.backgroundColor = bgColor;
}
}
</script>
</body>
</html>
