jquery实现浮动的侧栏实例

前端技术 2023/09/06 JavaScript

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

<!DOCTYPE html>
<html>
 <head>
  <title>jQuery stickysidebar plugin</title>
 <link href=\'http://fonts.googleapis.com/css?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\" width=\"126\"
       height=\"126\" alt=\"product image\" />
      </li>
      <li class=\"end\">
       <h3>产品2</h3>
       <img src=\"images/product.png\" width=\"126\" height=\"126\" alt=\"product image\" />
      </li>
      <li>
       <h3>产品3</h3>
       <img src=\"images/product.png\" width=\"126\" height=\"126\" alt=\"product image\" />
      </li>
      <li>
       <h3>产品4</h3>
       <img src=\"images/product.png\" width=\"126\" height=\"126\" alt=\"product image\" />
      </li>
      <li class=\"end\">
       <h3>产品5</h3>
       <img src=\"images/product.png\" width=\"126\" height=\"126\" 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程序设计有所帮助。

本文地址：https://www.stayed.cn/item/16395

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案