快捷導(dǎo)航

jquery實(shí)現(xiàn)浮動的側(cè)欄實(shí)例

更新時間：2015年06月25日 10:38:19 作者：任意球

這篇文章主要介紹了jquery實(shí)現(xiàn)浮動的側(cè)欄,實(shí)例分析了基于jQuery的stickySidebar插件實(shí)現(xiàn)浮動層的相關(guān)技巧,需要的朋友可以參考下

本文實(shí)例講述了jquery實(shí)現(xiàn)浮動的側(cè)欄。分享給大家供大家參考。具體如下：

<!DOCTYPE html>
<html>
 <head>
  <title>jQuery stickysidebar plugin</title>
 <link  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>產(chǎn)品列表</h2>
     <ul id="products">
      <li>
       <h3>產(chǎn)品1</h3>
       <img src="images/product.png" width="126"
       height="126" alt="product image" />
      </li>
      <li class="end">
       <h3>產(chǎn)品2</h3>
       <img src="images/product.png" width="126" height="126" alt="product image" />
      </li>
      <li>
       <h3>產(chǎn)品3</h3>
       <img src="images/product.png" width="126" height="126" alt="product image" />
      </li>
      <li>
       <h3>產(chǎn)品4</h3>
       <img src="images/product.png" width="126" height="126" alt="product image" />
      </li>
      <li class="end">
       <h3>產(chǎn)品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程序設(shè)計有所幫助。

您可能感興趣的文章:

相關(guān)文章

jquery序列化方法實(shí)例分析
這篇文章主要介紹了jquery序列化方法,較為詳細(xì)的分析了jQuery實(shí)現(xiàn)序列化涉及的相關(guān)技巧,需要的朋友可以參考下
2015-06-06
jquery delay（）介紹及使用指南
.delay()是用來在jQuery動畫效果和類似隊列中是最好的。但是，由于其本身的限制，比如無法取消延時——.delay()，它不是JavaScript的原生 setTimeout函數(shù)的替代品，這可能是更適合某些使用情況。
2014-09-09
jQuery實(shí)現(xiàn)contains方法不區(qū)分大小寫的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)contains方法不區(qū)分大小寫的方法,實(shí)例分析了針對contains方法的重寫技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-02-02
jQuery動態(tài)添加可拖動元素完整實(shí)例(附demo源碼下載)
這篇文章主要介紹了jQuery動態(tài)添加可拖動元素的方法,可實(shí)現(xiàn)簡單的點(diǎn)擊添加元素,并且添加的元素可進(jìn)行拖動操作.涉及jQuery響應(yīng)鼠標(biāo)事件動態(tài)操作頁面元素的相關(guān)技巧,需要的朋友可以參考下
2016-06-06
使用jQuery模板來展現(xiàn)json數(shù)據(jù)的代碼
通常我們在使用ajax的時候，都避免不了和json這種輕巧的數(shù)據(jù)格式打交道。可是往往手動的去解析json，構(gòu)建HTML，比較麻煩?，F(xiàn)在有了這個插件，就能像Extjs那樣使用模板解析json了。
2010-10-10
JQuery解析XML的方法小結(jié)
這篇文章主要介紹了JQuery解析XML的方法,總結(jié)分析了常用的jQuery解析xml文件的相關(guān)技巧,需要的朋友可以參考下
2016-04-04
使用jQuery validate 驗(yàn)證注冊表單實(shí)例演示
Validation是jQuery的插件，提供的方法可以大大簡化驗(yàn)證表單的工作，接下來為大家詳細(xì)介紹下使用方法，感興趣的各位可以參考下哈
2013-03-03
jquery實(shí)現(xiàn)的分頁顯示功能示例
這篇文章主要介紹了jquery實(shí)現(xiàn)的分頁顯示功能,涉及jQuery的ajax交互及頁面元素屬性動態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2019-08-08
來自國外的14個圖片放大編輯的jQuery插件整理
這里就是基于jQuery 的14個圖片放大編輯插件。需要的朋友可以參考下。
2010-10-10
js原生態(tài)函數(shù)中使用jQuery中的 $(this)無效的解決方法
今天遇到一個聽郁悶的問題，正如title所說 js中原生態(tài)函數(shù)在jQuery 中使用 $(this) 被解析成undefined
2011-05-05