文档章节

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
上下滚动播报特效

html: <div style="height:50px;overflow:hidden;font-size: 14px;font-weight: bold;"> <ul class="line"> <li style="line-height:25px;"> <span class="glyphicon glyphicon-hand-right"......

hming
2016/11/28
4
0

没有更多内容

加载失败,请刷新页面

加载更多

node调用dll

先安装python2.7 安装node-gyp cnpm install node-gyp -g 新建一个Electron-vue项目(案例用Electron-vue) vue init simulatedgreg/electron-vue my-project 安装electron-rebuild cnpm ins......

Chason-洪
今天
3
0
eclipse中项目svn转gitLab全过程

在工作中,我们可能会遇到项目从svn迁移到gitLab;此过程我们需要变化版本管理工具,上传代码。本篇博客记录了使用spring tool suit(sts/eclipse)进行项目迁移的全过程。 步骤: (1)端口之...

em_aaron
今天
3
0
scala学习(一)

学习Spark之前需要学习Scala。 参考学习的书籍:快学Scala

柠檬果过
今天
1
0
通俗易懂解释网络工程中的技术,如STP,HSRP等

导读 在面试时,比如被问到HSRP的主备切换时间时多久,STP几个状态的停留时间,自己知道有这些东西,但在工作中不会经常用到,就老是记不住,觉得可能还是自己基础不够牢固,知识掌握不够全面...

问题终结者
昨天
4
0
看了一下Maven的内容

了解了Maven其实是一个跨IDE的标准构建工具,能推广的原因估计是借了仓库的便利。 另一个作用是可以通过Maven的功能在社区版的IDEA去创建Web项目,下次实践看看

max佩恩
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部