一个无缝滚动的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领域一直在发生变化并且其边界在过去的每一天都在发生变化(甚至不能以小时为计),随着其边界的扩展取得了许多新发展.在这些进步之中,开发者的不断工作创造了更大和更好的脚本,这些脚本以插件方式带来更好 ...
随机推荐
- 利用IDL将一个txt文档拆分为多个
测试.txt文档,每47行的格式相同,通过代码每47行存为一个txt,txt文档命名为其第一行数据. 代码如下: file='G:\data\测试.txt' openr,lun,file,/Get_L ...
- js中js数组、对象与json之间的转换
在数据传输过程中,json是以文本,即字符串的形式传递的,而JS操作的是JSON对象,所以,JSON对象和JSON字符串之间的相互转换是关键.例如:JSON字符串:var str1 = '{ &quo ...
- iOS常见算法笔试问题
1. 给出一个由小写字母组成的字符串,把所有连续出现的 2 个 a 替换成 bb ( 2 个 b ),但是对于超过两个连续的 a,那么这些字符都不作替换.例如: bad -> bad (一个a, ...
- isMemberOfClass和isKindOfClass的区别
1.isMemberOfClass:作用:用于判断一个对象是否属于当前这个类 Person *rose = [[Person alloc] init]; if ([rose is ...
- html显示时间
<html> <head> <script type="text/javascript"> function time() { var time ...
- JPA merge(obj) 方法
JPA中的merge类似Hibernate中的saveOrUpdate方法,当数据库中存在id=2的Person,在em.close()时会发送一条update语句,而当数据库中不存在id=2的Per ...
- HBase学习
记录HBase的学习过程.之后会陆续添加内容. 阅读hbase的博客,理解hbase是什么.推荐博文: 1,HBase原理,基础架构,基础概念 2,HBase超详细介绍 --------------- ...
- python3.5------购物车
笔者:QQ: 360212316 逻辑图 程序代码 # /usr/bin/env python # -*- coding: utf-8 -*- product_list = [ ["ip ...
- 9.1 js基础总结2
3.布尔类型(Boolean) 布尔型数据只有true和false两个值,与字符串不同,不要把布尔值用引号括起来,布尔值false与字符串“false”是两回事. var married = true ...
- LDAP binary字段读取
今天做LDAP发布图片,用binary属性存储.存储没有问题,但是读取时发现字段变成String形式并且内容是乱码,怎么转换都不能解决. 最后度了下发现 默认情况下Attribute#get()返回的 ...