jQuery无缝滚动插件
插件代码
;(function ($) { // jQuery marquee 插件
$.fn.marquee = function (options) {
// 默认设置
var defaults = {
derection: "top",
interval: 50
}; // 合并后的参数设置
var options = $.extend(defaults, options); var $mar = $(this),
original = $mar.children().first(),
clone = original.clone(),
height = original.height(),
width = original.width(),
i = 0,
tId = null; // 唯一的tId,可以通过clearTimeout(tId)清除干净 // append clone to marquee
$mar.append(clone); // scrolltop
var scrolltop = function () { if (i < height) {
$mar.scrollTop(i++);
} else {
i = 0;
$mar.scrollTop(0);
} tId = setTimeout(scrolltop, options.interval);
}; // scrollbottom
var scrollbottom = function () { if (i === 0) {
i = height;
$mar.scrollTop(i);
} else {
$mar.scrollTop(i--);
} tId = setTimeout(scrollbottom, options.interval);
}; // scrollleft
var scrollleft = function () { if (i < width) {
$mar.scrollLeft(i++)
} else {
i = 0;
$mar.scrollLeft(0);
} tId = setTimeout(scrollleft, options.interval);
}; // scrollright
var scrollright = function () { if (i === 0) {
$mar.scrollLeft(width);
i = width;
} else {
$mar.scrollLeft(i--);
} tId = setTimeout(scrollright, options.interval);
}; // scroll to which derection
var scrollto = {
top: scrolltop,
bottom: scrollbottom,
left: scrollleft,
right: scrollright
}; // 根据参数选择滚动函数
tId = setTimeout(scrollto[options.derection], options.interval); // when mouse hover clearTimeout or setTimeout
$mar.hover(function () {
clearTimeout(tId);
}, function () {
tId = setTimeout(scrollto[options.derection], options.interval);
});
};
})(jQuery);
示例一:上滚动(默认)
<!-- html code -->
<div class="marquee">
<ul>
<li>滚动吧少年</li>
<li>滚动吧少年</li>
<li>滚动吧少年</li>
<li>滚动吧少年</li>
<li>滚动吧少年</li>
<li>滚动吧少年</li>
<li>滚动吧少年</li>
</ul>
</div>
/* css code */
.marquee{
border:1px solid #0a0;
width:300px;
height:100px;
overflow:hidden;
}
.marquee li{
font-size:16px;
line-height:1.5;
}
// js code:插件应用
$(".marquee").marquee();
示例二:左滚动
<!-- html code -->
<div class="marquee2">
<ul>
<li>滚动吧少年</li>
<li>滚动吧少年</li>
<li>滚动吧少年</li>
<li>滚动吧少年</li>
<li>滚动吧少年</li>
<li>滚动吧少年</li>
<li>滚动吧少年</li>
</ul>
</div>
/* css code */
.marquee2{
width:300px;
height:25px;
border:1px solid #00a;
overflow:hidden;
white-space: nowrap; /* 文字超出时不换行!! */
}
.marquee2 ul, .marquee2 li{
display:inline;
font-size:16px;
line-height:25px;
}
// js code:插件应用
$(".marquee2").marquee({derection: "left", interval: 25});
jQuery无缝滚动插件的更多相关文章
- liMarquee – jQuery无缝滚动插件(制作跑马灯效果)
liMarquee 是一款基于 jQuery 的无缝滚动插件,类似于 HTML 的 marquee 标签,但比 marquee 更强大.它可以应用于任何 Web 元素,包括文字.图像.表格.表单等元素 ...
- 利用jQuery无缝滚动插件liMarquee实现图片(链接)和文字(链接)向右无缝滚动(兼容ie7+)
像新闻类的版块经常要求一条条的新闻滚动出现,要实现这种效果,可以使用jQuery无缝滚动插件liMarquee. 注意: 1. 它的兼容性是IE7+,及现代浏览器. 2. 引用的jquery的版本最好 ...
- 【精心推荐】12款很好用的 jQuery 图片滚动插件
这里收集了12款很好用的 jQuery 图片滚动插件分享给大家.jQuery 作为最流行的 JavaScript 框架,使用简单灵活,同时还有许多优秀的插件可供使用.其中最令人印象深刻的应用之一就是各 ...
- Flexslider - 响应式的 jQuery 内容滚动插件
FlexSlider 是一款轻量的响应式 jQuery 内容滚动插件,能够帮助你在项目轻松的创建漂亮的内容滚动效果.这款插件曾经连续多年入选 WDL 的年度最佳 jQuery 插件,值得大家在网站开发 ...
- 10款很好用的 jQuery 图片滚动插件
jQuery 作为最流行的 JavaScript 框架,使用简单灵活,同时还有许多优秀的插件可供使用.其中最令人印象深刻的应用之一就是各种很酷的图片效果,它可以让的网站更具吸引力.这里收集了10款很好 ...
- 手写JS无缝滚动插件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
- (转)15个非常棒的jQuery无限滚动插件【瀑布流效果】
原文地址:http://www.cnblogs.com/lyw0301/archive/2013/06/19/3145084.html 现在,最热门的网站分页趋势之一是jQuery的无限滚动(也即瀑布 ...
- 15个非常棒的jQuery无限滚动插件【瀑布流效果】
现在,最热门的网站分页趋势之一是jQuery的无限滚动(也即瀑布流).如果你碰巧观察Pinterest的网站,如Facebook,Twitter和deviantART的,你会发现无限滚动的动作,当旧的 ...
- 一款经典的jQuery kxbdMarquee 无缝滚动插件
<marquee> 曾是 IE 下独有的一个走马灯效果的标签,其他浏览器并不兼容,于是出现了使用 JavaScript 来模拟该效果的插件. 版本: jQuery v1.3.2+ 在线实例 ...
随机推荐
- IOS thread1:exc_bad)access(code=exc_1386_gpflt)错误
这种错误通常是内存管理的问题,一般是访问了已经释放的对象导致的,可以开启僵尸对象(Zombie Objects)来定位问题: 在Xcode的菜单: Product->Scheme->Edi ...
- MVC ueditor的使用(实现上传图片功能)
之前使用ckeditor不能实现上传图片功能,只要是我不知道怎么使用啦o( ̄ε ̄*),然后就换了ueditor~~,可以实现上传图片功能啦~\(≧▽≦)/~~ 下面是我的步骤:去官网下载最新版uedi ...
- Solarwinds Orion NPM实战视频演示
Orion Network Performance Monitor是全面的带宽性能监控和故障管理软件,能监控并收集来自路由器.交换机.服务器和其他SNMP设备中的数据,您可以直接从Web浏览器上观察您 ...
- jquery的end(),addBack()方法example
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 解决 FastReport 使用存储过程 找不到临时表问题
在存储过程最开始加入:以下命令就可以了 SET FMTONLY OFF 有时候在执行SQL查询语句时,仅仅需要知道检索的元数据,而不是具体的数据行,可以设置SET FMTONLY ON. SET FM ...
- windows server 备份与还原
1:文件备份: ①Goodsync ②Acronis Backup & Recovery 2:域控&系统备份 ①CMD -- >NTbackup (不支持异机还原) ②Acron ...
- poj1006_Biorhythms
英语真差劲啊,看题目没看明白,无奈重新开始手抄题目,突然发现一句话 “For each cycle,you will be given the number of days form the begi ...
- 银行ATM机工作流程模拟编程(代码)
#include<stdio.h>#include<stdlib.h>#include <conio.h>#include <string.h> voi ...
- iOS 支付宝支付集成获取私钥
http://doc.open.alipay.com/doc2/apiList?docType=4 登录到支付宝开放平台,下载相关支付宝支付的demo.解压出来有3个文件夹.(服务端demo,客户端 ...
- IOS CLLocationManager定位反编码位置信息
//获取位置和坐标#if __IPHONE_OS_VERSION_MAX_ALLOWED > __IPHONE_7_1 if (IOS_VERSION >= 8.0) { ...