Home > Article > Web Front-end > jquery实现浮动的侧栏实例_jquery

jquery实现浮动的侧栏实例_jquery

WBOYOriginal: 2016-05-16 15:52:55956browse

本文实例讲述了jquery实现浮动的侧栏。分享给大家供大家参考。具体如下：

<!DOCTYPE html>
<html>
 <head>
  <title>jQuery stickysidebar plugin</title>
 <link href='http://fonts.googleapis.com/css&#63;family=Yanone+Kaffeesatz:extralight,light,regular,bold' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="css/default.css" media="screen" />
  <link rel="stylesheet" href="css/sticky.css" media="screen" />
 </head>
 <body>
  <div id="wrap">
   <header>
    <div id="main">
     <h2>产品列表</h2>
     <ul id="products">
      <li>
       <h3>产品1</h3>
       <img src="images/product.png"    style="max-width:90%"
       height="126" alt="product image" />
      </li>
      <li class="end">
       <h3>产品2</h3>
       <img src="images/product.png"    style="max-width:90%"  style="max-width:90%" alt="product image" />
      </li>
      <li>
       <h3>产品3</h3>
       <img src="images/product.png"    style="max-width:90%"  style="max-width:90%" alt="product image" />
      </li>
      <li>
       <h3>产品4</h3>
       <img src="images/product.png"    style="max-width:90%"  style="max-width:90%" alt="product image" />
      </li>
      <li class="end">
       <h3>产品5</h3>
       <img src="images/product.png"    style="max-width:90%"  style="max-width:90%" alt="product image" />
      </li>
     </ul>
    </div>
    <div id="side">
     <div id="basket">
      <h3>这里是浮动的层~</h3>
     </div>
    </div>
  </div>
 <script src="js/jquery-1.7.1.min.js"></script>
  <script src="js/jquery.easing.1.3.js"></script>
  <script src="js/stickysidebar.jquery.js"></script>
  <script>
   $(function () {
    $("#basket").stickySidebar({
      timer: 400
     , easing: "easeInOutBack"
    });
   });
  </script>
 </body>
</html>

希望本文所述对大家的jQuery程序设计有所帮助。

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：jQuery可见性过滤器：hidden和：visibility用法实例_jqueryNext article：深入分析JSON编码格式提交表单数据_json

See more

jquery实现浮动的侧栏实例_jquery

Related articles