工作中遇到的一个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的上下无缝滚动应用(单行或多行)的更多相关文章

  1. 基于jQuery的上下左右无缝滚动应用(单行或多行)

    $(function(){     var _wrap=$('ul.line');//定义滚动区域     var _interval=2000;//定义滚动间隙时间     var _moving; ...

  2. jquery 图片自动无缝滚动

    <!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-e ...

  3. jquery(入门篇)无缝滚动

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  4. 基于jquery的锚点滚动插件(百度百科效果) anchorScroll.js

    1.插进使用场景 请打开https://baike.baidu.com/item/%E6%97%A5%E6%9C%AC%E5%8A%A8%E7%94%BB#hotspotmining,查看百度百科页面 ...

  5. 自己编写jQuery插件 之 无缝滚动

    一. 效果图 二. Html骨架结构 <div class="box"> <ul> <li>1</li> <li>2&l ...

  6. jQuery 间歇式无缝滚动特效分享(三张图片平行滚动)

    最近项目中门户首页需要做出图片间歇式无缝滚动特效,但是在网上找资料都是不太理想,不过可以指导.最后自己写了一个demo实现了这个特效,分享出来. 1.jquery.cxscroll.js /*! * ...

  7. 基于JQuery打造无缝滚动新闻

    JQuery实现 新闻无缝滚动 一.使用"首尾追加"实现无缝滚动 <head lang="en"> <meta charset="U ...

  8. 基于jQuery左侧小图滚动右侧大图显示代码

    今天给大家分享一款 jQuery左侧小图滚动右侧大图显示代码是一款基于jQuery实现的左侧滚动图片点击大图查看效果代码.该实例适用浏览器:IE8.360.FireFox.Chrome.Safari. ...

  9. Jquery实现图片左右滚动(自动)

    <!DOCTYPE HTML><html><head><title>基于jQuery的控制左右滚动效果_自动滚动版本</title>< ...

随机推荐

  1. oracle_单向函数_数字化功能

    oracle_单向函数_数字化功能 1.abs(x)   为了获得x绝对值 2.ceil(x)   用于获得大于或等于x的最小整数. 3.floor(x)   用于获得小于或等于x 4.mod(x,y ...

  2. WiX Toolset

    原文:WiX Toolset 公司换软件打包平台,弄了一个月,Wix toolset的中文资料真的不多,逼着自己看了不少英文资料,终于弄懂了WiX打包的过程,做出了满足要求的安装包 一点基本概念:(F ...

  3. JAVA必备——Struts

    在我们的开发中,有一个经典的框架,就是SSH,他们各自是:Struts,Spring,Hibernate,我们队他们神交已久,在曾经的博客中我介绍了Hibernate,今天我们也逐步揭开Struts的 ...

  4. 使用批处理给IIS添加MIME类型

    原文 使用批处理给IIS添加MIME类型   @echo off set /p warn="警告:本脚本会清空全部站点原有MIME类型,输入y按回车继续,直接回车退出:" if & ...

  5. vmware 新机克隆

    选li72 右键点击------管理-----克隆 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGlsaTcy/font/5a6L5L2T/fontsi ...

  6. 类(class)能不能自己继承自己(转)

    类(class)能不能自己继承自己不行,继承关系会出现环. 假设类A继承类A.那么要新建一个类A的对象,就必须先建立一个类A父类的对象.这是一个递归的过程,而且没有终止条件.会死循环的. 从编译的角度 ...

  7. 【iOS发展-81】setNeedsDisplay刷新显卡,并CADisplayLink它用来模拟计时器效果

    (1)效果 (2)源码下载(假设提示没有小图片的话,自己找一个替换一下即可,看到效果即可) http://download.csdn.net/detail/wsb200514/8176339 (3)总 ...

  8. Linux centos 主机名颜色设置 和 别名设置

    方便和乐趣写今天.至于为什么主机名颜色设置 和 别名设置放在一起写.这是因为他们的设置是在一个文件中..bashrc. .bashrc放在cd /root 这个文件夹下! 这个文件主要保存个人的一些个 ...

  9. EJBCA于Linux安装在

    于windows为了测试安装,装在linuxserver因为CN使用ip需要重新加载.....再折腾.这里有一些地方需要注意 一.所需文件 内容准备不说,请参阅我在以前的文章<EJBCA于win ...

  10. SQL2000 MD5加密

    原文:SQL2000 MD5加密 /***************************************************************************** * Na ...