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 相关文章推荐
基于Jquery的将DropDownlist的选中值赋给label的实现代码
May 06 Javascript
Javascript数组的排序 sort()方法和reverse()方法
Jun 04 Javascript
向当前style sheet中插入一个新的style实现方法
Apr 01 Javascript
JavaScript的strict模式与with关键字介绍
Feb 08 Javascript
jQuery.holdReady()方法用法实例
Dec 27 Javascript
javascript模拟命名空间
Apr 17 Javascript
JavaScript中的slice()方法使用详解
Jun 06 Javascript
Ubuntu系统下Angularjs开发环境安装
Sep 01 Javascript
Vue中util的工具函数实例详解
Jul 08 Javascript
微信小程序 云开发模糊查询实现解析
Sep 02 Javascript
微信自定义分享链接信息(标题,图片和内容)实现过程详解
Sep 04 Javascript
js实现点击按钮随机生成背景颜色
Sep 05 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中利用XML技术构造远程服务(下)
2006/10/09 PHP
php 图片上添加透明度渐变的效果
2009/06/29 PHP
php常用ODBC函数集(详细)
2013/06/24 PHP
PHP计算一年多少个星期和每周的开始和结束日期
2014/07/01 PHP
PHP使用静态方法的几个注意事项
2014/09/16 PHP
使用Composer安装Yii框架的方法
2016/03/15 PHP
php实现微信公众号企业转账功能
2018/10/01 PHP
PHP实现获取ip地址的5种方法,以及插入用户登录日志操作示例
2019/02/28 PHP
php实现JWT(json web token)鉴权实例详解
2019/11/05 PHP
JavaScript网页制作特殊效果用随机数
2007/05/22 Javascript
关于UTF-8的客户端用AJAX方式获取GB2312的服务器端乱码问题的解决办法
2010/11/30 Javascript
jQuery简单实现日历的方法
2015/05/04 Javascript
javascript实现点击后变换按钮显示文字的方法
2015/05/13 Javascript
简单介绍JavaScript数据类型之隐式类型转换
2015/12/28 Javascript
jQuery通过ajax请求php遍历json数组到table中的代码(推荐)
2016/06/12 Javascript
Javascript表单特效之十大常用原理性样例代码大总结
2016/07/12 Javascript
js实现表单提交后不重新刷新当前页面
2016/11/30 Javascript
Vue.js仿Metronic高级表格(二)数据渲染
2017/04/19 Javascript
关于foreach循环中遇到的问题小结
2017/05/08 Javascript
基于twbsPagination.js分页插件使用心得(分享)
2017/10/21 Javascript
Vue项目中使用Vux的安装过程
2018/05/01 Javascript
详解ES6 Promise的生命周期和创建
2019/08/18 Javascript
JS桶排序的简单理解与实现方法示例
2019/11/25 Javascript
在Vue中使用Echarts可视化库的完整步骤记录
2020/11/18 Vue.js
Python 除法小技巧
2008/09/06 Python
Python中为feedparser设置超时时间避免堵塞
2014/09/28 Python
python2 与 python3 实现共存的方法
2018/07/12 Python
详解Python_shutil模块
2019/03/15 Python
三个python爬虫项目实例代码
2019/12/28 Python
Python日志logging模块功能与用法详解
2020/04/09 Python
详解Python流程控制语句
2020/10/28 Python
大学生专业个人学习的自我评价
2013/10/26 职场文书
优秀班组长事迹
2014/05/31 职场文书
2015年银行客户经理工作总结
2015/04/01 职场文书
小学四年级作文之人物作文
2019/11/06 职场文书
浅析CSS在DevTools 中架构演变
2021/10/05 HTML / CSS