文档章节

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

没有更多内容

加载失败,请刷新页面

加载更多

大数据教程(8.3)wordcount程序运行过程的解析

上一篇博客分享了wordcount的源码编写、原理实现,本节将对wordcount在hadoop内部运行过程进行解析。 运行流程图如下: 上图中说明:mr appmaster启动后,会根据任务分配规则进行任务的启动,...

em_aaron
3分钟前
0
0
Zookeeper安装(LINUX环境)

一、上传安装包 二、解压安装包 mkdir -p /usr/lib/jvm tar -zxvf zookeeper-3.4.10.tar.gz -C /usr/lib/jvm 三、修改配置文件 复制zoo_sample.cfg改名zoo.cfg 给zoo.cfg赋权 chmod 777 zoo.......

开源中国首席碉堡了
26分钟前
0
0
【面试必问】支撑百万并发的"IO多路复用"技术你了解吗?

多路复用其实并不是什么新技术,它的作用是在一个通讯连接的基础上可以同时进行多个请求响应处理。对于网络通讯来其实不存在这一说法,因为网络层面只负责数据传输;由于上层应用协议的制订问...

Java干货分享
29分钟前
2
0
Rotate Array(leetCode189)

Given an array, rotate the array to the right by k steps, where k is non-negative. Example 1: Input: [1,2,3,4,5,6,7] and k = 3Output: [5,6,7,1,2,3,4]Explanation:rotate 1 s......

woshixin
44分钟前
1
0
给女朋友讲解什么是Optional【JDK 8特性】

前言 只有光头才能变强 前两天带女朋友去图书馆了,随手就给她来了一本《与孩子一起学编程》的书,于是今天就给女朋友讲解一下什么是Optional类。 至于她能不能看懂,那肯定是看不懂的。(学到...

Java3y
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部