编程 Javascript

jquery实现浮动的侧栏实例

Posted in Javascript onJune 25, 2015

本文实例讲述了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程序设计有所帮助。

jquery实现浮动的侧栏实例

- Author -

任意球

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jQuery EasyUI API 中文文档 - Dialog对话框

Nov 15 Javascript

鼠标移到图片上变大显示而不是放大镜效果

Jun 15 Javascript

JavaScript 闭包机制详解及实例代码

Oct 10 Javascript

Vue实现双向绑定的方法

Dec 22 Javascript

JS 实现计算器详解及实例代码（一）

Jan 08 Javascript

jQuery实现获取选中复选框的值实例详解

Jun 28 jQuery

详谈js的变量提升以及使用方法

Oct 06 Javascript

js使用formData实现批量上传

Mar 27 Javascript

微信小程序 Storage更新详解

Jul 16 Javascript

微信小程序sessionid不一致问题解决

Aug 30 Javascript

Antd的Table组件嵌套Table以及选择框联动操作

Oct 24 Javascript

React-vscode使用jsx语法的问题及解决方法

Jun 21 Javascript

JQuery实现鼠标移动图片显示描述层的方法

Jun 25 #Javascript

Node.js中的process.nextTick使用实例

Jun 25 #Javascript

Ajax中解析Json的两种方法对比分析

Jun 25 #Javascript

新手快速学习JavaScript免费教程资源汇总

Jun 25 #Javascript

JavaScript中字符串(string)转json的2种方法

Jun 25 #Javascript

深入理解JavaScript编程中的原型概念

Jun 25 #Javascript

Backbone.js 0.9.2 源码注释中文翻译版

Jun 25 #Javascript