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知识点收藏
Feb 22 Javascript
jquery offset函数应用实例
Nov 14 Javascript
JavaScript 实现鼠标拖动元素实例代码
Feb 24 Javascript
JS未跨域操作iframe里的DOM
Jun 01 Javascript
基于JS实现横线提示输入验证码随验证码输入消失(js验证码的实现)
Oct 27 Javascript
jQuery 的 ready()的纯js替代方法
Nov 20 Javascript
JS双击变input框批量修改内容
Dec 12 Javascript
JS前端开发判断是否是手机端并跳转操作(小结)
Feb 05 Javascript
jQuery插件echarts实现的去掉X轴、Y轴和网格线效果示例【附demo源码下载】
Mar 04 Javascript
微信小程序结合mock.js实现后台模拟及调试
Mar 28 Javascript
详解如何给React-Router添加路由页面切换时的过渡动画
Apr 25 Javascript
在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框)
Sep 11 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
在Windows系统上安装PHP运行环境文字教程
2010/07/19 PHP
解析htaccess伪静态的规则
2013/06/18 PHP
php数组去除空值函数分享
2015/02/02 PHP
PHP数学运算函数大汇总(经典值得收藏)
2016/04/01 PHP
PHP读取XML格式文件的方法总结
2017/02/27 PHP
js传值 判断
2006/10/26 Javascript
jQuery 使用手册(七)
2009/09/23 Javascript
js查错流程归纳
2012/05/04 Javascript
JavaScript:Div层拖动效果实例代码
2013/08/06 Javascript
js动态添加表格数据使用insertRow和insertCell实现
2014/05/22 Javascript
jQuery.Highcharts.js绘制柱状图饼状图曲线图
2015/03/14 Javascript
jquery实现经典的淡入淡出选项卡效果代码
2015/09/22 Javascript
JavaScript给input的value赋值引发的关于基本类型值和引用类型值问题
2015/12/07 Javascript
jQuery自动完成插件completer附源码下载
2016/01/04 Javascript
js实现为a标签添加事件的方法(使用闭包循环)
2016/08/02 Javascript
浅谈JavaScript的自动垃圾收集机制
2016/12/15 Javascript
bootstrap轮播图示例代码分享
2017/05/17 Javascript
原生JavaScript实现的简单省市县三级联动功能示例
2017/05/27 Javascript
vue.js的手脚架vue-cli项目搭建的步骤
2017/08/30 Javascript
webpack将js打包后的map文件详解
2018/02/22 Javascript
angular基于ng-alain定义自己的select组件示例
2018/02/23 Javascript
JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
2018/07/30 Javascript
vue基于better-scroll实现左右联动滑动页面
2020/06/30 Javascript
使用python3.5仿微软记事本notepad
2016/06/15 Python
python并发和异步编程实例
2018/11/15 Python
Python学习笔记之变量、自定义函数用法示例
2019/05/28 Python
如何基于python操作json文件获取内容
2019/12/24 Python
python模式 工厂模式原理及实例详解
2020/02/11 Python
Python3爬虫中识别图形验证码的实例讲解
2020/07/30 Python
css3动画 小球滚动 js控制动画暂停
2019/11/29 HTML / CSS
欧舒丹加拿大官网:L’Occitane加拿大
2017/10/29 全球购物
求职信格式要求
2014/05/23 职场文书
教师批评与自我批评范文
2014/10/15 职场文书
2015年评职称工作总结范文
2015/04/20 职场文书
2015年小学教科研工作总结
2015/07/20 职场文书
初二物理教学反思
2016/02/19 职场文书