首页 > 语言 > JavaScript > 正文

封装的jquery翻页滚动(示例代码)

2024-05-06 14:33:29
字体:
来源:转载
供稿:网友

HTML结构:
代码如下:
ul._rollSe{width:100px;height:300px;over-flow:hidden} 
ul._rollSe li._rollPar{height:100px;border:1px solid #369} 

代码如下:
<div class="_rollParent">
 <ul class="_rollPageSe">
  <li class="_rollpage">1</li>
  <li class="_rollpage">2</li>
 </ul>
 <div>   
  <a href="#" mce_href="#" class="_scrollPrev" data-frequency="3" data-pr="happy">上一页</a>    
  <a href="#" mce_href="#" class="_scrollNext" data-frequency="3" data-pr="happy">下一页</a>   
 </div>   
 <ul class="_rollSe">   
  <?php for($a=1;$a++;$a<10):?>   
  <li class="_rollPar"><?php echo $a; ?></li>   
  <?php endfor;?>   
 </ul>   
</div> 

JS引入文件:

<script type="text/javascript" src="/js/jquery//scrollTo/jquery.scrollTo-min.js"></script>

author :  teresa 2011-3-28

params: 以上HTML结构必填项: 有关的class

              _rollParent: 触发事件的上级层)

              _rollSe :滚动区域

              _rollPar: 滚动元素

              _scrollNext: 下一页按钮

              _scrollPrev: 上一页按钮

              _rollPageSe : 分页区域

              _rollpage: 页码元素

              data-frequency: 滚动频率 (eg:一次滚动3个元素) ->需标注在触发事件的按钮上.

              data-pr: cookie的前缀.

 

discription: 一次性读取几条数据, 只显示几条, 滚动翻页(一次性滚3条或n条) ; 此方法只需在所需事件滚动效果的html元素标注以上规定class便可使用.

JS初始化方法:
代码如下:
/**************************************************************************
 discription: 翻页滚动
***************************************************************************/
//插件引入
document.write('<mce:script type="text/javascript" src="/js/jquery//scrollTo/jquery.scrollTo-min.js" mce_src="js/jquery//scrollTo/jquery.scrollTo-min.js"></mce:script>');

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选