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(jquery)利用函数修改全局变量的代码
Nov 02 Javascript
javascript 面向对象全新理练之原型继承
Dec 03 Javascript
jquery 实现返回顶部功能
Nov 17 Javascript
JavaScript三元运算符的多种使用技巧
Apr 16 Javascript
js面向对象之公有、私有、静态属性和方法详解
Apr 17 Javascript
详解jQuery插件开发方式
Nov 22 Javascript
ECMAScript6--解构
Mar 30 Javascript
JS库之Particles.js中文开发手册及参数详解
Sep 13 Javascript
angular4中*ngFor不能对返回来的对象进行循环的解决方法
Sep 12 Javascript
一份超级详细的Vue-cli3.0使用教程【推荐】
Nov 15 Javascript
js根据后缀判断文件文件类型的代码
May 09 Javascript
Openlayers实现测量功能
Sep 25 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 输出双引号&quot;与单引号'的方法
2010/05/09 PHP
php中数据库连接方式pdo和mysqli对比分析
2015/02/25 PHP
Django中的cookie与session操作实例代码
2017/08/17 PHP
php适配器模式简单应用示例
2019/10/23 PHP
Pro JavaScript Techniques学习笔记
2010/12/28 Javascript
JavaScript 基本概念
2015/01/20 Javascript
EasyUI中datagrid在ie下reload失败解决方案
2015/03/09 Javascript
js+cookies实现悬浮购物车的方法
2015/05/25 Javascript
jQuery的bind()方法使用详解
2015/07/15 Javascript
jquery实现点击向下展开菜单项(伸缩导航)效果
2015/08/22 Javascript
JavaScript使用DeviceOne开发实战(四)仿优酷视频应用
2015/12/02 Javascript
原生js封装二级城市下拉列表的实现代码
2016/06/16 Javascript
jQuery 检查某个元素在页面上是否存在实例代码
2016/10/27 Javascript
微信小程序中页面FOR循环和嵌套循环
2017/06/21 Javascript
Bootstrap Tooltip显示换行和左对齐的解决方案
2017/10/11 Javascript
vue2.0 可折叠列表 v-for循环展示的实例
2018/09/07 Javascript
vue将单页面改造成多页面应用的方法
2018/11/25 Javascript
详解微信小程序文件下载--视频和图片
2019/04/24 Javascript
[02:57]DOTA2亚洲邀请赛小组赛第四日 赛事回顾
2015/02/02 DOTA
Python translator使用实例
2008/09/06 Python
Python3写入文件常用方法实例分析
2015/05/22 Python
influx+grafana自定义python采集数据和一些坑的总结
2018/09/17 Python
详解Python self 参数
2019/08/30 Python
Django调用支付宝接口代码实例详解
2020/04/04 Python
Python使用OpenPyXL处理Excel表格
2020/07/02 Python
python解压zip包中文乱码解决方法
2020/11/27 Python
多视角3D可旋转的HTML5 Logo动画
2016/03/02 HTML / CSS
MyFrenchPharma中文网:最大的法国药妆平台
2016/10/07 全球购物
豪华床上用品、床单和浴室必需品:Peacock Alley
2019/09/04 全球购物
电子商务专业个人的自我评价分享
2013/10/29 职场文书
战略合作意向书
2014/07/29 职场文书
2015年爱牙日活动总结
2015/03/23 职场文书
八年级历史教学反思
2016/02/19 职场文书
庭外和解协议书
2016/03/23 职场文书
Pandas加速代码之避免使用for循环
2021/05/30 Python
vue-cli3.x配置全局的scss的时候报错问题及解决
2022/04/30 Vue.js