一个文字无缝滚动的jQuery插件
直接上代码吧
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>marquee插件--滚动示例</title>
<link type="text/css" href="http://888.gtimg.com/css/v1.0/qqcaipiao/cp_party_effect.css" rel="stylesheet"/>
<style type="text/css">
#mar1 { height: 120px; width: 200px; margin-top: 20px; margin-left: 20px; background: #333; color: #FFF; }
#mar2 { height: 120px; width: 200px; margin-top: 20px; margin-left: 20px; background: #333; color: #FFF; }
#mar3 { height: 40px; width: 500px; margin-top: 20px; margin-left: 20px; background: #06F; color: #FFF; }
#mar4 { height: 40px; width: 500px; margin-top: 20px; margin-left: 20px; background: #06F; color: #FFF; }
#mar5 { height: 40px; width: 500px; margin-top: 20px; margin-left: 20px; background: #F66; color: #FFF; }
#mar6 { height: 40px; width: 500px; margin-top: 20px; margin-left: 20px; background: #F66; color: #FFF; }
</style>
</head> <body>
<div id="mar1">
<ul>
<li>测试数据第一条</li>
<li>测试数据第二条</li>
<li>测试数据第三条</li>
<li>测试数据第四条</li>
<li>测试数据第五条</li>
<li>测试数据第六条</li>
</ul>
</div>
<div id="mar2">
<ul>
<li>测试数据第一条</li>
<li>测试数据第二条</li>
<li>测试数据第三条</li>
<li>测试数据第四条</li>
<li>测试数据第五条</li>
<li>测试数据第六条</li>
</ul>
</div>
<div id="mar3">
<ul>
<li>测试数据第一条</li>
<li>测试数据第二条</li>
<li>测试数据第三条</li>
<li>测试数据第四条</li>
<li>测试数据第五条</li>
</ul>
</div>
<div id="mar4">
<ul>
<li>测试数据第一条</li>
<li>测试数据第二条</li>
<li>测试数据第三条</li>
<li>测试数据第四条</li>
<li>测试数据第五条</li>
</ul>
</div>
<div id="mar5">
<ul>
<li>测试数据第一条</li>
<li>测试数据第二条</li>
<li>测试数据第三条</li>
<li>测试数据第四条</li>
<li>测试数据第五条</li>
</ul>
</div>
<div id="mar6">
<ul>
<li>测试数据第一条</li>
<li>测试数据第二条</li>
<li>测试数据第三条</li>
<li>测试数据第四条</li>
<li>测试数据第五条</li>
</ul>
</div>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
/**
* @author xf.radish
* jQuery插件 常用效果的实现
*/
(function (jQuery) {
jQuery.fn.extend({
/**
*@description 无缝滚动 支持匀速上下左右和垂直翻滚上下
*@param {
* direction:string,//滚动方向 值域：top|left|bottom|right|up|down
* speed:string//滚动速度（垂直翻滚时为停留时间）
* } o
*@example
*HTML结构
*<div id="mar">
* <ul>
* <li>内容1</li>
* <li>内容2</li>
* <li>内容3</li>
* </ul>
*</div>
*mar样式应该包含height,width,background等 注意不要覆盖了插件附加上去的样式
*调用：
*jQuery("#mar").marquee({
* direction:"top",
* speed:30
*})
*
*/
marquee:function (o) {
var it = this,
d = o.direction || 'left', //滚动方向 默认向左
s = o.speed || 30, //速度 默认30毫秒
mar = jQuery(it),
mp1 = jQuery(it).children(0).attr({id:"mp1"}),
marqueeFunc = getMarquee(d),
marRun = marqueeFunc ? setInterval(marqueeFunc, s) : function () {
return false;
};//开始滚动
//鼠标悬停事件
jQuery(it).hover(function () {
clearInterval(marRun);
}, function () {
marRun = setInterval(marqueeFunc, s);
})
/*生成滚动函数
*1.判断方向 *2.装载CSS *3.判断需不需要滚动 *4.构造函数
*/
function getMarquee(d) {
var marqueeFunc;
switch (d) {
//水平向左
case "left":
mar.addClass("plus-mar-left");
var liHeight = mar[0].offsetHeight;
mar.css({"line-height":liHeight + "px"});
if (mp1[0].offsetWidth < mar[0].offsetWidth) return false;
mp1.clone().attr({id:"mp2"}).appendTo(mar);
marqueeFunc = function () {
if (mar[0].scrollLeft >= mp1[0].scrollWidth) {
mar[0].scrollLeft = 0;
} else {
mar[0].scrollLeft++;
}
}
break;
//水平向上
case "top":
mar.addClass("plus-mar-top");
if (mp1.outerHeight() <= mar.outerHeight()) return false;
var mp2 = mp1.clone().attr({id:"mp2"}).appendTo(mar);
marqueeFunc = function () {
var scrollTop = mar[0].scrollTop;
if (mp1[0].offsetHeight > scrollTop) {
mar[0].scrollTop = scrollTop + 1;
} else {
mar[0].scrollTop = 0;
}
}
break;
//水平向右
case "right":
mar.addClass("plus-mar-left");
var liHeight = mar[0].offsetHeight;
mar.css({"line-height":liHeight + "px"});
if (mp1[0].offsetWidth <= mar[0].offsetWidth) return false;
var mp2 = mp1.clone().attr({id:"mp2"}).appendTo(mar);
marqueeFunc = function () {
if (mar[0].scrollLeft <= 0) {
mar[0].scrollLeft += mp2[0].offsetWidth;
} else {
mar[0].scrollLeft--;
}
}
break;
//水平向下
case "bottom":
mar.addClass("plus-mar-bottom");
if (mp1[0].offsetHeight <= mar[0].offsetHeight) return false;
var mp2 = mp1.clone().attr({id:"mp2"}).appendTo(mar);
mar[0].scrollTop = mar[0].scrollHeight;
marqueeFunc = function () {
if (mp1[0].offsetTop >= mar[0].scrollTop) {
mar[0].scrollTop += mp1[0].offsetHeight;
} else {
mar[0].scrollTop--; }
}
break;
//垂直翻滚 向上
case "up":
mar.addClass("plus-mar-up");
var liHeight = mar[0].offsetHeight;
mp1.css({"line-height":liHeight + "px"});
marqueeFunc = function () {
var currLi = it.eq(0).find("ul:first");
currLi.animate({
marginTop:-liHeight
}, 500, function () {
currLi.find("li:first").appendTo(currLi);
currLi.css({marginTop:0});
})
}
break;
//垂直翻滚 向下
case "down":
mar.addClass("plus-mar-down");
var liHeight = mar[0].offsetHeight,
liLength = mp1.children().length,
topInit = -(liLength - 1) * liHeight + "px";
mp1.css({"top":topInit, "line-height":liHeight + "px"});
marqueeFunc = function () {
var currLi = it.eq(0).find("ul:last");
currLi.animate({
marginTop:liHeight
}, 500, function () {
currLi.find("li:last").prependTo(currLi);
currLi.css({marginTop:0});
})
}
break;
default:
{
marqueeFunc = null;
alert("滚动插件：传入的参数{direction}有误！");
}
}
return marqueeFunc;
}
}
})
})(jQuery); $("#mar1").marquee({
direction:"top",
speed:30
}); $("#mar2").marquee({
direction:"bottom",
speed:30
}); $("#mar3").marquee({
direction:"right",
speed:30
}); $("#mar4").marquee({
direction:"left",
speed:30
}); $("#mar5").marquee({
direction:"down",
speed:2000
})
$("#mar6").marquee({
direction:"up",
speed:3000
});
</script>
</body>
</html>
一个文字无缝滚动的jQuery插件的更多相关文章
- 一个无缝滚动的jquery插件
$.fn.imgscroll = function(o){ var defaults = { speed: 40, amount: 0, width: 1, dir: "left" ...
- 一个简单的消息提示jquery插件
最近在工作中写了一个jquery插件,效果如下: 就是一个简单的提示消息的一个东西,支持最大化.最小化.关闭.自定义速度.自定义点击事件,数据有ajax请求和本地数据两种形式.还有不完善的地方,只做了 ...
- [转]一个文件上传的jquery插件
http://www.jb51.net/article/51547.htm 这篇文章主要介绍了使用ajaxfileupload.js实现ajax上传文件php版,需要的朋友可以参考下 无论是P ...
- JavaScript 一个进行枚举选择的jquery插件（仿easyui风格）
某次做项目要实现一个功能: 按星期选择一个连续的时间范围 比如:周一到周五,周六到周日 或 周六到周三 聪明的朋友马上想出办法:用两个选项为周一到周日的下拉列表实现,对 那样可以,但是我觉得不够友好, ...
- 简易页面场景滚动的jquery插件
(function($){ $.extend($.fn, { scene_scroll:function(arg_obj){ // 参数检测 // 场景数组 var $scene_arr = arg_ ...
- js文字无缝滚动
<div id=demo style="overflow:hidden; width:128px; height:300px;"> <div id=demo1&g ...
- 20 个用于处理页面滚动效果的 jQuery 插件
对设计和开发一个网站来说,web开发者不能低估了网站滚动效果的重要性.如今,设计者们都视为一大挑战了,在网站中设计出吸引眼球的高效视觉滚动效果.幸运的是有各种各样的jquery 滚动插件可供他们使用, ...
- 50个jQuery插件可将你的网站带到另一个高度
Web领域一直在发生变化并且其边界在过去的每一天都在发生变化(甚至不能以小时为计),随着其边界的扩展取得了许多新发展.在这些进步之中,开发者的不断工作创造了更大和更好的脚本,这些脚本以插件方式带来更好 ...
- 10款无限滚动自动翻页jquery插件
2012年3月29日 无限滚动自动翻页可以说是web2.0时代的一项堪称伟大的技术,它让我们在浏览页面的时候只需要把滚动条拉到网页底部就能自动显示下一页的 结果,改变了一直以来只能通过点击下一页来翻页 ...
随机推荐
- NYOJ 299
(前言:这是一道关于矩阵快速幂的问题,介绍矩阵快速幂之前,首先看"快速幂"问题. 在前面的博客里有记录到快速幂取模算法,不过总体的思想总是和取模运算混淆在一起,而忽略了" ...
- .Net 生成二维码【超简易，仅供学习】
1,首先下载DotNetBarcode.dll文件 下载地址: http://dl.downyi.com/dotnetbarcode_dll.rar 2,调用方式 string path = @&qu ...
- ASP.NET用户控件操作ASPX页面
定义一个不含数据的事件处理方法 用户控件 public event EventHandler Click; protected void Button1_Click(object sender, Ev ...
- [DP之计数DP]
其实说实在 我在写这篇博客的时候 才刚刚草了一道这样类型的题 之前几乎没有接触过 接触过也是平时比赛的 没有系统的做过 可以说0基础 我所理解的计数dp就是想办法去达到它要的目的 而且一定要非常劲非常 ...
- WPF 命令的简单总结
WPF的命令Command主要解决的问题,就是代码复用.一个很重要的应用意义,在于它将很多地方需要的调用的相同操作,以统一的方式管理,却又提供了不同的访问结果. 举个例子来说,我可能通过“点击butt ...
- centos6 搭建hdwiki
前期准备:安装好Mysql+apache+PHP,测试apache能够解析index.php文件后就可以. 用户名 xiaohe 密码 123456 #### mysql安装好后: adduser w ...
- servlet就实现在线用户表
在学习servlet的过程中,学习了如何用servlet实现在线用户表. 只有服务器处于开机状态才会有在线用户表的存在,在服务器关机的情况下自然就不存在在线用户表的说法:所以,楼主认为在线用户表的信息 ...
- 关于PHPAPI ZEND_API TSRM_API宏的定义
在PHP源码中,我们可以见到诸如PHPAPI ZEND_API TSRM_API等xxx_API(当然还有其他格式的)这样的宏 关于它们的定义都是类似于 #if defined(__GNUC__) & ...
- C#使用SqlDataAdapter 实现数据的批量插入和更新
近日由于项目要求在需要实现中型数据的批量插入和更新,晚上无聊,在网上看到看到这样的一个实现方法,特摘抄过来,以便以后可能用到参考. 一.数据的插入 DateTime begin = DateTime. ...
- vs2008编译wxWidgets 2.8.12
用vs2008编译wxWidgets 2.8.12 FileZilla客户端源码3.5.3及以上版本依赖wxWidgets 2.8.12或更高版本,因此,编译FileZilla客户端首先需要编译wxW ...