实现文字的无缝滚动、间歇性向上翻滚

文字向上滚动分为：无缝滚动、间歇性滚动

间歇性滚动

使用jQuery的 `animate`

一般情况下，向上翻滚一行内容，即一个<li></li>，但是如果是一行有多个li标签，要使用常见的插件就会出现问题了…

所以自己改吧改吧：

(function ($) {$.fn.myScroll = function(options) {var init = {items: 1,  //一行有几项内容speed: 3000,  //滚动速度moveHeight: 22  // 行高};var intId = [];var opts = $.extend({}, init, options);function moveUp(obj) {obj.animate({marginTop: '-' + opts.moveHeight + 'px'},1000,function() {var $this = $(this);$this.find('li').slice(0, opts.items).appendTo($this);$this.css('margin-top', 0);})}this.each(function(i) {var sh = opts.moveHeight,speed = opts.speed,items = opts.items,$this = $(this);intId[i] = setInterval(timerEvent, speed);$this.hover(function() {clearInterval(intId[i]);}, function() {intId[i] = setInterval(timerEvent, speed);});var len = $this.find('li').length;if(len > items && len <= items * 2) {$this.html($this.html() + $this.html());}function timerEvent() {var len = $this.find('li').length;if(len > items && len <= items * 2) {len /= 2;}if(len <= items) {clearInterval(intId[i]);} else {moveUp($this, sh);}}});}
})(jQuery);
$('#scrollLists').myScroll({items: 3,speed: 3000,moveHeight: 22
});

以下的都是单行内容翻滚，搬过来记录下：

使用JavaScript

function Scroll() {}
Scroll.prototype.upScroll = function (dom, _h, interval) {var dom = document.getElementById(dom);var timer = setTimeout(function () {var _field = dom.children[0];_field.style.marginTop = _h;clearTimeout(timer);}, 1000)setInterval(function () {var _field = dom.children[0];_field.style.marginTop = "0px";dom.appendChild(_field);var _field = dom.children[0]_field.style.marginTop = _h;}, interval)
}
var myScroll = new Scroll();

用法：

/** demo 父容器(ul)的id* -36px 子元素li的高度* 3000  滚动间隔时间* 每次滚动持续时间可到css文件中修改* （找不到原文了-.-）*/
myScroll.upScroll("demo","-36px",3000);

无缝滚动

下载地址：简单的jQuery无缝向上滚动效果

(function ($) {$.fn.myScroll = function (options) {//默认配置var defaults = {speed: 40, //滚动速度,值越大速度越慢rowHeight: 24 //每行的高度};var opts = $.extend({}, defaults, options),intId = [];function marquee(obj, step) {obj.find("ul").animate({marginTop: '-=1'}, 0, function () {var s = Math.abs(parseInt($(this).css("margin-top")));if (s >= step) {$(this).find("li").slice(0, 1).appendTo($(this));$(this).css("margin-top", 0);}});}this.each(function (i) {var sh = opts["rowHeight"],speed = opts["speed"],_this = $(this);intId[i] = setInterval(function () {if (_this.find("ul").height() <= _this.height()) {clearInterval(intId[i]);} else {marquee(_this, sh);}}, speed);_this.hover(function () {clearInterval(intId[i]);}, function () {intId[i] = setInterval(function () {if (_this.find("ul").height() <= _this.height()) {clearInterval(intId[i]);} else {marquee(_this, sh);}}, speed);});});}})(jQuery);$(function(){$('.myscroll').myScroll({speed: 40, //数值越大，速度越慢rowHeight: 26 //li的高度});
});

实现文字的无缝滚动、间歇性向上翻滚相关推荐

文字无限无缝滚动效果——和派孔明
文字无限无缝滚动效果--和派孔明 <!DOCTYPE html> <html lang="en"> <head><meta charset ...
jquery myscroll文字上下无缝滚动插件简单使用
效果图 scroll_table.html <!DOCTYPE html> <html><head><meta charset="utf-8&quo ...
vue vue-seamless-scroll 无缝滚动依赖
最近vue2项目中有使用文图和文字的无缝滚动场景,从网上看到有些挺有用的,特摘抄分享一下. 1.安装依赖 npm install vue-seamless-scroll --save 2.注册全局注 ...
常用的文字、图片的无缝滚动
1.文字的无缝向上滚动 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...
各种图片、文字无缝滚动
1.文字的无缝向上滚动 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...
html自动滚动代码,html文字无缝滚动代码
实例一: 经测试代码如下: 滚动板 body { font: 12px/1 "宋体",SimSun,serif; background:#fff; color:#000; } .s ...
html纵向字幕无缝滚动,html文字无缝滚动代码
这篇文章主要为大家详细介绍了html文字无缝滚动代码,具有一定的参考价值,可以用来参考一下. 实例一: 经测试代码如下: 滚动板 body { font: 12px/1 "宋体", ...
php无缝滚动文字,JQuery文字无缝滚动效果实现方法
本文主要介绍了JQuery实现文字无缝滚动效果示例代码(Marquee插件),具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家. 推荐一个JQuery的无缝文字滚动效果,同时也可以滚 ...
jq文字无缝滚动代码(鼠标悬停停止滚动)
jq实现文字无缝滚动代码(鼠标悬停停止滚动) 效果图直接copy就能运行 <!DOCTYPE html> <html lang="en"> <hea ...

实现文字的无缝滚动、间歇性向上翻滚

间歇性滚动

使用jQuery的 `animate`

使用JavaScript

无缝滚动

实现文字的无缝滚动、间歇性向上翻滚相关推荐

最新文章

热门文章

实现文字的无缝滚动、间歇性向上翻滚

间歇性滚动

使用jQuery的 animate

使用JavaScript

无缝滚动

实现文字的无缝滚动、间歇性向上翻滚相关推荐

最新文章

热门文章

使用jQuery的 `animate`