JS实现单行文字不间断向上滚动的方法


Posted in Javascript onJanuary 29, 2015

本文实例讲述了JS实现单行文字不间断向上滚动的方法。分享给大家供大家参考。具体分析如下:

前几天帮一个朋友写了一个单行文字不间断向上滚动的JS效果,现在分享给需要的weber。先看HTML和CSS代码:

CSS:

.wrap{padding:10px;border:1px #ccc solid; width:500px;margin:20px auto;}

.roll-wrap{height:130px;overflow:hidden;}

HTML:

<div class="wrap">

    <div class="roll-wrap" id="roll-wrap">

        <ul>

            <li>JS文本向上滚动1</li>

            <li>JS文本向上滚动2</li>

            <li>JS文本向上滚动3</li>

            <li>JS文本向上滚动4</li>

            <li>JS文本向上滚动5</li>

            <li>JS文本向上滚动6</li>

            <li>JS文本向上滚动7</li>

        </ul>

    </div>

</div>

该动画效果的原理是 先将ul向上滚动一个li的高度,滚动完后将ul里面的第一个li放到ul的末尾,这时原第二个li变成了ul里面的第一个li,然后再重复上面的动作,就这样不断重复实现不间断滚动。

JS(jQuery)代码:

function scrollTxt(){

    var controls={}, 

        values={},

        t1=200, /*播放动画的时间*/

        t2=2000, /*播放时间间隔*/

        si;

    controls.rollWrap=$("#roll-wrap");

    controls.rollWrapUl=controls.rollWrap.children();

    controls.rollWrapLIs=controls.rollWrapUl.children();

    values.liNums=controls.rollWrapLIs.length;

    values.liHeight=controls.rollWrapLIs.eq(0).height();

    values.ulHeight=controls.rollWrap.height();

    this.init=function(){

        autoPlay();

        pausePlay();

    }

    /*滚动*/

    function play(){

        controls.rollWrapUl.animate({"margin-top" : "-"+values.liHeight}, t1, function(){

            $(this).css("margin-top" , "0").children().eq(0).appendTo($(this));

        });

    }

    /*自动滚动*/

    function autoPlay(){

        /*如果所有li标签的高度和大于.roll-wrap的高度则滚动*/

        if(values.liHeight*values.liNums > values.ulHeight){

            si=setInterval(function(){

                play();

            },t2);

        }

    }

    /*鼠标经过ul时暂停滚动*/

    function pausePlay(){

        controls.rollWrapUl.on({

            "mouseenter":function(){

                clearInterval(si);

            },

            "mouseleave":function(){

                autoPlay();

            }

        });

    }

}

new scrollTxt().init();

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
JS面向对象编程之对象使用分析
Aug 19 Javascript
加随机数引入脚本不让浏览器读取缓存
Sep 04 Javascript
js函数内变量的作用域分析
Jan 12 Javascript
JS实现仿FLASH效果的竖排导航代码
Sep 15 Javascript
js停止冒泡和阻止浏览器默认行为的简单方法
May 15 Javascript
Bootstrap学习笔记之css组件(3)
Jun 07 Javascript
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
Jun 26 jQuery
彻底解决 webpack 打包文件体积过大问题
Jul 07 Javascript
详解RequireJs官方使用教程
Oct 31 Javascript
vue中实现点击按钮滚动到页面对应位置的方法(使用c3平滑属性实现)
Dec 29 Javascript
Vue 实现分页与输入框关键字筛选功能
Jan 02 Javascript
解决Vue中的生命周期beforeDestory不触发的问题
Jul 21 Javascript
JS清除选择内容的方法
Jan 29 #Javascript
IE中鼠标经过option触发mouseout的解决方法
Jan 29 #Javascript
JS判断是否360安全浏览器极速内核的方法
Jan 29 #Javascript
jQuery中$.each使用详解
Jan 29 #Javascript
jQuery显示和隐藏 常用的状态判断方法
Jan 29 #Javascript
移动设备web开发首选框架:zeptojs介绍
Jan 29 #Javascript
JSON格式的键盘编码对照表
Jan 29 #Javascript
You might like
php中模拟POST传递数据的两种方法分享
2011/09/16 PHP
php中判断文件空目录是否有读写权限的函数代码
2012/08/07 PHP
PHP Session 变量的使用方法详解与实例代码
2013/09/11 PHP
Yii 快速,安全,专业的PHP框架
2014/09/03 PHP
Laravel中Facade的加载过程与原理详解
2017/09/22 PHP
比较简单的一个符合web标准的JS调用flash方法
2007/11/29 Javascript
javascript 密码强弱度检测万能插件
2009/02/25 Javascript
js escape,unescape解决中文乱码问题的方法
2010/05/26 Javascript
jQuery中将函数赋值给变量的调用方法
2012/03/23 Javascript
jquery通过visible来判断标签是否显示或隐藏
2014/05/08 Javascript
JS功能代码集锦
2016/05/04 Javascript
用JavaScript获取页面文档内容的实现代码
2016/06/10 Javascript
Webpack+Vue如何导入Jquery和Jquery的第三方插件
2017/02/20 Javascript
JS对象深度克隆实例分析
2017/03/16 Javascript
JavaScript学习总结之正则的元字符和一些简单的应用
2017/06/30 Javascript
npm 下载指定版本的组件方法
2018/05/17 Javascript
JS使用队列对数组排列,基数排序算法示例
2019/03/02 Javascript
python调用短信猫控件实现发短信功能实例
2014/07/04 Python
使用python中的in ,not in来检查元素是不是在列表中的方法
2018/07/06 Python
实时获取Python的print输出流方法
2019/01/07 Python
python3编写ThinkPHP命令执行Getshell的方法
2019/02/26 Python
python常用函数与用法示例
2019/07/02 Python
python树的同构学习笔记
2019/09/14 Python
python爬虫之遍历单个域名
2019/11/20 Python
为什么说python更适合树莓派编程
2020/07/20 Python
Jupyter安装拓展nbextensions及解决官网下载慢的问题
2021/03/03 Python
中国排名第一的外贸销售网站:LightInTheBox.com(兰亭集势)
2016/10/28 全球购物
亚马逊西班牙购物网站:amazon西班牙
2017/03/06 全球购物
Brora官网:英国领先的羊绒服装品牌
2019/08/28 全球购物
给排水专业应届生求职信
2013/10/12 职场文书
初中生学习生活的自我评价
2013/11/20 职场文书
房地产营销策划方案
2014/02/08 职场文书
幼儿园教师考核评语
2014/12/31 职场文书
2016反腐倡廉警示教育心得体会
2016/01/13 职场文书
2019入党申请书格式和范文
2019/06/25 职场文书
创业计划书之淘宝网店
2019/10/08 职场文书