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 相关文章推荐
javascript 简单抽屉效果的实现代码
Mar 09 Javascript
jquery radio 操作代码
Mar 16 Javascript
jQuery模拟超链接点击效果代码
Apr 21 Javascript
关于onchange事件在IE和FF下的表现及解决方法
Mar 08 Javascript
jQuery添加/改变/移除CSS类及判断是否已经存在CSS
Aug 20 Javascript
基于jquery实现发送文章到手机的代码
Dec 26 Javascript
jQuery实现在下拉列表选择时获取json数据的方法
Apr 16 Javascript
浅谈JavaScript 执行环境、作用域及垃圾回收
May 31 Javascript
详解JS去重及字符串奇数位小写转大写
Dec 29 Javascript
在vue中使用Autoprefixed的方法
Jul 27 Javascript
详解mpvue小程序中怎么引入iconfont字体图标
Oct 01 Javascript
怎样使你的 JavaScript 代码简单易读(推荐)
Apr 16 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与C#分别格式化文件大小的代码
2011/05/14 PHP
PHP 魔术变量和魔术函数详解
2015/02/25 PHP
PHP中使用curl伪造IP的简单方法
2015/08/07 PHP
PHP采用超长(超大)数字运算防止数字以科学计数法显示的方法
2016/04/01 PHP
详解php中curl返回false的解决办法
2019/03/18 PHP
根据选择不同的下拉值出现相对应的文本输入框
2013/08/01 Javascript
详谈jQuery操纵DOM元素属性 attr()和removeAtrr()方法
2015/01/22 Javascript
JavaScript 事件对象介绍
2015/04/13 Javascript
JavaScript实现的encode64加密算法实例分析
2015/04/15 Javascript
jQuery实现仿新浪微博浮动的消息提示框(可智能定位)
2015/10/10 Javascript
浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
2016/01/14 Javascript
JavaScript用构造函数如何获取变量的类型名
2016/12/23 Javascript
JavaScript如何一次性展示几万条数据
2017/03/30 Javascript
基于Vue过渡状态实例讲解
2017/09/14 Javascript
微信小程序用户授权弹窗 拒绝时引导用户重新授权实现
2019/07/29 Javascript
vue柱状进度条图像的完美实现方案
2019/08/26 Javascript
webpack3升级到webpack4遇到问题总结
2019/09/30 Javascript
React.js组件实现拖拽排序组件功能过程解析
2020/04/27 Javascript
基于JavaScript实现大文件上传后端代码实例
2020/08/18 Javascript
Python实现微信公众平台自定义菜单实例
2015/03/20 Python
深入理解Python中的*重复运算符
2017/10/28 Python
Python3中的bytes和str类型详解
2019/05/02 Python
Python如何读取文件中图片格式
2020/01/13 Python
python GUI库图形界面开发之PyQt5信号与槽基础使用方法与实例
2020/03/06 Python
python中pathlib模块的基本用法与总结
2020/08/17 Python
Timberland澳大利亚官网:全球领先的户外品牌
2019/12/10 全球购物
会议邀请函范文
2014/01/09 职场文书
质量提升方案
2014/06/16 职场文书
个人职业及收入证明
2014/10/13 职场文书
红领巾广播站广播稿
2014/10/19 职场文书
2014年圣诞节寄语
2014/12/08 职场文书
小学优秀教师事迹材料
2014/12/16 职场文书
酒店财务总监岗位职责
2015/04/03 职场文书
班主任经验交流心得体会
2015/11/02 职场文书
2016年小学端午节活动总结
2016/04/01 职场文书
MySQL聚簇索引和非聚簇索引的区别详情
2022/06/14 MySQL