文档章节

li上下滚动

皮蛋瘦肉精_
 皮蛋瘦肉精_
发布于 2015/12/08 13:39
字数 251
阅读 7
收藏 0
点赞 0
评论 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

JavaScript 无缝八向滚动(兼容ie/ff)

青夜之衫 ⋅ 2017/12/04 ⋅ 0

JavaScript 无缝上下滚动加定高停顿效果

青夜之衫 ⋅ 2017/12/04 ⋅ 0

web app开发利器 - iscroll4 解决方案

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

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

【js与jquery】幻灯片轮播切换效果

1.效果如图所示: 2.html代码: [php] view plaincopy <div class="ad" > <ul class="slider" > <li><img src="images/ads/1.gif"/></li> <li><img src="images/ads/2.gif"/></li> <li><img......

蜗牛奔跑 ⋅ 2015/10/30 ⋅ 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 ⋅ 0

jQuery实现自动左右滚动效果的代码实例

jQuery实现自动左右滚动效果的代码实例 思路: 点击滚动模式下,是为点击(向前/向后/数字)添加click事件,通过控制展示区块left值实现切换. 1.向前(左):当在第一个版面时,滚动到最后一个页面,否...

刘义峰 ⋅ 2011/03/30 ⋅ 0

【js与jquery】jquery循环滚动新闻

1.效果如图: 2.html代码: [php] view plaincopy <h3>最新动态</h3> <div class="scrollNews" > <ul> <li><a href="#" class="tooltip" title="甜美宽松毛衣今秋一定红.">甜美宽松毛衣今秋一......

蜗牛奔跑 ⋅ 2015/10/30 ⋅ 0

Jquery图片滚动插件—BxCarousel

Jquery图片滚动插件—BxCarousel BxCarousel是一个具有众多配置且易用的Jquery图片滚动插件,特征主要有: Ø 可以指定显示的元素数 Ø 可以指定每次滚动元素数 Ø 自动播放模式 Ø 前一张/...

灵动生活 ⋅ 2010/12/17 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Linux中的端口大全

1 被LANA定义的端口 端口 名称 描述 1 tcpmux TCP 端口服务多路复用 5 rje 远程作业入口 7 echo Echo 服务 9 discard 用于连接测试的空服务 11 systat 用于列举连接了的端口的系统状态 13 d...

寰宇01 ⋅ 22分钟前 ⋅ 0

Confluence 6 如何备份存储文件和页面信息

备份的 ZIP 文件包含有 entities.xml,这个 XML 文件包含有 Confluence 的所有页面内容和存储附件的目录。 备份 Zip 文件结构 页面的附件是存储在附件存储目录中的,通过页面和附件 ID 进行识...

honeymose ⋅ 24分钟前 ⋅ 0

【每天一个JQuery特效】根据状态确定是否滑入或滑出被选元素

主要效果: 本文主要采用slideToggle()方法实现以一行代码同时实现以展开或收缩的方式显示或隐藏被选元素。 主要代码如下: <!DOCTYPE html><html><head><meta charset="UTF-8">...

Rhymo-Wu ⋅ 28分钟前 ⋅ 0

度量.net framework 迁移到.net core的工作量

把现有的.net framework程序迁移到.net core上,是一个非常复杂的工作,特别是一些API在两个平台上还不能同时支持。两个类库的差异性,通过人工很难识别全。好在微软的工程师们考虑到了我们顾...

李朝强 ⋅ 34分钟前 ⋅ 0

请不要在“微服务”的狂热中迷失自我!

微服务在过去几年一直是一个非常热门的话题(附录1)。何为“微服务的疯狂”,举个例子: 众所周知,Netflix在DevOps上的表现非常棒。Netfix可以做微服务。因此:如果我做微服务,我也将非常...

harries ⋅ 35分钟前 ⋅ 0

oAuth2 升级Spring Cloud Finchley.RELEASE踩坑分享

背景 6.19号,spring团队发布了期待已久的 Spring Cloud Finchley.RELEASE 版本。 重要变化: 基于Spring Boot 2.0.X 不兼容 Spring Boot 1.5.X 期间踩过几个坑,分享出来给大伙,主要是关于...

冷冷gg ⋅ 今天 ⋅ 0

OSChina 周一乱弹 —— 理发师小姐姐的魔法

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @冰冰棒- :分享田馥甄的单曲《My Love》 《My Love》- 田馥甄 手机党少年们想听歌,请使劲儿戳(这里) @Li-Wang :哎,头发又长了。。。又要...

小小编辑 ⋅ 今天 ⋅ 9

Kafka1.0.X_消费者API详解2

偏移量由消费者管理 kafka Consumer Api还提供了自己存储offset的功能,将offset和data做到原子性,可以让消费具有Exactly Once 的语义,比kafka默认的At-least Once更强大 消费者从指定分区...

特拉仔 ⋅ 今天 ⋅ 0

NEO智能合约之发布和升级(二)

接NEO智能合约之发布和升级(一),我们接下来说说智能合约的升级功能。 一 准备工作 合约的升级需要在合约内预先设置好升级接口,以方便在升级时调用。接下来我们对NEO智能合约之发布和升级...

红烧飞鱼 ⋅ 今天 ⋅ 0

个人博客的运营模式能否学习TMALL天猫质量为上?

心情随笔|个人博客的运营模式能否学习TMALL天猫质量为上? 中国的互联网已经发展了很多年了,记得在十年前,个人博客十分流行,大量的人都在写博客,而且质量还不错,很多高质量的文章都是在...

原创小博客 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部