一个无缝滚动的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领域一直在发生变化并且其边界在过去的每一天都在发生变化(甚至不能以小时为计),随着其边界的扩展取得了许多新发展.在这些进步之中,开发者的不断工作创造了更大和更好的脚本,这些脚本以插件方式带来更好 ...
随机推荐
- 7、SQL Server索引、表压缩
索引 什么是索引? 索引是一种磁盘上的数据结构,建立在表或视图的基础上.使用索引可以使数据的获取更快更高校,也会影响其他的一些性能,如插入或更新等. 索引主要分为两种类型:聚集索引和非聚集索引. 字典 ...
- php web 信息采集
<?php /** * 可以灵活配置使用的采集器 * 作者:Rain * 创建时间:2015-02-03 15:17:30 * 版本信息:V1.0 */ //////////////////// ...
- 关于nginx的1W并发的优化
我们来看一下图,下面的这张图清晰的表明了nginx优化的一些方法: nginx要响应请求的话,必须要: 1.要建立socket连接 2.是要读本地的文件 所以这就是我们的一个优化的方向: 所以参考照上 ...
- 在centos配置nginx+php的环境
环境版本:centos6.8/nginx1.10.2/php5.6.29 ====================安装nginx1.10.2==================== #根据centos ...
- 使用TCPDF插件生成pdf以及pdf的中文处理
目录(?)[+] 多种多样的pdf开发库 WKHTMLTOPDF 2FPDF 3TCPDF 中文问题 做了这么多年项目,以前只是在别人的项目中了解过PHP生成pdf文件,知道并不难,但是涉及到了p ...
- 为控件Button设置快捷键(组合键)
控件MenuStrip和ContextMenuStrip可通过ShortCcutKeys属性设置快捷键,而控件Button没有ShortcutKey属性,如何为控件Button设置快捷键呢(组合件键) ...
- 带隙基准(Bandgap,BG)
Bandgap voltage reference,常常有人简单地称它为Bandgap.最经典的带隙基准是利用一个与温度成正比的电压与一个与温度成反比的电压之和,二者温度系数相互抵消,实现与温度无关的 ...
- 16.2.2 Space Needed for keys
myisam表使用btree索引,可以粗略计算出索引文件的大小,使用(key_length+4)/0.67,全部key的总和,全部key被排序顺序插入和表没有被任何压缩的时候,这是最坏的情况 stri ...
- SQL日期格式,转自will哥
我之前一直認為 SQL Server 針對日期處理的函數不夠多(如果跟 MySQL 比較),尤其是處理日期欄位轉字串的時候,常常因為要輸出特定的格式而懊惱不已,常常一不小心就寫了一長串,很不易閱讀. ...
- python-day-20
重点总结记录 1.Django请求的生命周期 路由系统 -> 试图函数(获取模板+数据=>渲染) -> 字符串返回给用户 2.路由系统 /index/ -> 函数或类.as_v ...