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程序设计有所帮助。

Javascript 相关文章推荐
使用Microsoft Ajax Minifier减小JavaScript文件大小的方法
Apr 01 Javascript
五段实用的js高级技巧
Dec 20 Javascript
jquery操作cookie插件分享
Jan 14 Javascript
createTextRange()的使用示例含文本框选中部分文字内容
Feb 24 Javascript
jquery实现图片预加载
Dec 25 Javascript
下一代Bootstrap的5个特点 超酷炫!
Jun 17 Javascript
完美实现八种js焦点轮播图(下篇)
Apr 20 Javascript
javascript实现简单的ajax封装示例
Dec 28 Javascript
Vue开发过程中遇到的疑惑知识点总结
Jan 20 Javascript
JavaScript提高加载和执行效率的方法
Feb 03 Javascript
从零开始最小实现react服务器渲染详解
Jan 26 Javascript
VUE 自定义组件模板的方法详解
Aug 30 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
You might like
php 随机排序广告的实现代码
2011/05/09 PHP
ThinkPHP3.1新特性之命名范围的使用
2014/06/19 PHP
分享php邮件管理器源码
2016/01/06 PHP
PHP获取input输入框中的值去数据库比较显示出来
2016/11/16 PHP
深入理解PHP的远程多会话调试
2017/09/21 PHP
基于laravel where的高级使用方法
2019/10/10 PHP
js/html光标定位的实现代码
2013/09/23 Javascript
jquery live()重复绑定的解决方法介绍
2014/01/03 Javascript
理解javascript中的原型和原型链
2015/07/30 Javascript
jQuery实现的多级下拉菜单效果代码
2015/08/24 Javascript
javascript移动开发中touch触摸事件详解
2016/03/18 Javascript
Bootstrap中点击按钮后变灰并显示加载中实例代码
2016/09/23 Javascript
微信小程序  modal详解及实例代码
2016/11/09 Javascript
nodejs结合Socket.IO实现的即时通讯功能详解
2018/01/12 NodeJs
深入理解JavaScript和TypeScript中的class
2018/04/22 Javascript
详解webpack引入第三方库的方式以及注意事项
2019/01/15 Javascript
React实现全选功能
2020/08/25 Javascript
nestjs返回给前端数据格式的封装实现
2021/02/22 Javascript
python开发环境PyScripter中文乱码问题解决方案
2016/09/11 Python
mac下给python3安装requests库和scrapy库的实例
2018/06/13 Python
django rest framework 数据的查找、过滤、排序的示例
2018/06/25 Python
关于python下cv.waitKey无响应的原因及解决方法
2019/01/10 Python
matplotlib实现显示伪彩色图像及色度条
2019/12/07 Python
pytorch实现mnist数据集的图像可视化及保存
2020/01/14 Python
python使用requests库爬取拉勾网招聘信息的实现
2020/11/20 Python
python自动化办公操作PPT的实现
2021/02/05 Python
澳大利亚最大的网上油画销售画廊:Direct Art Australia
2018/04/15 全球购物
仓库理货员岗位职责
2013/12/18 职场文书
学习标兵获奖感言
2014/02/20 职场文书
教师四风问题对照检查材料
2014/09/26 职场文书
四风问题党员个人整改措施
2014/10/27 职场文书
诚信考试承诺书范文
2015/04/29 职场文书
电影圆明园观后感
2015/06/03 职场文书
小学毕业感言100字
2015/07/30 职场文书
幼儿园安全教育随笔
2015/08/14 职场文书
2015年街道办事处团委工作总结
2015/10/14 职场文书