jQuery垂直圆点导航插件

jQuery垂直圆点导航插件

jQuery为程序员提供了一个漂亮的、轻量级的、单页的、响应式的垂直点导航插件,有助于导航或滚动浏览长网页。该插件可以识别网站中的页面或部分的数量,并相应地添加点来点击滚动浏览相应的内容。

请下载垂直点导航插件,并在你的工作文件夹中包含所需的文件库,如以下代码的头部部分所示。
下载链接 : https://github.com/maiamachine/jquery-vertical-dot-navigation

例子1:在下面的例子中,使用jQuery展示了verticalDotNav()方法的非常基本的调用。不同的页面内容被提供在HTML页面的不同部分。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  
  <title>jQuery Vertical Dot Navigation Plugin</title> 
  <link rel="stylesheet" href="bootstrap.css"> 
  <link rel="stylesheet" href="styles.css">
  
  <!--required stylesheet file of plugin-->
  <link rel="stylesheet"
        href="jq-vertical-dot-navigation.css">
  
  <!--Required javascript file dependencies-->
  <script src="jquery.min.js"></script>
  <script src="jq-vertical-dot-nav.js"></script>
  
    <script>
           (document).ready(function(){
               ('section').verticalDotNav(); 
             
           })
    </script>
</head>
<body>
   
<section id="section-1" class="row">
    <div class="col-xs-10 col-xs-offset-1">
    <h3>jQuery Vertical Dot Navigation Plugin</h3>
      
    </div>
</section>
<section id="section-2" class="row">
    <div class="col-xs-8 col-xs-offset-2 col-md-6 col-md-offset-3">
    <p>Amazon… “Hire and Develop the Best”. 
One of the Big Four Tech Companies founder
 Jeff Bezos is now the richest person on this planet.
 Jeff was an engineer and 25 years ago when Jeff pitched 
his idea of starting a business online to his boss 
David (Founder of DE Shaw) it was rejected indirectly.
 Well, Jeff quit the job and started Amazon from his 
garage in Seattle Washington.Today the company is making
 billions of dollars and fulfilling the customer’s 
needs worldwide in various areas.</p>
    </div>
</section>
<section id="section-3" class="row">
    <div class="col-xs-10 col-xs-offset-1 col-md-6 col-md-offset-3">
    <p>As the placement season is back so are we to help you ace
 the interview. We have selected some most commonly asked and 
must do practice problems for you. You can also take part in our
mock placement contests which will help you learn different topics and 
practice at the same time, simulating the feeling of a real placement
 test environment.</p>
    </div>    
</section>
</body>
</html>

输出:
jQuery垂直圆点导航插件

例子2:在下面的例子中,verticalDotNav()方法的各种选项被设置为如下所示。请注意图像输出中点的排列和滚动速度,并根据要求在你的代码中进行相应的定制。

<!doctype html>
  
<html lang="en">
<head>
  <meta charset="utf-8">
  
  <title>jQuery Vertical Dot Navigation Plugin</title> 
  <link rel="stylesheet" href="bootstrap.css"> 
  <link rel="stylesheet" href="styles.css">
  
  <!--required stylesheet file of plugin-->
  <link rel="stylesheet" href="jq-vertical-dot-navigation.css">
  
  <!--Required javascript file dependencies-->
  <script src="jquery.min.js"></script>
  <script src="jq-vertical-dot-nav.js"></script>
  
    <script>
           (document).ready(function(){
               ('section').verticalDotNav({
               align : "left", // Options are 'right' or 'left'
               scroll_speed : 2500, // The time in milliseconds
               dot_size: 30,
               dot_style: 'circle', // Options are 'circle' or 'square'
               dot_color: "#e9e9e9",
               nav_color: "#000000"
              
            });            
           })
    </script>
</head>
<body>
   
<section id="section-1" class="row">
    <div class="col-xs-10 col-xs-offset-1">
    <h3>jQuery Vertical Dot Navigation Plugin</h3>
      
    </div>
</section>
<section id="section-2" class="row">
    <div class="col-xs-8 col-xs-offset-2 col-md-6 col-md-offset-3">
    <p>Amazon… “Hire and Develop the Best”. One of the Big Four
 Tech Companies founder Jeff Bezos is now the richest person 
on this planet.
    Jeff was an engineer and 25 years ago when Jeff pitched 
his idea of starting a business online to his boss David 
(Founder of DE Shaw) 
    it was rejected indirectly. Well, Jeff quit the job and
 started Amazon from his garage in Seattle Washington.
    Today the company is making billions of dollars and
 fulfilling the customer’s needs worldwide in various areas.</p>
    </div>
</section>
<section id="section-3" class="row">
    <div class="col-xs-10 col-xs-offset-1 col-md-6 col-md-offset-3">
      
    <p> As the placement season is back so are we to help you ace 
the interview.
        We have selected some most commonly asked and must do 
practice problems for you.
        You can also take part in our mock placement contests 
which will help you learn different topics and practice at the same time,
        simulating the feeling of a real placement test environment.</p>
    </div>    
</section>
</body>
</html>

jQuery垂直圆点导航插件

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程