这是一款利用了jquery 插件做出来的qq评论拖动分页效果,用户可以自定拖动分页,而不要点多少页。
<!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>jquery 插件qq评论拖动分页效果</title>
<link rel="stylesheet" type="text/css教程" href="styles.css" />
<script type="text/网页特效" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="sliders.js"></script>
</head>
<body>
<h1>colorful sliders with jquery & css3</h1>
<h2>go back <a href="http://www.php100.com/">to the tutorial »</a></h2>
<div class="main">
<!-- the sliders -->
<div class="colorful-slider blue">
<div class="slider-handle"></div>
</div>
<div class="colorful-slider green">
<div class="slider-handle"></div>
</div>
<div class="colorful-slider orange">
<div class="slider-handle"></div>
</div>
<div class="cube-area">
<!-- the colorful bars -->
<div class="cuboid blue">
<div class="cu-top"></div>
<div class="cu-mid"></div>
<div class="cu-bottom"></div>
</div>
<div class="cuboid green">
<div class="cu-top"></div>
<div class="cu-mid"></div>
<div class="cu-bottom"></div>
</div>
<div class="cuboid orange">
<div class="cu-top"></div>
<div class="cu-mid"></div>
<div class="cu-bottom"></div>
</div>
<!-- the perspective div is css3 transformed -->
<div class="perspective">
</div>
</div>
<!-- old school float clearing -->
<div class="clear"></div>
</div>
</body>
</html>
源码下载地址
http://down.php100.com/down/code/js/jiaodiantu/2010/0907/20674.html
效果预览地址
http://g.111cn.cn/javascript/js/20100907/jquerysliders/