jquery实现浮动的侧栏实例
本文实例讲述了jquery实现浮动的侧栏。分享给大家供大家参考。具体如下：
<!DOCTYPEhtml>
<html>
<head>
<title>jQuerystickysidebarplugin</title>
<linkhref='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:extralight,light,regular,bold'rel='stylesheet'type='text/css'>
<linkrel="stylesheet"href="css/default.css"media="screen"/>
<linkrel="stylesheet"href="css/sticky.css"media="screen"/>
</head>
<body>
<divid="wrap">
<header>
<divid="main">
<h2>产品列表</h2>
<ulid="products">
<li>
<h3>产品1</h3>
<imgsrc="images/product.png"width="126"
height="126"alt="productimage"/>
</li>
<liclass="end">
<h3>产品2</h3>
<imgsrc="images/product.png"width="126"height="126"alt="productimage"/>
</li>
<li>
<h3>产品3</h3>
<imgsrc="images/product.png"width="126"height="126"alt="productimage"/>
</li>
<li>
<h3>产品4</h3>
<imgsrc="images/product.png"width="126"height="126"alt="productimage"/>
</li>
<liclass="end">
<h3>产品5</h3>
<imgsrc="images/product.png"width="126"height="126"alt="productimage"/>
</li>
</ul>
</div>
<divid="side">
<divid="basket">
<h3>这里是浮动的层~</h3>
</div>
</div>
</div>
<scriptsrc="js/jquery-1.7.1.min.js"></script>
<scriptsrc="js/jquery.easing.1.3.js"></script>
<scriptsrc="js/stickysidebar.jquery.js"></script>
<script>
$(function(){
$("#basket").stickySidebar({
timer:400
,easing:"easeInOutBack"
});
});
</script>
</body>
</html>
希望本文所述对大家的jQuery程序设计有所帮助。