基于jQuery的上下无缝滚动应用(单行或多行)
工作中遇到的一个js代码,现在对.trigger('mouseleave'),仍一知半解。。。

<script>
$(function(){
//单行应用
var _wrap=$('ul.line');//定义滚动区域
var _interval=2000;//定义滚动间隙时间
var _moving;//需要清除的动画
_wrap.hover(function(){
clearInterval(_moving);//当鼠标在滚动区域中时,停止滚动
},function(){
_moving=setInterval(function(){
var _field=_wrap.find('li:first');//此变量不可放置于函数起始处,li:first取值是变化的
var _h=_field.height();//取得每次滚动高度
_field.animate({marginTop:-_h+'px'},600,function(){//通过取负margin值,隐藏第一行
_field.css('marginTop',0).appendTo(_wrap);//隐藏后,将该行的margin值置零,并插入到最后,实现无缝滚动
})
},_interval)//滚动间隔时间取决于_interval
}).trigger('mouseleave');//函数载入时,模拟执行mouseleave,即自动滚动
});
$(function(){
//多行应用
var _wrap=$('ul.mulitline');//定义滚动区域
var _interval=3000;//定义滚动间隙时间
var _moving;//需要清除的动画
_wrap.hover(function(){
clearInterval(_moving);//当鼠标在滚动区域中时,停止滚动
},function(){
_moving=setInterval(function(){
var _field=_wrap.find('li:first');//此变量不可放置于函数起始处,li:first取值是变化的
var _h=_field.height();//取得每次滚动高度
_field.animate({marginTop:-_h+'px'},600,function(){//通过取负margin值,隐藏第一行
_field.css('marginTop',0).appendTo(_wrap);//隐藏后,将该行的margin值置零,并插入到最后,实现无缝滚动
})
},_interval)//滚动间隔时间取决于_interval
}).trigger('mouseleave');//函数载入时,模拟执行mouseleave,即自动滚动
});
</script>
基于jQuery的上下无缝滚动应用(单行或多行)的更多相关文章
- 基于jQuery的上下左右无缝滚动应用(单行或多行)
$(function(){ var _wrap=$('ul.line');//定义滚动区域 var _interval=2000;//定义滚动间隙时间 var _moving; ...
- jquery 图片自动无缝滚动
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-e ...
- jquery(入门篇)无缝滚动
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 基于jquery的锚点滚动插件(百度百科效果) anchorScroll.js
1.插进使用场景 请打开https://baike.baidu.com/item/%E6%97%A5%E6%9C%AC%E5%8A%A8%E7%94%BB#hotspotmining,查看百度百科页面 ...
- 自己编写jQuery插件 之 无缝滚动
一. 效果图 二. Html骨架结构 <div class="box"> <ul> <li>1</li> <li>2&l ...
- jQuery 间歇式无缝滚动特效分享(三张图片平行滚动)
最近项目中门户首页需要做出图片间歇式无缝滚动特效,但是在网上找资料都是不太理想,不过可以指导.最后自己写了一个demo实现了这个特效,分享出来. 1.jquery.cxscroll.js /*! * ...
- 基于JQuery打造无缝滚动新闻
JQuery实现 新闻无缝滚动 一.使用"首尾追加"实现无缝滚动 <head lang="en"> <meta charset="U ...
- 基于jQuery左侧小图滚动右侧大图显示代码
今天给大家分享一款 jQuery左侧小图滚动右侧大图显示代码是一款基于jQuery实现的左侧滚动图片点击大图查看效果代码.该实例适用浏览器:IE8.360.FireFox.Chrome.Safari. ...
- Jquery实现图片左右滚动(自动)
<!DOCTYPE HTML><html><head><title>基于jQuery的控制左右滚动效果_自动滚动版本</title>< ...
随机推荐
- HDU 1711 Number Sequence(kmp)
Problem Description Given two sequences of numbers : a[1], a[2], ...... , a[N], and b[1], b[2], .... ...
- Android应用程序的组成部分和Manifest文件(转)
Android应用程序由松散耦合的组件组成,并使用应用程序Manifest绑定到一起:应用程序Manifest描述了每一组件和它们之间的交互方式,还用于指定应用程序元数据.其硬件和平台要求.外部库以及 ...
- ANDROID PAD版本号 PHONE版本号 源代码有什么 差别?
ANDROID PAD版本号 PHONE版本号 源代码有什么 差别? 直接把frameworks/base/core/res/res/values/config.xml里面的<bool name ...
- CentOS7 安装zookeeper
本章介绍CentOS的初始配置与zookeeper的安装. www.apache.org/dist/上可以下载Hadoop整个生态环境的组件,我下的Zookeeper3.4.6版本 我一般都是在一个虚 ...
- lol盒子重点内容
//AFN函数 - imageview载入网络图片而且获取图片,获取之后存储到手机 [image setImageWithURLRequest:[NSURLRequest requestWithU ...
- JS添加节点方法与JQuery添加节点方法的比较及总结
原生JS添加节点方法与JQuery添加节点方法的比较及总结 一.首先构建一个简单布局,来供下边讲解使用 1.HTML部分代码: <div id="div1">div ...
- Linux IPC(Inter-Process Communication,进程间通信)之管道学习
1.标准流管道 管道操作支持文件流模式,用来创建链接还有一个进程的管道,通过函数popen和pclose popen的详细介绍在本blog:Linux 多进程学习中有具体介绍 2.无名管道(PIPE) ...
- discuz 7.2 faq.php sql注入了一些研究
6.2号码(可能更早)上网本见exp,是一家discuz 7.2的sql注入漏洞 经过反复研究.最高在线人数exp它们存在于这些或那些问题,经过我自己的使用和变更摘要,使用的方法如以下: Discuz ...
- mysql子查询慢的问题
当你在用explain工具查看sql语句的运行计划时.若select_type 字段中出现"DEPENDENT SUBQUERY"时,你要注意了.你已经掉入了mysql子查询慢 ...
- Andriod Studio科普文章——3.大约gradle常见问题插头
1.andriod gradle插件版本号过低. 错误位置: dependencies{ classpath 'com.android.tools.build:gradle:0.10.2' } 提示信 ...