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 相关文章推荐
JavaScript中void(0)的具体含义解释
Feb 27 Javascript
zShowBox 图片放大展示jquery版 兼容性
Sep 24 Javascript
字符串的replace方法应用浅析
Dec 06 Javascript
JS代码判断IE6,IE7,IE8,IE9的函数代码
Aug 02 Javascript
动态的绑定事件addEventListener方法的使用
Jan 24 Javascript
删除条目时弹出的确认对话框
Jun 05 Javascript
javascript中声明函数的方法及调用函数的返回值
Jul 22 Javascript
jQuery中:checked选择器用法实例
Jan 04 Javascript
JS+CSS3实现超炫的散列画廊特效
Jul 16 Javascript
Angular2学习教程之组件中的DOM操作详解
May 28 Javascript
解决vue项目使用font-awesome,build后路径的问题
Sep 01 Javascript
解决使用layui的时候form表单中的select等不能渲染的问题
Sep 18 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
PHP4实际应用经验篇(8)
2006/10/09 PHP
php cookie用户登录的详解及实例代码
2017/01/03 PHP
php7安装yar扩展的方法详解
2017/08/03 PHP
PHP 枚举类型的管理与设计知识点总结
2020/02/13 PHP
js实现双向链表互联网机顶盒实战应用实现
2011/10/28 Javascript
Javascript对象中关于setTimeout和setInterval的this介绍
2012/07/21 Javascript
为什么Node.js会这么火呢?Node.js流行的原因
2014/12/01 Javascript
JQuery自动触发事件的方法
2015/06/13 Javascript
Javascript中arguments对象的详解与使用方法
2016/10/04 Javascript
jQuery图片切换动画特效
2016/11/02 Javascript
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
2020/10/26 Javascript
Node.js使用Express创建Web项目详细教程
2017/03/31 Javascript
js评分组件使用详解
2017/06/06 Javascript
Vue中使用vux配置代码详解
2018/09/16 Javascript
小程序云开发实现数据库异步操作同步化
2019/05/18 Javascript
vue中添加与删除关键字搜索功能
2019/10/12 Javascript
用Angular实现一个扫雷的游戏示例
2020/05/15 Javascript
python基础教程之循环介绍
2014/08/29 Python
使用Python3制作TCP端口扫描器
2017/04/17 Python
python tkinter界面居中显示的方法
2018/10/11 Python
WxPython建立批量录入框窗口
2019/02/27 Python
python移位运算的实现
2019/07/15 Python
简单了解pytest测试框架setup和tearDown
2020/04/14 Python
解决pycharm安装第三方库失败的问题
2020/05/09 Python
用Python自动清理系统垃圾的实现
2021/01/18 Python
基于canvas的骨骼动画的示例代码
2018/06/12 HTML / CSS
 Alo Yoga官网:购买瑜伽服装
2018/06/17 全球购物
建材投资建议书
2014/05/16 职场文书
企业安全生产标语
2014/06/06 职场文书
2015年元旦演讲稿
2014/09/12 职场文书
幼儿园感恩节活动方案
2014/10/06 职场文书
小学生组织委员竞选稿
2015/11/21 职场文书
大学生入党自我鉴定范文
2019/06/21 职场文书
AngularJS实现多级下拉框
2022/03/25 Javascript
python处理json数据文件
2022/04/11 Python
华为HarmonyOS3.0强在哪? 看看鸿蒙3.0这7个小功能
2023/01/09 数码科技