jquery实现浮动的侧栏实例
本文实例讲述了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程序设计有所帮助。
-
本文向大家介绍jQuery 实现侧边浮动导航菜单效果，包括了jQuery 实现侧边浮动导航菜单效果的使用技巧和注意事项，需要的朋友参考一下 单页面网页内容较多，页面长度较大，需要方便快速的在页面的不同位置进行定位，所以浮动菜单逐渐流行了起来，如下图 男装、女装、美妆等。 这种菜单功能分为两部分： 1、点击菜单项，网页滚动到对应位置，可简单通过锚点实现； 2、滚动页面的时候，菜单项的选中状态要跟着改
-
本文向大家介绍js实现左右两侧浮动广告，包括了js实现左右两侧浮动广告的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了js实现左右浮动广告展示的具体代码，供大家参考，具体内容如下 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
-
本文向大家介绍jQuery插件PageSlide实现左右侧栏导航菜单，包括了jQuery插件PageSlide实现左右侧栏导航菜单的使用技巧和注意事项，需要的朋友参考一下 jQuery左右侧栏导航菜单插件PageSlide，目前比较流行的导航菜单展现形式，特别是在手机端或者触屏页面，效果还是不错的，支持自定义展现的方向，菜单内容可自行定义，支持加载页面，或者模态的窗格中显示此页的隐藏的内容，推荐使
-
本文向大家介绍jQuery实现底部浮动窗口效果，包括了jQuery实现底部浮动窗口效果的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery实现底部浮动窗口效果。分享给大家供大家参考，具体如下： 运行效果如下图： 更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery
-
本文向大家介绍基于jQuery实现左侧菜单栏可折叠功能，包括了基于jQuery实现左侧菜单栏可折叠功能的使用技巧和注意事项，需要的朋友参考一下 今天给大家介绍一下左侧菜单栏可折叠功能，在后台管理中左侧菜单折叠功能是特别常见的一个功能，基本不管是什么类型的管理后台都会涉及到这个功能的实现。 今天给大家介绍的是二级可折叠菜单的功能，相对一级的菜单折叠功能就显得稍微比较复杂一点了，我这里将给大家介绍菜单
-
本文向大家介绍JavaScript中实现无缝滚动、分享到侧边栏实例代码，包括了JavaScript中实现无缝滚动、分享到侧边栏实例代码的使用技巧和注意事项，需要的朋友参考一下 废话不多说，直接给大家贴代码了，代码解决一起问题！ 下面一段代码给大家介绍js无缝滚动实例代码： 代码如下所示： 分享到侧边栏js代码如下所示： 代码如下所示： 以上所述是小编给大家介绍的JavaScript中实现无缝滚动、