一个无缝滚动的jquery插件
$.fn.imgscroll = function(o){
var defaults = {
speed: 40,
amount: 0,
width: 1,
dir: "left"
};
o = $.extend(defaults, o);
return this.each(function(){
var _li = $("li", this);
_li.parent().parent().css({overflow: "hidden", position: "relative"}); //div
_li.parent().css({overflow: "hidden", position: "relative", "list-style": "none"}); //ul
_li.css({position: "relative", overflow: "hidden"}); //li
if(o.dir == "left") _li.css({float: "left"});
//初始大小
var _li_size = 0;
for(var i=0; i<_li.size(); i++)
_li_size += o.dir == "left" ? _li.eq(i).outerWidth(true) : _li.eq(i).outerHeight(true);
//循环所需要的元素
if(o.dir == "left") _li.parent().css({width: (_li_size*3)+"px"});
_li.parent().empty().append(_li.clone()).append(_li.clone()).append(_li.clone());
_li = $("li", this);
//滚动
var _li_scroll = 0;
function goto(){
_li_scroll += o.width;
if(_li_scroll > _li_size)
{
_li_scroll = 0;
_li.parent().css(o.dir == "left" ? { left : -_li_scroll } : { top : -_li_scroll });
_li_scroll += o.width;
}
_li.parent().animate(o.dir == "left" ? { left : -_li_scroll } : { top : -_li_scroll }, o.amount);
}
//开始
var move = setInterval(function(){ goto(); }, o.speed);
_li.parent().hover(function(){
clearInterval(move);
},function(){
clearInterval(move);
move = setInterval(function(){ goto(); }, o.speed);
});
});
};
调用方法很简单;通过$(class).imgscroll({参数})即可 里边可以自己设置下参数 参数通过var = defaults;查看
一个无缝滚动的jquery插件的更多相关文章
- 一个文字无缝滚动的jQuery插件
直接上代码吧 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www. ...
- 自己改写了一个图片局部放大的jquery插件页面里面的html代码少了,同一个页面可以调用多个
自己改写了一个图片局部放大的jquery插件页面里面的html代码少了,同一个页面可以调用多个,兼容ie8以上浏览器,别忘了引用jquery,我用的jquery/1.11.0/其他版本没有测试,另外需 ...
- 自己写了一个无缝滚动的插件(jQuery)
效果图: html代码: 1 <h1>无缝滚动,向右滚动</h1> 2 <ul id="guoul1"> 3 <li><img ...
- [JS]手动实现一个横屏滚动公告js插件
前言 工作中要用到.在github上找的大部分都是竖屏滚动没办法只能自己手动写. 本来只是想随便实现一下的,结果一时兴起把它弄成了一个简单的小插件,开了个github仓库(希望路过点个星) JS横屏滚 ...
- 一个很简单的jQuery插件实例教程(菜鸟级)
很多公司的前端设计开发人员都是女孩子,而这些女孩子很多JavaScript技能都不是很好.而前端开发过程中,JavaScript技能又是必不可少的.所以,如果前端小MM正在为某个JavaScript效 ...
- javascript - 简单实现一个图片延迟加载的jQuery插件
最近在看一本书<Third-Party Javascript>很不错,推荐给大家,下载地址各位自己搜索了. 步骤: 1.打开google,鉴于google基本打不开,那么就打开这个网址吧. ...
- 原生js写一个无缝轮播图插件(支持vue)
轮播图插件(Broadcast.js) 前言:写这个插件的原因 前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...
- 简易页面场景滚动的jquery插件
(function($){ $.extend($.fn, { scene_scroll:function(arg_obj){ // 参数检测 // 场景数组 var $scene_arr = arg_ ...
- 50个jQuery插件可将你的网站带到另一个高度
Web领域一直在发生变化并且其边界在过去的每一天都在发生变化(甚至不能以小时为计),随着其边界的扩展取得了许多新发展.在这些进步之中,开发者的不断工作创造了更大和更好的脚本,这些脚本以插件方式带来更好 ...
随机推荐
- 魅族Java面经
1. 面试官问题怎么获取Memcached里面的session,我答request.getSession().这是通过cookie里面的sessionID获取session的,Memcached里面也 ...
- java8中map的meger方法的使用
java8中map有一个merge方法使用示例: /** * 打印出包含号码集的label的集合 * * @param args */ public static void main(String[] ...
- Google Protocol Buffer 的使用
简介 Google Protocol Buffer( 简称 Protobuf) 是 Google 公司内部的混合语言数据标准,目前已经正在使用的有超过 48,162 种报文格式定义和超过 12,183 ...
- Scrum7.0
Sprint回顾 让我们一次比一次做得更好. 1.回顾组织 主题:“我们怎样才能在下个sprint中做的更好?” 时间:1个小时 参与者:整个团队 场所:课室 秘书:陈程 2.回顾流程 (1)spri ...
- 《全唐诗》的sqlite3数据库
下载地址: http://pan.baidu.com/s/1b2mE54quantangshi.db是sqlite3数据库,包括2张表.index表:volume 列(整数,主键) 表示卷号,从1到9 ...
- 考查SQLite 3索引对整数排序的性能影响
做个实验,想了解SQLite3索引对整数排序的性能影响. 用这个测试表,考查绿色那列: id name date 自增型主键 字符串型,随机生成 整数型 随机生成,范围0到54354354 1 bMz ...
- SDF文件的用途
标准延迟格式(英语:Standard Delay Format, SDF)是电气电子工程师学会关于集成电路设计中时序描述的标准表达格式.在整个设计流程中,标准延迟格式有着重要的应用,例如静态时序分析和 ...
- Spring Web应用的最大瑕疵
众所周知, 现在的Spring框架已经成为构建企业级Java应用事实上的标准了,众多的企业项目都构建在Spring项目及其子项目之上,特别是Java Web项目,很多都使用了Spring并且遵循着We ...
- 写css时要注意数字的浮动方向
写css时要注意数字的浮动方向 当数字位数增加时他的方向才是正确的 text-align:right;padding-right:29px;
- GD图片(画布)的制作及验证码的应用
创建画布:创建画布的函数有 imagecreatetruecolor(width,height);创建画布 width指画布的宽height指画布的高 imagecolorallocate(img,r ...