jQuery获得request jquery获得元素left_jquery 获取left

设置或获取匹配元素在当前窗口的相对偏移.

  • 用于获取偏移时:返回第一个匹配元素的偏移配置,返回一个对象,包含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>