精华内容
下载资源
问答
  • 实现文字左右滚动的方法有两种,一是借助于marquee、二是普通的实现,两种方法各有优缺,看看测试下再做选择
  • 介绍了jQuery实现公告文字左右滚动的实例代码,有需要的朋友可以参考一下
  • jquery文字左右滚动

    2015-09-17 14:13:00
    实现jquery文字左右滚动 <div class="fl">中奖名单:</div> <div class="scrollText"> <ul> <li><span>138****7874</span>获得...

    实现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);
        }
    

      

    转载于:https://www.cnblogs.com/gzx618/p/4816249.html

    展开全文
  • JQ- 文字左右滚动

    千次阅读 2018-02-27 09:38:58
    代码: &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&...文字左右滚动&lt;/title&gt; &lt;/head&gt; &lt;style&gt; * {

    代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>文字左右滚动</title>
    </head>
    <style>
        * {
            padding:0;
            margin:0;
            font-family:"微软雅黑";
        }
        li {
            list-style:none;
        }
        a {
            text-decoration:none;
        }
        .box {
            padding-left:50px;
            margin-top:100px;
            margin-left:100px;
        }
        .Box {
            width:150px;
            height:40px;
            overflow:hidden;
            position:relative;
            background:pink;
        }
        .scroll {
           width:150px;/*width的大小是根据下面li的长度和li个数而定的!*/
            position:absolute;
            left:0 ;
            top:0 ;
        }
        .scroll li {
            width:150px;
            float:left;
            line-height:40px;
            text-align:center;
        }
    
    </style>
    <body>
    <div class="box">
        <div class="Box">
            <ul class="scroll">
                <li><a href="#">滚动的文字</a></li>
            </ul>
        </div>
    </div>
    </body>
    <script src="../libs/jquery-3.2.1.min.js"></script>
    <script>
        $(function() {
            var num = 0;
            function goLeft() {
                if (num == -120) {//120是根据你给的尺寸,可变的
                    num = 0;
                }
                num -= 1;
                $(".scroll").css({
                    left: num
                })
            }
            //滚动速度
            var timer = setInterval(goLeft, 50);
            //鼠标经过时滚动停止
            $(".box").hover(function() {
                        clearInterval(timer);
                    },
                    function() {
                        timer = setInterval(goLeft, 50);
                    })
        })
    </script>
    </html>
    展开全文
  • jQuery实现公告文字左右滚动 jQuery实现公告文字左右滚动的代码。<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><...

    jQuery实现公告文字左右滚动的代码。

    <!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-Type" content="text/html; charset=gb2312" />
    <title>jQuery公告文字左右滚动效果-www.jbxue.com</title>
    <style type="text/css"> 
    #scrollText {
        width: 400px;
        margin-right: auto;
        margin-left: auto;
    }
    </style>
    </head>
    <script type="text/javascript" src="/source/js/jquery-1.6.2.min.js"></script>
    <script type="text/javascript">
    var ScrollTime;
    function ScrollAutoPlay(contID,scrolldir,showwidth,textwidth,steper){
        var PosInit,currPos;
        with($('#'+contID)){
            currPos = parseInt(css('margin-left'));
            if(scrolldir=='left'){
                if(currPos<0 && Math.abs(currPos)>textwidth){
                    css('margin-left',showwidth);
                }
                else{
                    css('margin-left',currPos-steper);
                }
            }
            else{
                if(currPos>showwidth){
                    css('margin-left',(0-textwidth));
                }
                else{
                    css('margin-left',currPos-steper);
                }
            }
        }
    }

    //--------------------------------------------左右滚动效果----------------------------------------------
    /*

    AppendToObj:        显示位置(目标对象)
    ShowHeight:        显示高度
    ShowWidth:        显示宽度
    ShowText:        显示信息
    ScrollDirection:    滚动方向(值:left、right)
    Steper:        每次移动的间距(单位:px;数值越小,滚动越流畅,建议设置为1px)
    Interval:        每次执行运动的时间间隔(单位:毫秒;数值越小,运动越快)
    */
    function ScrollText(AppendToObj,ShowHeight,ShowWidth,ShowText,ScrollDirection,Steper,Interval){
        var TextWidth,PosInit,PosSteper;
        with(AppendToObj){
            html('');
            css('overflow','hidden');
            css('height',ShowHeight+'px');
            css('line-height',ShowHeight+'px');
            css('width',ShowWidth);
        }
        if (ScrollDirection=='left'){
            PosInit = ShowWidth;
            PosSteper = Steper;
        }
        else{
            PosSteper = 0 - Steper;
        }
        if(Steper<1 || Steper>ShowWidth){Steper = 1}//每次移动间距超出限制(单位:px)
        if(Interval<1){Interval = 10}//每次移动的时间间隔(单位:毫秒)
        var Container = $('<div></div>');
        var ContainerID = 'ContainerTemp';
        var i = 0;
        while($('#'+ContainerID).length>0){
            ContainerID = ContainerID + '_' + i;
            i++;
        }
        with(Container){
          attr('id',ContainerID);
          css('float','left');
          css('cursor','default');
          appendTo(AppendToObj);
          html(ShowText);
          TextWidth = width();
          if(isNaN(PosInit)){PosInit = 0 - TextWidth;}
          css('margin-left',PosInit);
          mouseover(function(){
              clearInterval(ScrollTime);
          });
          mouseout(function(){
              ScrollTime = setInterval("ScrollAutoPlay('"+ContainerID+"','"+ScrollDirection+"',"+ShowWidth+','+TextWidth+","+PosSteper+")",Interval);
          });
        }
        ScrollTime = setInterval("ScrollAutoPlay('"+ContainerID+"','"+ScrollDirection+"',"+ShowWidth+','+TextWidth+","+PosSteper+")",Interval);
    }
    </script>
    <script type="text/javascript"> 
    $(document).ready(function(e) {
        ScrollText($('#scrollText'),23,400,'欢迎光临脚本学习网!','left',1,20);//滚动字幕
    });
    </script>
    <body>
    <div id="scrollText"></div>
    <script type="text/javascript"> 
    if(document.getElementById('GoogleAD')!=null){
        document.getElementById('GoogleAD').innerHTML = '<div class="SearchEngine_AD1">' + document.getElementById('GoogleADCode').innerHTML + '</div>';
    }
    </script>
    </body>
    </html>
     
    posted on 2013-09-04 20:13 snowfly123 阅读(...) 评论(...) 编辑 收藏

    转载于:https://www.cnblogs.com/linuxnotes/p/3301910.html

    展开全文
  • 文字左右滚动标签

    2010-07-27 22:12:00
    <marquee behavior="alternate"> <font size=20 color='blue'>html实现文字左右滚动效果<font><br /> </marquee>

    <marquee behavior="alternate">
    <font size=20 color='blue'>html实现文字左右滚动效果<font>
    </marquee>

    展开全文
  • http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">JS文字间隔性滚动代码--------------文字左右滚动body{ font-size:12px;}#shangfan{font-family: 新宋体, 宋体, 仿宋_GB...
  • 实现文字左右滚动

    2019-12-30 11:23:37
    <div class="box"> <div class=-animate> </div> </div> .box { width: 300px; margin: 0 auto; overflow: hidden; } .animate ...
  • <!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><met...
  • 文字左右滚动代码

    2017-07-24 14:06:34
    <marquee behavior="scroll" contenteditable="true" onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" scrollamount="3" width="500" onmouseover="this.stop();" onmouseout="this...
  • TextView单行显示,文字左右滚动(走马灯效果)实现条件: 实现单行设置固定宽度或者设置权重都行 代码 TextView滚动必须写下面几个属性 android:singleLine="true" android:ellipsize="marquee" ...
  • css实现文字左右滚动效果

    万次阅读 2019-03-07 14:49:59
    &lt;div className={styles.rotaryContainer}&gt; &lt;div className={styles.rotaryBlockFirst}&gt; 注释:自2019年7月起,这是一段很长的文本文本文本文本文本文本文本文本文本文本文本文本文本...
  • WPF 继承Label控件实现文字左右滚动显示背景操作流程代码 背景 由于公司项目需要,查找资料后在这里记录代码以及使用流程 操作流程 代码
  • 参考链接:http://www.86y.org/art_detail.aspx?id=587 代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <...
  • 有时候下拉框里面的一条内容很多,下拉框显示不完,则需要左右滚动的效果来显示剩下的文字。 代码很简单: 无标题文档 function init(){ var os=document.getElementsByTagName("option"); for(var i...
  • VUE实现文字左右滚动跑马灯

    千次阅读 2019-09-06 14:00:42
    直接上代码 // 在components中定义一个可引用的组件 // 此功能封装并非原创,在网上看到的,哪里看的忘了 // components 部分 <template> <div class="my-outbox"> ...div class="my-inbox" ref='box'>...
  • js实现文字左右滚动

    千次阅读 2016-04-13 11:48:26
    span class="jrj-red-b ml5">最新要闻:span> div class="jrj-fr" style="width: 760px;position: relative;"> div id="scgl_s1_scroll" style="overflow: hidden; width: 650px;white-space: nowrap;...
  • 实现android之文字左右滚动

    千次阅读 2014-04-24 11:16:41
    下面贴一下代码: xml android:layout_width="fill_parent" android:id="@+id/textView" android:textSize="15dip" android:la
  • 文字左右滚动效果

    2011-04-10 15:15:00
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><...<head><meta htt...
  • html 实现文字左右滚动的方法

    千次阅读 2014-08-22 14:24:44
    这里是要滚动的内容 这里是要滚动的内容 function scroll(obj) { var tmp = (obj.scrollLeft)++; //当滚动条到达右边顶端时 if (obj.scrollLeft==tmp) obj.innerHTML += obj.innerHTML; //当滚动滚动了初始...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 477
精华内容 190
关键字:

文字左右滚动