文档章节

li上下滚动

皮蛋瘦肉精_
 皮蛋瘦肉精_
发布于 2015/12/08 13:39
字数 251
阅读 7
收藏 0

备忘录--------------------

<script type="text/javascript" src="/${res}/js/company/jquery.min.js"></script>

<script type="text/javascript" src="/${res}/js/scrollQ.js"></script>


<script type="text/javascript">

$(document).ready(function(){  

    $("#sItem1").scrollQ();  

});

</script>

<ul id="sItem1">

<li style="line-height: 25px;">${text}</li>

<li style="line-height: 25px;">${text}</li>

<li style="line-height: 25px;">${text}</li>

<li style="line-height: 25px;">${text}</li>

<li style="line-height: 25px;">${text}</li>

<li style="line-height: 25px;">${text}</li>

</ul>


scrollQ.js:


/** 

 *  

 * li上下滚动插件

 * line 显示li行数 

 * scrollNum 每次滚动li行数

 * scrollTime 滚动速度 单位毫秒

 */ 

(function($){  

    var status = false;  

    $.fn.scrollQ = function(options){  

        var defaults = {

            line:4,

            scrollNum:2,

            scrollTime:3000

        }

var options=jQuery.extend(defaults,options);

var _self = this;

return this.each(function(){  

var i=0;

$("li",this).each(function(){

i++;

$(this).css("display","none");

})

                        // 如果总行数小于显示行数,ul会被清空,所以做了如下判断。 比较懒,就这样。

if(i<=defaults.line){

$("li",this).each(function(){

$(this).css("display","block");

});

return;

}

$("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); 


© 著作权归作者所有

共有 人打赏支持
皮蛋瘦肉精_
粉丝 0
博文 7
码字总数 985
作品 0
程序员
JavaScript 无缝上下左右滚动加定高定宽停顿效果

根据无缝滚动和八向滚动修改而来,特点是能同一程序中分别向四个方向移动。 对滚动框内的样式设置有些要求。 效果: 代码:

青夜之衫
2017/12/04
0
0
JavaScript 无缝八向滚动(兼容ie/ff)

青夜之衫
2017/12/04
0
0
web app开发利器 - iscroll4 解决方案

存在即是道理,iscroll会诞生,主要是因为无论是在iphone、ipod、android 或是更早前的移动webkit都没有提供一种原生的方式来支持在一个固定高度的容器内滚动内容, 这个不幸的规则导致所有web...

文艺小青年
2017/06/29
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

八大包装类型的equals方法

先看其中一个源码 结论:八大包装类型的equals方法都是先判断类型是否相同,不相同则是false,相同则判断值是否相等 注意:包装类型不能直接用==来等值比较,否则编译报错,但是数值的基本类型...

xuklc
34分钟前
1
0
NoSQL , Memcached介绍

什么是NoSQL 非关系型数据库就是NoSQL,关系型数据库代表MySQL 对于关系型数据库来说,是需要把数据存储到库、表、行、字段里,查询的时候根据条件一行一行地去匹配,当量非常大的时候就很耗...

TaoXu
昨天
0
0
890. Find and Replace Pattern - LeetCode

Question 890. Find and Replace Pattern Solution 题目大意:从字符串数组中找到类型匹配的如xyy,xxx 思路: 举例:words = ["abc","deq","mee","aqq","dkd","ccc"], pattern = "abb"abc ......

yysue
昨天
0
0
Linux | Redis

写在前面的话 常言道,不作笔记不读书。在下是深有体会啊,所以,跟我一起做下本节的笔记吧,或许多年以后,你一定会感谢今天的你。 安装 在官网的下载页 Redis Download 直接写了在Linux的安...

冯文议
昨天
1
0
NoSQL-memcached

NoSQL介绍 NoSQL叫非关系型数据库。而关系型数据库代表有MySQL。对于关系型数据库来说,是需要把数据存储到库、表、行、字段里,查询的时候根据条件一行一行地去匹配,当量非常大的时候就很...

ln97
昨天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部