垂直点导航插件

2024年8月29日 | 阅读 7 分钟
在本文中，我们将通过一个例子详细了解垂直点导航插件。垂直点导航插件识别网站中的页面或部分数量，并相应地添加点以点击滚动浏览相应内容。
示例 1

<! DOCTYPE HTML>
<html>
<head>
  <meta charset = "UTF-8" />
	<meta http-equiv = "X-UA-Compatible" content = "IE=edge">
    <meta name = "viewport" content = "width=device-width, initial-scale=1, maximum-scale=1.0 ,user-scalable=no">
  <title> Example of Vertical Dot Navigation Plugin  </title>
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"> </script>
</head>
<style>
html
{ height: 100%; } 
*
{ margin: 0;
  padding: 0; }
body
{ font: normal 15px 'trebuchet ms', arial, sans-serif;
  background: #FFF url(background.png) repeat;
  color: #777;word-break: break-all; }
p
{ padding: 0 0 20px 0;
  line-height: 1.7em; }
img
{ border: 0; }
h1, h2, h3, h4, h5, h6 
{ font: bold 28px 'century gothic', arial, sans-serif;
  color: #068900;
  margin: 0 0 15px 0;
  padding: 15px 0 5px 0; 
  text-align: center; }
h2
{ font: normal 115% 'century gothic', arial, sans-serif;
  color: #068900; }
h4, h5, h6
{ margin: 0;
  padding: 0 0 5px 0;
  font: normal 25px arial, sans-serif;
  color: #068900; }
h5, h6
{ font: italic 21px arial, sans-serif;
  padding: 0 0 15px 0;
  color: #000; }
h6
{ color: #362C20; }
a, a:hover
{ outline: none;
  text-decoration: underline;
  color: tomato; }
a:hover
{ text-decoration: none; }
.left
{ float: left;
  width: auto;
  margin-right: 10px; }
.right
{ float: right; 
  width: auto;
  margin-left: 10px; }
.center
{ display: block;
  text-align: center;
  margin: 20px auto; }
blockquote
{ margin: 20px 0; 
  padding: 10px 20px 0 20px;
  border: 1px solid #E5E5DB;
  background: #FFF; }
ul
{ margin: 2px 0 22px 17px; }
ul li
{ list-style-type: circle;
  margin: 0 0 6px 0; 
  padding: 0 0 4px 5px; }
ol
{ margin: 8px 0 22px 20px; }
ol li
{ margin: 0 0 11px 0; }
#main, #logo, #menubar, #site_content, #footer
{ margin-left: auto; 
  margin-right: auto; }
#header
{ height: 240px; }
#logo
{ width: 80%;
  position: relative;
  margin-bottom: 45px; }
#logo h1, #logo h2
{ font: normal 300% 'century gothic', arial, sans-serif;
  border-bottom: 0;
  text-transform: none;
  margin: 0; }
#logo_text h1, #logo_text h1 a, #logo_text h1 a:hover 
{ padding: 22px 0 0 0;
  color: #000;
  letter-spacing: 0.1em;
  text-decoration: none; }
#logo_text h1 a .logo_colour
{ color: #068900; }
#logo_text h2
{ font-size: 15px;
  padding: 4px 0 0 0;
  color: #676767; }
#menubar
{ width: 80%;
  height: 72px;
  padding: 0;
  background: transparent url(transparent.png) repeat; } 
ul#menu, ul#menu li
{ float: left;
  margin: 0; 
  padding: 0; }
ul#menu li
{ list-style: none; }
ul#menu li a
{ letter-spacing: 0.1em;
  font: normal 15px arial, sans-serif;
  display: block; 
  float: left; 
  height: 37px;
  padding: 29px 26px 6px 26px;
  text-align: center;
  color: #000;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 2px solid #068900;
  background: transparent; } 
ul#menu li a:hover, ul#menu li.selected a, ul#menu li.selected a:hover
{ color: #FFF;
  background: #068900; }
#site_content
{ width: 80%;
  overflow: hidden;
  margin: 0 auto 0 auto;
  padding: 20px 20px 20px 20px;
  background: transparent url(transparent_light.png) repeat; } 
.sidebar
{ float: right;
  width: 190px;
  padding: 0 15px 20px 15px; }
.sidebar ul
{ width: 178px; 
  padding: 4px 0 0 0; 
  margin: 4px 0 30px 0; }
.sidebar li
{ list-style: none; 
  padding: 0 0 7px 0; }
.sidebar li a, .sidebar li a:hover
{ padding: 0 0 0 40px;
  display: block;
  background: transparent url(link.png) no-repeat left center; } 
.sidebar li a.selected
{ color: #444;
  text-decoration: none; } 
#content
{ text-align: left;
  padding: 0; }
#content ul
{ margin: 2px 0 22px 0px; }
#content ul li
{ list-style-type: none;
  background: url(bullet.png) no-repeat;
  margin: 0 0 6px 0; 
  padding: 0 0 4px 25px;
  line-height: 1.5em; }
#footer
{ width: 900px;
  font: normal 15px 'lucida sans unicode', arial, sans-serif;
  height: 33px;
  padding: 24px 0 5px 0;
  text-align: center; 
  background: transparent url(transparent.png) repeat;
  color: #FFF;
  text-transform: uppercase;
  letter-spacing: 0.1em; }
#footer a
{ color: #FFF;
  text-decoration: none; }
#footer a:hover
{ color: #FFF;
  text-decoration: underline; }
footer {
    background: #068900;
    height: 350px;
}
footer h2 {
    color:  #fff;
    font-size: 28px;
    width: 80%;
    margin: auto;
}
.search
{ color: #5D5D5D; 
  border: 1px solid #BBB; 
  width: 134px; 
  padding: 4px; 
  font: 100% arial, sans-serif; } 
#colours
{ height: 0px;
  text-align: right;
  padding: 66px 16px 0px 300px; }
.form_settings
{ margin: 15px 0 0 0; }
.form_settings p
{ padding: 0 0 4px 0; }
.form_settings span
{ float: left; 
  width: 200px; 
  text-align: left; }
.form_settings input, .form_settings textarea
{ padding: 5px; 
  width: 299px; 
  font: 15px arial; 
  border: 1px solid #E5E5DB; 
  background: #FFF; 
  color: #47433F; }
.form_settings .submit
{ font: 15px arial; 
  border: 1px solid; 
  width: 99px; 
  margin: 0 0 0 212px; 
  height: 33px;
  padding: 2px 0 3px 0;
  cursor: pointer; 
  background: #068900; 
  color: #FFF; }
.form_settings textarea, .form_settings select
{ font: 15px arial; 
  width: 299px; }
.form_settings select
{ width: 310px; }
.form_settings .checkbox
{ margin: 4px 0; 
  padding: 0; 
  width: 14px;
  border: 0;
  background: none; }
.separator
{ width: 100%;
  height: 0;
  border-top: 1px solid #D9D5CF;
  border-bottom: 1px solid #FFF;
  margin: 0 0 20px 0;}
table
{ margin: 10px 0 30px 0;}
table tr th, table tr td
{ background: #3B3B3B;
  color: #FFF;
  padding: 7px 4px;
  text-align: left; }
table tr td
{ background: #F0EFE2;
  color: #47433F;
  border-top: 1px solid #FFF;}
.scroll-indicator-controller {
  position: fixed;
  top: 50%;
  transform: translate(0, -50%);
  right: 20px;
  z-index: 2;
}
@media (max-width: 1024px) {
  .scroll-indicator-controller {
    right: 10px;
  }
}
.scroll-indicator-controller > div {
  width: 20px;
  height: 20px;
  position: relative;
  border-radius: 50%;
  border: 1px solid tomato;
  background: rgba(0, 0, 0, 0.25);
  margin: 0 0 10px 0;
  cursor: pointer;
  transition: background 0.4s ease;
  will-change: transition;
}
.scroll-indicator-controller > div span {
  color: tomato;
  position: absolute;
  right: calc(100% + 8px);
  white-space: nowrap;
  top: -1px;
  font-family: arial, sans-serif;
  font-size: 16px;
  line-height: 17px;
  width: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateX(10px);
  transition: all 0.4s ease;
  will-change: transition;
  color: #464646;
  font-weight: 600;
}
.scroll-indicator-controller > div span:after {
  content: "-----";
  padding-left: 5px;
  letter-spacing: -2px;
  font-family: arial, sans-serif;
  vertical-align: text-top;
  font-weight: 400;
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .scroll-indicator-controller > div:hover span {
    width: auto;
    opacity: 1;
    overflow: visible;
    transform: translateX(0px);
  }
}
@media (hover: none) {
    .scroll-indicator-controller > div span {
      display: none;
    }
}
.scroll-indicator-controller.indi-mobile > div span {
  display: none;
}
.scroll-indicator-controller > div.active {
  background: tomato;
  border-color: rgba(0, 0, 0, 0.25);
}
@supports (-ms-ime-align:auto) {
  .scroll-indicator-controller > div span {
    transition: opacity 0.4s ease;
  }
}
</style>
<body>
<h1> Example </h1>
<h2> Vertical Dot Navigation Plugin </h2>
  <div id="main">
    <div id="header">
      <div id="logo">
        <div id="logo_text">       
        </div>
      </div>
      <div id="menubar">
        <ul id="menu">
          <li class="selected"><a href="#">Home</a></li>
          <li><a href="#">Examples</a></li>
          <li><a href="#">A Page</a></li>
          <li><a href="#">Another Page</a></li>
          <li><a href="#">Contact Us</a></li>
        </ul>
      </div>
    </div>
    <div id="site_content">
      <div id="content">
        <div>
            <div class="scroll-indicator" id="section01" data-scroll-indicator-title="First Section"></div>
        </div>
        <div>
            <h1>Welcome to section 1</h1>
        </div>
        <div>
            <div class="scroll-indicator" id="section02" data-scroll-indicator-title="Another Section"></div>
        </div>
        <div>
            <h1>Welcome to section 2</h1>
        </div>
        <div>
            <div class="scroll-indicator" id="section03" data-scroll-indicator-title=""></div>
        </div>
        <div>
           <h1>Welcome to section 3 - Hello world</h1>       
        </div>
<div class="scroll-indicator" id="section04" data-scroll-indicator-title="Hello World"></div>
<div>
  <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
</div>
      </div>
    </div>
  </div>
<footer> <h2>Footer </h2> </footer>
<script>
function dotsThrottle(func, wait, options) {
    var context, args, result;
    var timeout = null;
    var previous = 0;
    if (!options) options = {};
    var later = function () {
        previous = options.leading === false ? 0 : Date.now();
        timeout = null;
        result = func.apply(context, args);
        if (!timeout) context = args = null;
    };
    return function () {
        var now = Date.now();
        if (!previous && options.leading === false) previous = now;
        var remaining = wait - (now - previous);
        context = this;
        args = arguments;
        if (remaining <= 0 || remaining > wait) {
            if (timeout) {
                clearTimeout(timeout);
                timeout = null;
            }
            previous = now;
            result = func.apply(context, args);
            if (!timeout) context = args = null;
        } else if (!timeout && options.trailing !== false) {
            timeout = setTimeout(later, remaining);
        }
        return result;
    };
}
let dotFixedNavPresent = false;
let dotFixedNavId = '';
let dotFixedNavUp = false;
function easyScrollDots(dotfixedOptions) {
    let scrollIndi = document.querySelectorAll('.scroll-indicator');
    dotfixedOptions.fixedNav === true ? dotFixedNavPresent = true : dotFixedNavPresent;
    dotfixedOptions.fixedNavId === '' ? dotFixedNavId = false : dotFixedNavId = dotfixedOptions.fixedNavId;
    dotfixedOptions.fixedNavUpward === true ? dotFixedNavUp = true : dotFixedNavUp;
    if (scrollIndi.length) {
        const scrollIndiTemplate = '<div class="scroll-indicator-controller"><span></span></div>';
        document.querySelector('body').lastElementChild.insertAdjacentHTML('afterend', scrollIndiTemplate);
        const scrollIndiController = document.querySelector('.scroll-indicator-controller');
        if ((typeof window.orientation !== "undefined") || (navigator.userAgent.indexOf('IEMobile') !== -1)) { scrollIndiController.classList.add('indi-mobile'); }
        const scrollIndiElems = Array.prototype.slice.call(scrollIndi);
        scrollIndiElems.forEach(function (e, i) {
            const scrollIndiId = e.getAttribute('id');
            const scrollIndiTitle = e.getAttribute('data-scroll-indicator-title');
            let firstActiveClass = '';
            if (i == 0) {
                firstActiveClass = 'active';
            }
            scrollIndiController.lastElementChild.insertAdjacentHTML('afterend', '<div class="' + firstActiveClass + '" data-indi-controller-id="' + scrollIndiId + '" onclick="scrollIndiClicked(\'' + scrollIndiId + '\');"><span>' + scrollIndiTitle + '</span><div></div></div>');
        });
        const scrollIndiControllerDots = scrollIndiController.querySelectorAll('[data-indi-controller-id]');
        var handleIndiScroll = dotsThrottle(function () {
            let indiScrollTopCollection = {};
            scrollIndiElems.forEach(function (e) {
                const scrollIndiIdScroll = e.getAttribute('id');
                const indiScrollTop = e.getBoundingClientRect().top;
                indiScrollTopCollection[scrollIndiIdScroll] = indiScrollTop;
            });
            const indiOffsetValues = Object.keys(indiScrollTopCollection).map(function (itm) { return indiScrollTopCollection[itm]; });
            const indiOffsetMin = function () {
                const indiRemoveMinuses = indiOffsetValues.filter(function (x) { return x > -150; });
                return Math.min.apply(null, indiRemoveMinuses);
            }; 
            Object.keys(indiScrollTopCollection).forEach(function (e) {
                if (indiScrollTopCollection[e] == indiOffsetMin()) {
                    Array.prototype.forEach.call(scrollIndiControllerDots, function (el) {
                        if (el.classList.contains('active')) {
                            el.classList.remove('active');
                        }
                    });
                    scrollIndiController.querySelector('[data-indi-controller-id="' + e + '"]').classList.add('active');
                }
            });
        }, 300);
      window.onscroll = function() {
          handleIndiScroll();
      };
    }
}   
function scrollIndiClicked(indiId) {
    if (window.jQuery) {     
        if (dotFixedNavPresent === true && dotFixedNavId.length) {
            const dotNavHeightElem = document.getElementById(dotFixedNavId);
            const dotNavHeight = dotNavHeightElem.clientHeight;
            const dotDocumentHtml = $('html, body');
            const indiElement = $('#' + indiId);    
            if (dotFixedNavUp === true) {
                dotDocumentHtml.animate({
                    scrollTop: indiElement.offset().top
                }, 700);
                const scrollPos = document.body.getBoundingClientRect().top;
                setTimeout(function () {
                    if (document.body.getBoundingClientRect().top > scrollPos) {
                        dotDocumentHtml.animate({
                            scrollTop: indiElement.offset().top - dotNavHeight
                        }, 400);
                    }
                }, 400);
            }
            else {
                dotDocumentHtml.animate({
                    scrollTop: indiElement.offset().top - dotNavHeight
                }, 700);
            }
        }
        else {
            $('html, body').animate({
                scrollTop: $('#' + indiId).offset().top
            }, 700);
        }    
    }
    else {
        if (dotFixedNavPresent === true && dotFixedNavId.length) {
            const dotNavHeightElem = document.getElementById(dotFixedNavId);
            const dotNavHeight = dotNavHeightElem.clientHeight;
            const indiElement = document.getElementById(indiId);
            if (dotFixedNavUp === true) {
                window.scrollTo({
                    top: indiElement.offsetTop,
                    left: 0,
                    behavior: 'smooth'
                });
                const scrollPos = document.body.getBoundingClientRect().top;
                setTimeout(function () {
                    if (document.body.getBoundingClientRect().top > scrollPos) {
                        window.scrollTo({
                            top: indiElement.offsetTop - dotNavHeight,
                            left: 0,
                            behavior: 'smooth'
                        });
                    }
                }, 400);
            }
            else {
                window.scrollTo({
                    top: indiElement.offsetTop - dotNavHeight,
                    left: 0,
                    behavior: 'smooth'
                });
            }
        }
    }
}
easyScrollDots({
  'fixedNav': false,
  'fixedNavId': '',
  'fixedNavUpward': false
});
</script>
</body>
</html>
说明
在上面的示例中，我们创建了一个垂直点导航插件的示例。
输出
以下是这个例子的输出。
下一主题jQuery jTippy Tooltip 插件
垂直点导航插件

示例 1

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery 教程

jQuery 效果

jQuery HTML/CSS

jQuery 表单

jQuery 事件

jQuery 杂项

jQuery 问题

杂项

jQuery 多选题

jQuery UI

面试题

垂直点导航插件

示例 1

相关帖子

JQuery 输入掩码电话号码验证

使用 jQuery 的前后滑块

如何使用 jQuery 更改背景图片

Skype 聊天 jQuery 插件

JQuery 页面堆砌

JQuery 左侧菜单

使用 Jquery 的带有拖动和滚轮的轮播

jQuery 年龄验证插件

JQuery 裁剪插件

jQuery 原位确认框

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器
