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 相关文章推荐
IE和Firefox在JavaScript应用中的兼容性探讨
Apr 01 Javascript
地址栏上的一段语句,改变页面的风格。(教程)
Apr 02 Javascript
js实现权限树的更新权限时的全选全消功能
Feb 17 Javascript
IE和FireFox(FF)中js和css的不同
Apr 13 Javascript
jquery 简单的进度条实现代码
Mar 11 Javascript
当鼠标滑过文本框自动选中输入框内容的JS代码分享
Nov 26 Javascript
深入分析Javascript事件代理
Jan 30 Javascript
分享我对JS插件开发的一些感想和心得
Feb 04 Javascript
JS+CSS实现下拉刷新/上拉加载插件
Mar 31 Javascript
讲解vue-router之什么是编程式路由
May 28 Javascript
webpack css加载和图片加载的方法示例
Sep 11 Javascript
vue store之状态管理模式的详细介绍
Jun 13 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
当年上海收录机产品生产,进口和价格情况
2021/03/04 无线电
用PHP实现图象锐化代码
2007/06/14 PHP
学习php设计模式 php实现观察者模式(Observer)
2015/12/09 PHP
thinkPHP自动验证机制详解
2016/12/05 PHP
php设计模式之状态模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
javascript时间自动刷新实现原理与步骤
2013/01/06 Javascript
jQuery滚动加载图片效果的实现
2013/03/06 Javascript
提交按钮的name='submit'引起的js失效问题及原因
2015/02/25 Javascript
深入浅析JS是按值传递还是按引用传递(推荐)
2016/09/18 Javascript
利用angularjs1.4制作的简易滑动门效果
2017/02/28 Javascript
JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)
2017/06/09 Javascript
angular1.x ui-route传参的三种写法小结
2018/08/31 Javascript
改变layer confirm弹窗按钮的颜色方法
2019/09/12 Javascript
Python编码时应该注意的几个情况
2013/03/04 Python
浅谈python 导入模块和解决文件句柄找不到问题
2018/12/15 Python
Python list列表中删除多个重复元素操作示例
2019/02/27 Python
Python利用lxml模块爬取豆瓣读书排行榜的方法与分析
2019/04/15 Python
Django数据库类库MySQLdb使用详解
2019/04/28 Python
python pytest进阶之conftest.py详解
2019/06/27 Python
python启动应用程序和终止应用程序的方法
2019/06/28 Python
Python socket连接中的粘包、精确传输问题实例分析
2020/03/24 Python
快速解决jupyter notebook启动需要密码的问题
2020/04/21 Python
python3的pip路径在哪
2020/06/23 Python
Python3实现建造者模式的示例代码
2020/06/28 Python
俄罗斯便宜的在线服装商店:GroupPrice
2020/04/10 全球购物
介绍一下SQL注入攻击的种类和防范手段
2012/02/18 面试题
如果Session Bean得Remove方法一直都不被调用会怎么样
2012/07/14 面试题
《长征》教学反思
2014/04/27 职场文书
计算机网络专业自荐书
2014/06/09 职场文书
纪念九一八爱国演讲稿600字
2014/09/14 职场文书
夫妻分居协议书范本(有子女版)
2014/11/01 职场文书
出国留学单位推荐信
2015/03/26 职场文书
2016年暑期见闻作文
2015/11/25 职场文书
Python opencv缺陷检测的实现及问题解决
2021/04/24 Python
MySQL中order by的执行过程
2022/06/05 MySQL
MyBatis XPathParser解析器使用范例详解
2022/07/15 Java/Android