设置或获取匹配元素在当前窗口的相对偏移.
- 用于获取偏移时:返回第一个匹配元素的偏移配置,返回一个对象,包含2个属性(
top/left
).- 用于设置偏移时,设置所有匹配元素的偏移位置.
// 返回偏移坐标
$(selector).offset()
// 设置偏移坐标
$(selector).offset({top:value, left:value})
// 使用函数设置偏移坐标
$(selector).offset(function(index, currentoffset))
// index - 返回集合中元素的 index 位置
// currentoffset - 返回被选元素的当前坐标// 返回偏移坐标
$(selector).offset()
// 设置偏移坐标
$(selector).offset({top:value, left:value})
// 使用函数设置偏移坐标
$(selector).offset(function(index, currentoffset))
// index - 返回集合中元素的 index 位置
// currentoffset - 返回被选元素的当前坐标html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>offsettitle>
<script src="../jquery.min.js">script>
<script>// 获取位置
$(function() {var $box1 = $('.box1');var $box = $('.box');console.log($box.offset())var $boxLoca = $box.offset();
$box.mouseover(() => {
$box1.show();
$box1.css({'top': $boxLoca.top,'left': $boxLoca.left + 50,'color': 'red'
});
});
$box.mouseleave(() => {
$box1.hide();
$box1.css({'top': 0,'left': 0
});
})
})script>
<style>body {margin: 0;
}.box {margin: 50px auto;
}.box,.box img {width: 960px;height: 600px;
}.box1 {font-size: 30px;/* color: white; */position: fixed;top: 0;left: 0;display: none;
}style>
head>
<body>
<div class="box">
<img src="../images/robin.jpg" alt="robin">
div>
<div class="box1">
<p>这是海贼王罗宾p>
div>
body>
html>
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>offsettitle>
<script src="../jquery.min.js">script>
<script>// 获取位置
$(function() {var $box1 = $('.box1');var $box = $('.box');console.log($box.offset())var $boxLoca = $box.offset();
$box.mouseover(() => {
$box1.show();
$box1.css({'top': $boxLoca.top,'left': $boxLoca.left + 50,'color': 'red'
});
});
$box.mouseleave(() => {
$box1.hide();
$box1.css({'top': 0,'left': 0
});
})
})script>
<style>body {margin: 0;
}.box {margin: 50px auto;
}.box,.box img {width: 960px;height: 600px;
}.box1 {font-size: 30px;/* color: white; */position: fixed;top: 0;left: 0;display: none;
}style>
head>
<body>
<div class="box">
<img src="../images/robin.jpg" alt="robin">
div>
<div class="box1">
<p>这是海贼王罗宾p>
div>
body>
html>
2.获取可视区域高度
$(window).height();
$(window).height();
3.获取页面高度
$(document).height();
$(document).height();
4.获取页面滚动距离
$(document).scrollTop();
$(document).scrollLeft();
$(document).scrollTop();
$(document).scrollLeft();
5.页面滚动事件
$(window).scroll(function(){
......
})
$(window).scroll(function(){
......
})
6.实例-置顶菜单滚动
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>置顶菜单滚动title>
<style>body {margin: 0;
}.logBar {width: 960px;height: 100px;background-color: wheat;margin: 0 auto;text-align: center;line-height: 100px;
}.menu {width: 960px;height: 42px;background-color: yellowgreen;margin: 0 auto;text-align: center;line-height: 42px;
}.down_con {width: 960px;height: auto;margin: 0 auto;
}.down_con p {width: 960px;height: 300px;margin: 0 auto;text-align: center;
}/* 站位 div */.menu_pos {display: none;
}style>
<script src="../jquery.min.js">script>
<script>// 置顶菜单滚动
$(function() {// 滚动到菜单时 position=fixed 固定住即可
$(document).scroll(function() {// 获取滚动条位置console.log($(document).scrollTop())if ($(document).scrollTop() > 100) {
$('.menu').css({'position': 'fixed',// 居中技巧,先居中,在左移'left': '50%','margin-left': '-480px','top': 0,
});
$('.menu_pos').show();
} else {
$('.menu').css({'position': 'static',// 当滚动条回去时,清除 margin-left'margin-left': 'auto',
});
$('.menu_pos').hide();
}
})
})script>
head>
<body>
<div class="logBar">Logodiv>
<div class="menu">置顶菜单div>
<div class="menu_pos">div>
<div class="down_con">
<p>网站主内容p>
<p>网站主内容p>
<p>网站主内容p>
<p>网站主内容p>
<p>网站主内容p>
<p>网站主内容p>
<p>网站主内容p>
div>
body>
html>
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>置顶菜单滚动title>
<style>body {margin: 0;
}.logBar {width: 960px;height: 100px;background-color: wheat;margin: 0 auto;text-align: center;line-height: 100px;
}.menu {width: 960px;height: 42px;background-color: yellowgreen;margin: 0 auto;text-align: center;line-height: 42px;
}.down_con {width: 960px;height: auto;margin: 0 auto;
}.down_con p {width: 960px;height: 300px;margin: 0 auto;text-align: center;
}/* 站位 div */.menu_pos {display: none;
}style>
<script src="../jquery.min.js">script>
<script>// 置顶菜单滚动
$(function() {// 滚动到菜单时 position=fixed 固定住即可
$(document).scroll(function() {// 获取滚动条位置console.log($(document).scrollTop())if ($(document).scrollTop() > 100) {
$('.menu').css({'position': 'fixed',// 居中技巧,先居中,在左移'left': '50%','margin-left': '-480px','top': 0,
});
$('.menu_pos').show();
} else {
$('.menu').css({'position': 'static',// 当滚动条回去时,清除 margin-left'margin-left': 'auto',
});
$('.menu_pos').hide();
}
})
})script>
head>
<body>
<div class="logBar">Logodiv>
<div class="menu">置顶菜单div>
<div class="menu_pos">div>
<div class="down_con">
<p>网站主内容p>
<p>网站主内容p>
<p>网站主内容p>
<p>网站主内容p>
<p>网站主内容p>
<p>网站主内容p>
<p>网站主内容p>
div>
body>
html>
7.添加跳转顶部图标
这是一个固定的写法.在末尾添加一个
a
标签.
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>置顶菜单滚动title>
<style>body {margin: 0;
}.logBar {width: 960px;height: 100px;background-color: wheat;margin: 0 auto;text-align: center;line-height: 100px;
}.menu {width: 960px;height: 42px;background-color: yellowgreen;margin: 0 auto;text-align: center;line-height: 42px;
}.down_con {width: 960px;height: auto;margin: 0 auto;
}.down_con p {width: 960px;height: 300px;margin: 0 auto;text-align: center;
}/* 站位 div */.menu_pos {display: none;
}.totop {width: 139px;height: 139px;background: url('../images/up.png') center center no-repeat white;border-radius: 50%;position: fixed;right: 50px;bottom: 50px;display: none;
}style>
<script src="../jquery.min.js">script>
<script>// 置顶菜单滚动
$(function() {// 滚动到菜单时 position=fixed 固定住即可
$(document).scroll(function() {// 获取滚动条位置console.log($(document).scrollTop())if ($(document).scrollTop() > 100) {
$('.menu').css({'position': 'fixed',// 居中技巧,先居中,在左移'left': '50%','margin-left': '-480px','top': 0,
});
$('.menu_pos').show();
} else {
$('.menu').css({'position': 'static',// 当滚动条回去时,清除 margin-left'margin-left': 'auto',
});
$('.menu_pos').hide();
};// 设置隐藏,并在一定范围后显示if ($(document).scrollTop() > 400) {
$('.totop').show();
} else {
$('.totop').hide();
}
});// 定义点击事件
$('.totop').click(function() {
$('html,body').animate({'scrollTop': 0
});
})
})script>
head>
<body>
<div class="logBar">Logodiv>
<div class="menu">置顶菜单div>
<div class="menu_pos">div>
<div class="down_con">
<p>网站主内容p>
<p>网站主内容p>
<p>网站主内容p>
<p>网站主内容p>
<p>网站主内容p>
<p>网站主内容p>
<p>网站主内容p>
div>
<a href="javascript:;" class="totop">a>
body>
html>
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>置顶菜单滚动title>
<style>body {margin: 0;
}.logBar {width: 960px;height: 100px;background-color: wheat;margin: 0 auto;text-align: center;line-height: 100px;
}.menu {width: 960px;height: 42px;background-color: yellowgreen;margin: 0 auto;text-align: center;line-height: 42px;
}.down_con {width: 960px;height: auto;margin: 0 auto;
}.down_con p {width: 960px;height: 300px;margin: 0 auto;text-align: center;
}/* 站位 div */.menu_pos {display: none;
}.totop {width: 139px;height: 139px;background: url('../images/up.png') center center no-repeat white;border-radius: 50%;position: fixed;right: 50px;bottom: 50px;display: none;
}style>
<script src="../jquery.min.js">script>
<script>// 置顶菜单滚动
$(function() {// 滚动到菜单时 position=fixed 固定住即可
$(document).scroll(function() {// 获取滚动条位置console.log($(document).scrollTop())if ($(document).scrollTop() > 100) {
$('.menu').css({'position': 'fixed',// 居中技巧,先居中,在左移'left': '50%','margin-left': '-480px','top': 0,
});
$('.menu_pos').show();
} else {
$('.menu').css({'position': 'static',// 当滚动条回去时,清除 margin-left'margin-left': 'auto',
});
$('.menu_pos').hide();
};// 设置隐藏,并在一定范围后显示if ($(document).scrollTop() > 400) {
$('.totop').show();
} else {
$('.totop').hide();
}
});// 定义点击事件
$('.totop').click(function() {
$('html,body').animate({'scrollTop': 0
});
})
})script>
head>
<body>
<div class="logBar">Logodiv>
<div class="menu">置顶菜单div>
<div class="menu_pos">div>
<div class="down_con">
<p>网站主内容p>
<p>网站主内容p>
<p>网站主内容p>
<p>网站主内容p>
<p>网站主内容p>
<p>网站主内容p>
<p>网站主内容p>
div>
<a href="javascript:;" class="totop">a>
body>
html>
8.实例-无缝滚动
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>无缝滚动title>
<style>body {margin: 0;
}ul {list-style: none;margin: 0;padding: 0;
}.slide {width: 500px;height: 100px;border: 1px solid gray;margin: 20px auto 0;/* 设置定位 */position: relative;/* 清除浮动 */overflow: hidden;
}.slide ul {width: 1000px;height: 100px;position: absolute;left: 0;top: 0;
}.slide ul li {width: 90px;height: 90px;margin: 5px;background-color: #ccc;text-align: center;line-height: 90px;font-size: 30px;float: left;
}style>
<script src="../jquery.min.js">script>
<script>
$(function() {var $ul = $('.slide ul');// 复制俩个
$ul.html($ul.html() + $ul.html());// 定义移动的变量var deraction = 2;var left = 0;var timer = setInterval(move, 30);function move() {
left -= deraction;if (left -500) {
left = 0;
};
if (left > 0) {
left = -500;
};
// ul 是 absolute,起始点为0,如果左移动到-500,就把left初始化为0
// 如果右移一点,就把 left初始化到 -500
// 这样复制的第二份总能显示.
$ul.css({
'left': left
})
}
// 设置左移,右移 的点击事件
$('#btn1').click(() => {
deraction = 2; // 左移
});
$('#btn2').click(() => {
deraction = -2; // 右移
});
// 设置鼠标悬停撤离事件
$('.slide').mouseover(() => {
clearInterval(timer); // 清除定时器
});
$('.slide').mouseout(() => {
// timer 必须自动,否则悬停时,不能清除 timer
timer = setInterval(move, 30); // 开启定时器
});
})
script>
head>
<body>
<div class="btns">
<input type="button" value="向左" id="btn1">
<input type="button" value="向右" id="btn2">
div>
<div class="slide">
<ul>
<li>1li>
<li>2li>
<li>3li>
<li>4li>
<li>5li>
ul>
div>
body>
html>
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>无缝滚动title>
<style>body {margin: 0;
}ul {list-style: none;margin: 0;padding: 0;
}.slide {width: 500px;height: 100px;border: 1px solid gray;margin: 20px auto 0;/* 设置定位 */position: relative;/* 清除浮动 */overflow: hidden;
}.slide ul {width: 1000px;height: 100px;position: absolute;left: 0;top: 0;
}.slide ul li {width: 90px;height: 90px;margin: 5px;background-color: #ccc;text-align: center;line-height: 90px;font-size: 30px;float: left;
}style>
<script src="../jquery.min.js">script>
<script>
$(function() {var $ul = $('.slide ul');// 复制俩个
$ul.html($ul.html() + $ul.html());// 定义移动的变量var deraction = 2;var left = 0;var timer = setInterval(move, 30);function move() {
left -= deraction;if (left -500) {
left = 0;
};
if (left > 0) {
left = -500;
};
// ul 是 absolute,起始点为0,如果左移动到-500,就把left初始化为0
// 如果右移一点,就把 left初始化到 -500
// 这样复制的第二份总能显示.
$ul.css({
'left': left
})
}
// 设置左移,右移 的点击事件
$('#btn1').click(() => {
deraction = 2; // 左移
});
$('#btn2').click(() => {
deraction = -2; // 右移
});
// 设置鼠标悬停撤离事件
$('.slide').mouseover(() => {
clearInterval(timer); // 清除定时器
});
$('.slide').mouseout(() => {
// timer 必须自动,否则悬停时,不能清除 timer
timer = setInterval(move, 30); // 开启定时器
});
})
script>
head>
<body>
<div class="btns">
<input type="button" value="向左" id="btn1">
<input type="button" value="向右" id="btn2">
div>
<div class="slide">
<ul>
<li>1li>
<li>2li>
<li>3li>
<li>4li>
<li>5li>
ul>
div>
body>
html>