jQuery控制li上下循环滚动插件用法实例(附demo源码下载)


Posted in Javascript onMay 28, 2016

本文实例讲述了jQuery控制li上下循环滚动插件用法。分享给大家供大家参考,具体如下:

/**
 *
 * jQuery scrollQ plugin li上下滚动插件
 * @name jquery-scrollQ.js
 * @author Q
 * @date 2012-03-23
 * line 显示li行数
 * scrollNum 每次滚动li行数
 * scrollTime 滚动速度 单位毫秒
 *
 */
(function($){
  var status = false;
  $.fn.scrollQ = function(options){
    var defaults = {
      line:4,
      scrollNum:2,
      scrollTime:1000
    }
    var options=jQuery.extend(defaults,options);
    var _self = this;
    return this.each(function(){
      $("li",this).each(function(){
        $(this).css("display","none");
      })
      $("li:lt("+options.line+")",this).each(function(){
        $(this).css("display","block");
      })
      function scroll() {
        for(i=0;i<options.scrollNum;i++) {
          var start=$("li:first",_self);
          start.fadeOut(100);
          start.css("display","none");
          start.appendTo(_self);
          $("li:eq("+(options.line-1)+")",_self).each(function(){
            $(this).fadeIn(500);
            $(this).css("display","block");
          })
        }
      }
      var timer;
      timer = setInterval(scroll,options.scrollTime);
      _self.bind("mouseover",function(){
        clearInterval(timer);
      });
      _self.bind("mouseout",function(){
        timer = setInterval(scroll,options.scrollTime);
      });
    });
  }
})(jQuery);

调用方式如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<TITLE>test</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="scrollQ.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#sItem").scrollQ();
});
</script>
</head>
  <body>
  <div>
  <ul id="sItem">
  <li>标题1</li>
  <li>标题2</li>
  <li>标题3</li>
  <li>标题4</li>
  <li>标题5</li>
  <li>标题6</li>
  <li>标题7</li>
  <li>标题8</li>
  <li>标题9</li>
  <li>标题10</li>
  </ul>
  </div>
</body>
</html>

完整实例代码点击此处本站下载。

PS:这里再为大家推荐几款代码格式化、美化工具,相信大家在以后的开发过程中会用得到:

在线JavaScript代码美化、格式化工具:
http://tools.3water.com/code/js

JavaScript压缩/格式化/加密工具:
http://tools.3water.com/code/jscompress

PHP代码在线格式化美化工具:
http://tools.3water.com/code/phpformat

XML代码在线格式化美化工具:
http://tools.3water.com/code/xmlcodeformat

json代码在线格式化/美化/压缩/编辑/转换工具:
http://tools.3water.com/code/jsoncodeformat

在线JSON代码检验、检验、美化、格式化工具:
http://tools.3water.com/code/json

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
innerhtml用法 innertext用法 以及innerHTML与innertext的区别
Oct 26 Javascript
jquery 笔记 事件
Nov 02 Javascript
JS冒泡事件的快速解决方法
Dec 16 Javascript
js不能获取隐藏的div的宽度只能先显示后获取
Sep 04 Javascript
node.js中的fs.fchown方法使用说明
Dec 16 Javascript
BOM系列第二篇之定时器requestAnimationFrame
Aug 17 Javascript
javascript删除html标签函数cIsHTML
Jan 09 Javascript
Node.js中DNS模块学习总结
Feb 28 Javascript
Node.Js生成比特币地址代码解析
Apr 21 Javascript
angularjs通过过滤器返回超链接的方法
Oct 26 Javascript
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
Feb 20 jQuery
ES2020 已定稿,真实场景案例分析
May 25 Javascript
jQuery实现布局高宽自适应的简单实例
May 28 #Javascript
jquery mobile界面数据刷新的实现方法
May 28 #Javascript
jquery自适应布局的简单实例
May 28 #Javascript
JQuery Mobile 弹出式登录框的实现方法
May 28 #Javascript
jquery div模态窗口的简单实例
May 28 #Javascript
JavaScript 弹出子窗体并返回结果到父窗体的实现代码
May 28 #Javascript
JS模态窗口返回值兼容问题的完美解决方法
May 28 #Javascript
You might like
PHP中的日期处理方法集锦
2007/01/02 PHP
php实现分页工具类分享
2014/01/09 PHP
2014年10个最佳的PHP图像操作库
2014/07/14 PHP
php文件压缩之PHPZip类用法实例
2015/06/18 PHP
php 在字符串指定位置插入新字符的简单实现
2016/06/28 PHP
PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
2017/09/17 PHP
php 中的信号处理操作实例详解
2020/03/04 PHP
TP5框架使用QueryList采集框架爬小说操作示例
2020/03/26 PHP
jquery利用event.which方法获取键盘输入值的代码
2011/10/09 Javascript
一个JQuery操作Table的代码分享
2012/03/30 Javascript
jquery利用ajax调用后台方法实例
2013/08/23 Javascript
Google (Local) Search API的简单使用介绍
2013/11/28 Javascript
js实现DOM走马灯特效的方法
2015/01/21 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【一】
2016/05/10 Javascript
AngularJS 与Bootstrap实现表格分页实例代码
2016/10/14 Javascript
js倒计时小实例(多次定时)
2016/12/08 Javascript
Vue.js系列之项目搭建(1)
2017/01/03 Javascript
bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法
2017/05/25 Javascript
详解express与koa中间件模式对比
2017/08/07 Javascript
Material(包括Material Icon)在Angular2中的使用详解
2018/02/11 Javascript
Vue登录注册并保持登录状态的方法
2018/08/17 Javascript
angularjs手动识别字符串中的换行符方法
2018/10/02 Javascript
angularjs自定义过滤器demo示例
2019/08/24 Javascript
浅谈laytpl 模板空值显示null的解决方法及简单的js表达式
2019/09/19 Javascript
javascript实现动态时钟的启动和停止
2020/07/29 Javascript
Javascript模拟实现new原理解析
2020/03/03 Javascript
JavaScript实现移动端拖动元素
2020/11/24 Javascript
python2.7实现FTP文件下载功能
2018/04/15 Python
Python创建普通菜单示例【基于win32ui模块】
2018/05/09 Python
Python开发之pip安装及使用方法详解
2020/02/21 Python
英国天然抗衰老护肤品品牌:Nakin Skin Care
2019/04/16 全球购物
个人求职信范文分享
2014/01/31 职场文书
护理专业毕业生自我鉴定总结
2014/03/24 职场文书
劳资协议书范本
2014/04/23 职场文书
女生抽烟检讨书
2014/10/05 职场文书
美术教师求职信范文
2015/03/20 职场文书