最近开发过程中用到的前台滚动效果,发现这个插件蛮好用的,基于jquery扩展的,在此做个笔记备忘,也可为需要的同行提供方便:
(function ($) {
$.fn.extend({
Scroll: function (opt, callback) {
//参数初始化
if (!opt) var opt = {};
var _this = this.eq(0).find("ul:first");
var lineH = _this.find("li:first").height(), //获取行高
line = opt.line ? parseInt(opt.line, 10) : parseInt(this.height() / lineH, 10), //每次滚动的行数,默认为一屏,即父容器高度
speed = opt.speed ? parseInt(opt.speed, 10) : 500, //卷动速度,数值越大,速度越慢(毫秒)
timer = opt.timer ? parseInt(opt.timer, 10) : 3000; //滚动的时间间隔(毫秒)
if (line == 0) line = 1;
var upHeight = 0 - line * lineH;
//滚动函数
scrollUp = function () {
_this.animate({
marginTop: upHeight
}, speed, function () {
for (i = 1; i <= line; i++) {
_this.find("li:first").appendTo(_this);
}
_this.css({ marginTop: 0 });
});
}
//鼠标事件绑定
_this.hover(function () {
clearInterval(timerID);
}, function () {
timerID = setInterval("scrollUp()", timer);
}).mouseout();
}
})
})(jQuery);
调用时使用以下代码:
$("#scrollDiv").Scroll({ line: 3, speed: 500, timer: 4000 });
分享到:
相关推荐
本文将深入探讨“textSlider多行文字滚动插件demo”,这是一个基于jQuery的JavaScript插件,专为实现多行文本的动态滚动效果而设计。这个插件能够使文本在网页上优雅地向上或向下滚动,极大地增强了用户体验,尤其...
`textSlider`是一款基于jQuery的多行文字滚动插件,专为网页设计者和开发者提供一种简便的方法来实现动态展示多行文本。它能够优雅地将长段文字内容在有限的空间内循环滚动,增加网站的互动性和信息传递效率。在网页...
《jQuery实现单行多行滚动效果详解》 在网页设计中,动态滚动效果常常用于展示大量文本或数据,使得信息的呈现更为生动和吸引人。jQuery库以其强大的DOM操作和事件处理能力,成为了实现此类效果的首选工具。本文将...
4. **插件集成**:"此开发插件可以多行滚动"表明可能有一个预封装的插件,用于简化实现多行滚动的过程。这可能是开源的,例如基于jQuery的轮播插件,或者是专门为PHPWeb定制的组件。 5. **模板调整**:"templates...
总的来说,实现jQuery多行滚动的关键在于利用jQuery提供的动画功能,结合自定义的滚动插件,以及适时的鼠标事件监听,可以创建出具有交互性的滚动效果。这个例子展示了如何结合HTML、CSS和JavaScript实现这种效果,...
通过阅读文件内容并结合上述知识点解析,可以看出实现一个基于jquery的多行文字图片滚动效果需要掌握jQuery的基本操作、插件开发、动画处理、事件处理等相关知识点。开发者需要有扎实的JavaScript基础和熟悉jQuery库...
本篇文章将详细讲解基于jQuery实现的文字行向上循环滚动插件,该插件适用于主流浏览器,如Chrome、Firefox、Safari、Edge等。 一、jQuery基础知识 jQuery的核心理念是“Write Less, Do More”,它通过简洁的API提供...
对于多行滚动,我们可以使用自定义的jQuery插件实现,以下代码演示了如何进行多行批量滚动: ```html <!DOCTYPE html> 多行滚动示例 ul,li{margin:0;padding:0} #scrollDiv{width:300px;height:100px;line...
《textSlider多行文字滚动jQuery插件详解及应用》 在网页设计中,动态效果能够提升用户体验,增强信息传递的效果。其中,文字滚动特效是一种常见的展示方式,它可以帮助用户在有限的空间内展示更多的内容。今天我们...
"实用的jQuery横向无限循环滚动插件"是一个专门为网页设计的动态效果插件,它允许网页上的内容(如图片、文本或产品展示)以横向无限循环的方式进行滚动,从而提供一种流畅且引人注目的用户体验。这种被称为"自动...
js特效脚本含源码和说明textSlider多行文字滚动jQuery插件本资源系百度网盘分享地址
`textSlider`是一款基于JavaScript库jQuery设计的多行文字滚动插件,它专为网页动态展示多行文本而设计。该插件具有自动滚动功能,支持向上滚动和向下滚动,使得网站上的大量信息能够以吸引人且有序的方式呈现给用户...
而“JQuery插件之自增长多行文本框”是一个专为多行文本输入设计的插件,旨在提供更好的用户体验。这个插件名为“grow-textarea”,其主要功能是动态调整文本框的高度,根据用户输入的内容自动扩展或收缩,以展示...
这个“jquery插件库-炫酷的jquery幻灯片插件.zip”文件显然包含了一个用于创建动态幻灯片展示的jQuery插件。下面,我们将深入探讨jQuery、jQuery插件以及这个特定的幻灯片插件相关的知识点。 **jQuery库** jQuery是...
Jquery 是一个广泛使用的JavaScript库,它的出现极大地简化了JavaScript编程,提供了丰富的API和插件,使得网页动态效果的实现变得更加便捷。在Jquery中,我们可以通过选择器选取DOM元素,然后对这些元素进行操作,...
Jquery.RollTitle 是一个基于jQuery库的插件,专门用于实现这种效果,并且支持在一个页面上创建多个独立的滚动区域。 **插件功能与特性** 1. **多行滚动**:Jquery.RollTitle 插件不仅支持单行文字的滚动,还能够...
jQuery打字机插件TypeIt.js就是这样一个工具,它基于jQuery和HTML5技术,提供了丰富的自定义选项,让开发者可以轻松实现这种视觉效果。本文将深入探讨TypeIt.js的原理、使用方法以及实际应用。 一、TypeIt.js概述 ...
例如,一个简单的元素选择和操作在jQuery中可能只需要一行代码,而在原生JavaScript中则需要多行。 在“jQuery横向滚动”这一特性中,当菜单项超过容器宽度时,它们不会简单地溢出,而是会形成一个可滚动的区域。...
首先,jQuery是一个轻量级的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作和Ajax交互等任务。jQuery的语法简洁且易于理解,使得开发者可以快速实现复杂的效果,如两排图片滚动。 在创建两排图片滚动的...