基于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>< ...
随机推荐
- 跑openstack命令错误【You must provide a username via either -...】
openstack设置环境,openstack该服务已经启动.当运行openstack当一个命令,如nova service list例如,下面的错误信息 You must provide a use ...
- Android 异步消息处理机制 让你在深入了解 Looper、Handler、Message之间的关系
转载请注明出处:http://blog.csdn.net/lmj623565791/article/details/38377229 ,本文出自[张鸿洋的博客] 非常多人面试肯定都被问到过,请问And ...
- linux网络编程投票
投票系统 1.说明: 写了一个投票系统.过程是先配置好server,在写一个网上投票功能.要实现网上投票功能. 事实上功能实现还是非常easy的,麻烦一点的在于过程比較繁杂,要做的东西还是挺多的. 2 ...
- NSIS:设置文件属性的方法
原文 NSIS:设置文件属性的方法 在NSIS中,有以下方法可以对文件的属性进行设置. 一是通过NSIS的指令SetFileAttributes. 多重属性可用 ' | ' 隔开,有效的属性为 ...
- jsoup分解HTML DOM
采用jsoup 分解HTML .使用和JS操作DOM分类似. 示例代码: import java.io.IOException; import org.jsoup.Jsoup; import org. ...
- android获取ip和本机的物理地址
<span style="font-size:18px;">/** * 获取ip * * @return */ public static String getLoca ...
- Android项目外接高德地图代码混淆注意事项
如今好多项目中都加入了第三方jar包,可是最大的问题就是打包的时候代码混淆报错,下面是高德地图混淆报错解决方式: 在proguard-project.txt中加入例如以下代码: -libraryjar ...
- PL/SQL编程(1) - 存储过程,函数以及参数
存储过程 PROCEDURE [schema.]name[( parameter[, parameter...] ) ] [AUTHID DEFINER | CURRENT_USER ] [ACCES ...
- DevExpress XtraReports 入门一 创建 Hello World 报表
原文:DevExpress XtraReports 入门一 创建 Hello World 报表 本文只是为了帮助初次接触或是需要DevExpress XtraReports报表的人群使用的,为了帮助更 ...
- SSIS从理论到实战,再到应用(3)----SSIS包的变量,约束,常用容器
原文:SSIS从理论到实战,再到应用(3)----SSIS包的变量,约束,常用容器 上期回顾: SSIS从理论到实战,再到应用(2)----SSIS包的控制流 首先我们来看看包里面的变量 SSIS ...