jquery文字左右滚动

实现jquery文字左右滚动

<div class="fl">中奖名单:</div>
   <div class="scrollText">
     <ul>
        <li><span>138****7874</span>获得充电宝</li>
        <li><span>138****7874</span>获得better</li>
        <li><span>138****7874</span>获得充电宝</li>
        <li><span>138****7874</span>获得better</li>
    </ul>
   </div>
 </div>

  

css

.scrollText {
    width: 260px;
    float: left;
    overflow: hidden;

    ul li {
        float: left;
        padding-right: 10px;
    }

    ul:after {
        content: ‘‘;
        clear: both;
        display: table;
    }
}

  

调用的js

setTimeout(function (){
            scrollLeftToRight();
        },1000);

function scrollLeftToRight(){
        var $wrap = $(‘.scrollText‘);
        var $ul = $wrap.find(‘ul‘);
        var wrap_width = $wrap.width();
        var timer = null;
        var li_w = 0;

        $ul.find(‘li‘).each(function () {
            li_w += $(this).outerWidth();
        });

        if (li_w <= wrap_width) {
            return false;
        }

        $ul.css(‘width‘, li_w);

        var i = 0;
        var x = 0;
        function _marquee() {
            var _w = $ul.find(‘li:eq(0)‘).outerWidth();
            i ++;
            if (i >= _w) {
                $ul.find(‘li:eq(0)‘).remove();
                i = 0;
                x = 0;
            } else {
                $ul.find(‘li:eq(0)‘).css(‘marginLeft‘, -i);
                if (i >= Math.max(_w - wrap_width, 0)) {
                    if (x === 0) {
                        var _li = $ul.find(‘li:eq(0)‘).clone(true);
                        $ul.append(_li.css(‘marginLeft‘, 0));
                        x = 1;
                    }
                }
            }
            var _ul_w = 0;
            $ul.find(‘li‘).each(function () {
                _ul_w += $(this).outerWidth();
            });

            $ul.css(‘width‘, _ul_w);
        }

        timer = setInterval(_marquee, 20);
    }

  

时间: 2024-10-29 14:47:28

jquery文字左右滚动的相关文章

jquery文字垂直滚动代码实例

jquery文字垂直滚动代码实例: 文字垂直滚动效果在大量网站都有应用,尤其在新闻公告或者新闻列表之类形式的功能结构中出现. 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.51texiao.cn/" /> <title>蚂

jquery文字纵向滚动效果(带间隔停留)

<script type="text/javascript"> //文字纵向滚动 $(function() { var $this = $("#quotation"); var scrollTimer; $this.hover(function() { clearInterval(scrollTimer); }, function() { scrollTimer = setInterval(function() { scrollNews($this);

jQuery实现文字横向滚动效果

HTML代码: <div id="aaa" style="width:100px; position:relative; white-space:nowrap; overflow:hidden; height:20px;"> <div id="noticeList" style="position:absolute; top:0; height:20px;"> <span>jQuery文字横

jquery 文字滚动大全 scroll 支持文字或图片 单行滚动 多行滚动 带按钮控制滚动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

jQuery文字和图片列表滚动插件

这是一款可以使任何文字和图片列表进行水平和垂直滚动的jQuery插件.该jquery列表滚动插件可以使用任何列表.任何尺寸和任何内容.它可以设置水平和垂直滚动,自动滚动和无限循环滚动,非常适用于滚动新闻的制作. 该jQuery文字图片滚动插件的特点和一些注意事项如下: 使用非常简单. 可以在任何形式的列表. 列表中的元素可以是文字.图片等等. 列表中的元素不能是固定定位,或者是相同的元素. 列表元素可以水平或垂直滚动. 可以使列表简单滚动或无限循环滚动. 可以手动滚动列表,也可是设置为自动滚动.

css+jQuery制作的文字循环滚动代码

css+jQuery制作的文字循环滚动代码,尺寸只需要在css中调整即可,另外别忘记在function里面修改相关参数 百度网盘下载

jquery实现文字上下滚动效果

文字上下滚动是经常用到的js效果,这里介绍一种上下渐隐渐出的文字展现效果! 代码实现很简单,只需要引入jquery就可以. 代码如下: <!DOCTYPE> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>文字滚动</title> <style type="text/css

jquery实现文字向上滚动显示效果的简易方法(个人随笔)

HTML代码: <!doctype html> <html> <head> <meta charset="utf-8"> <title>文字向上滚动</title> <link type="text/css" rel="stylesheet" href="style/style.css"/> <script type="text

js原生 + jQuery实现页面滚动字幕

js原生/jQuery实现页面滚动字幕效果 17:45:49 在新闻列表或者文章列表信息等页面中很容易要求实现字幕滚动的效果,以下为简单的实现页面中滚动字幕的效果 1.jQuery实现页面滚动字幕效果 代码如下: <div class="box"> <ul class="list"> <li>这是滚动加载的第1条数据</li> <li>你猜猜这是第几条滚动加载的文字</li> <li>