精华内容
下载资源
问答
  • 文字横向滚动

    2019-10-06 16:53:23
    文字横向滚动 function ScrollImgLeft() { var speed = 50 ; var MyMar = null ; var scroll_begin = document.getElementById( " scroll_begin " ); var scroll_end = document....
    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
        <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
        <title>js实现文字超过显示宽度每间隔1s自动向左滚动显示</title>
        <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
    
        body {
            max-width: 640px;
            margin: 0 auto;
        }
    
        .pad_right {
            padding-right: 2em;
        }
    
        #scroll_div {
            height: 26px;
            overflow: hidden;
            white-space: nowrap;
            width: 535px;
            margin-left: 10px;
        }
    
        #scroll_begin,
        #scroll_end {
            display: inline;
        }
        </style>
    </head>
    
    <body>
        <div id="scroll_div" class="fl">
            <div id="scroll_begin">
                恭喜793765***获得 <span class="pad_right">50元巨人点卡奖励</span> 恭喜793765***获得 <span class="pad_right">50元巨人点卡奖励</span> 恭喜793765***获得 <span class="pad_right">50元巨人点卡奖励</span> 恭喜793765***获得 <span class="pad_right">50元巨人点卡奖励</span> 恭喜793765***获得 <span class="pad_right">50元巨人点卡奖励</span> 恭喜793765***获得 <span class="pad_right">50元巨人点卡奖励</span> 恭喜793765***获得 <span class="pad_right">50元巨人点卡奖励</span>
            </div>
            <div id="scroll_end"></div>
        </div>
        <script type="text/javascript">
        //文字横向滚动
        function ScrollImgLeft() {
            var speed = 50;
            var MyMar = null;
            var scroll_begin = document.getElementById("scroll_begin");
            var scroll_end = document.getElementById("scroll_end");
            var scroll_div = document.getElementById("scroll_div");
            scroll_end.innerHTML = scroll_begin.innerHTML;
    
            function Marquee() {
                if (scroll_end.offsetWidth - scroll_div.scrollLeft <= 0)
                    scroll_div.scrollLeft -= scroll_begin.offsetWidth;
                else
                    scroll_div.scrollLeft++;
            }
            MyMar = setInterval(Marquee, speed);
            scroll_div.onmouseover = function() {       
                clearInterval(MyMar);     
            }    
            scroll_div.onmouseout = function() {       
                MyMar = setInterval(Marquee, speed);         
            }
        }
        ScrollImgLeft();
        </script>
    </body>
    
    </html>

    效果图:

     

    原链接:http://www.jb51.net/article/74683.htm

     二、垂直滚动:

     

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>垂直滚动</title>
        <style type="text/css">
        #gongao {
            width: 1000px;
            height: 110px;
            overflow: hidden;
            line-height: 30px;
            font-size: 13px;
            font-family: '宋体';
            background: #DDE5ED;
            color: #0C77CF;
            font-weight: bold;
        }
        </style>
    </head>
    
    <body>
        <script type="text/javascript">
        //要想滑动不停  scroll_begin的内容高度必须大于scroll_div的高度
        function ScrollImgLeft() {
            var speed = 50;
            var scroll_begin = document.getElementById("scroll_begin");
            var scroll_end = document.getElementById("scroll_end");
            var scroll_div = document.getElementById("scroll_div");
            scroll_end.innerHTML = scroll_begin.innerHTML;
    
            function Marquee() {
                //scrollTop滑动条起点向下滑动的距离 当滑动条滑动的距离为一个div的高度时 即一个div显示完后 
                //迅速重置滑动条的起点为最上端 重新显示第一个div内容 视觉上达到滚动的效果
                if (scroll_end.offsetHeight - scroll_div.scrollTop <= 0)
                    scroll_div.scrollTop -= scroll_begin.offsetHeight;
                else
                    scroll_div.scrollTop++;
            }
            var MyMar = setInterval(Marquee, speed);
            scroll_div.onmouseover = function() { clearInterval(MyMar); }
            scroll_div.onmouseout = function() { MyMar = setInterval(Marquee, speed); }
        }
        </script>
        <div id="gongao">
            <div style="width:200px;height:100px;margin:0 auto;white-space: nowrap;overflow:auto;" id="scroll_div" class="scroll_div">
                <div id="scroll_begin">
                    <table>
                        <tr>
                            <td>1.111jjdkkdl经典款进口</td>
                        </tr>
                        <tr>
                            <td>2.222kdal经济快递就经济快递来</td>
                        </tr>
                        <tr>
                            <td>3.333jjdkkdl经典款进口</td>
                        </tr>
                        <tr>
                            <td>4.444kdal经济快递就经济快递来</td>
                        </tr>
                        <tr>
                            <td>5.555jjdkkdl经典款进口</td>
                        </tr>
                        <tr>
                            <td>6.666kdal经济快递就经济快递来</td>
                        </tr>
                    </table>
                </div>
                <div id="scroll_end"></div>
            </div>
            <script type="text/javascript">
            ScrollImgLeft();
            </script>
        </div>
    </body>
    
    </html>

    效果图:

     

    附加知识:

     

    对象的几个的属性:
    innerHTML:设置或获取位于对象起始和结束标签内的 HTML
    scrollHeight: 获取对象的滚动高度。
    scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
    scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
    scrollWidth:获取对象的滚动宽度
    offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
    offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
    offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
    offsetWidth:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度

    1.向左滚动

    if(scroll_end.offsetWidth-scroll_div.scrollLeft
    向左滚动
    ScrollImgLeft();

     

    2.向上滚动

    if(scroll_end.offsetTop-scroll_div.scrollTop
    向上滚动
    ScrollImgTop();

    转载于:https://www.cnblogs.com/huanghuali/p/8510019.html

    展开全文
  • js文字横向滚动特效

    2020-10-23 08:39:43
    主要介绍了js文字横向滚动特效,实现过程很简单,文字在某块区域内横向无间隙滚动,感兴趣的小伙伴们可以参考一下
  • js 文字横向滚动

    2013-01-21 16:37:30
    简单、实用的javascript文字横向滚动效果。
  • 需求最新项目需要一个文字横向滚动效果,vue 文字横向无缝走马灯组件写的很详细,记录下来,广播出去。解决方案1、 HTML先建一个div层作为公告显示区,里面包裹一个公告列表(ul); 2、 CSS每条公告信息(li)的margin...

    需求

    最新项目需要一个文字横向滚动效果,

    vue 文字横向无缝走马灯组件

    写的很详细,记录下来,广播出去。

    解决方案

    1、 HTML

    先建一个div层作为公告显示区,里面包裹一个公告列表(ul);

    2、 CSS

    每条公告信息(li)的margin必须设置‘px’单位,否则要转换,后面js中回到起点还要用到这个值。

    body,div,html,img,li,ul{margin:0;padding:0;border:0}

    li{list-style:none}

    .advert-top{position:relative;display:flex;width:100%;height:.88rem;background:linear-gradient(270deg,rgba(80,175,255,1) 0,rgba(13,132,248,1) 48%,rgba(55,159,248,1) 86%,rgba(81,176,255,1) 100%);color:#fff;font-size:.26rem;align-items:center}

    .ico-horn{display:flex;width:.88rem;height:.88rem;justify-content:center;align-items:center}

    .ico-horn>img{width:.32rem;height:.32rem}

    /* 以下代码与滚动相关 */

    .marquee-wrap{position:relative;display:flex;overflow:hidden;width:100%;height:100%}

    .marquee-box{position:absolute;top:50%;display:flex;white-space:nowrap;transform:translateY(-50%)}

    .marquee-list{margin-right:10px} /* 此处“px”方便回到起点 */

    .marquee-list span{padding:0 .04rem;color:#ffe17b;font-weight:700}

    3、 JavaScript

    var vm = new Vue({

    el: '#app',

    data: {

    ico_horn: 'https://img.alicdn.com/tfs/TB1zwftaPrguuRjy0FeXXXcbFXa-16-16.png',

    message: "全球新冠肺炎确诊病例超45万,死亡人数破2万!",

    },

    mounted: function () {

    // 延时滚动

    setTimeout(() => {

    this.runMarquee()

    }, 1000)

    },

    methods: {

    runMarquee() {

    // 获取文字 计算后宽度

    var width = document.getElementById('marquee').getBoundingClientRect().width,

    marquee = document.getElementById('marquee-box'),

    disx = 0; // 位移距离

    //设置位移

    setInterval(() => {

    disx--; // disx-=1; 滚动步长

    if (-disx >= width) {

    disx = 10; // 如果位移超过文字宽度,则回到起点 marquee-list的margin值

    }

    // marquee.style.transform = 'translateX(' + disx + 'px)'

    marquee.style.left = disx + 'px'

    }, 30) //滚动速度

    }

    }

    });

    // JavaScript Document

    (function px2rem(doc, win) {

    var docEl = doc.documentElement,

    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',

    recalc = function () {

    var clientWidth = docEl.clientWidth;

    if (!clientWidth) return;

    docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';

    /*

    * 100 -> html,body { font-size:100px; }

    * 750 -> 此处以 iPhone6 两倍设计稿 宽度750px 布局页面

    * 根据具体情况改变这两个数值

    */

    };

    if (!doc.addEventListener) return;

    // 窗口大小发生变化,初始化

    win.addEventListener(resizeEvt, recalc, false);

    doc.addEventListener('DOMContentLoaded', recalc, false);

    //防止在html未加载完毕时执行,保证获取正确的页宽

    setTimeout(function () {

    px2rem(doc, win);

    }, 200);

    })(document, window);

    作者:月影

    展开全文
  • 文字横向滚动效果

    千次阅读 2017-11-03 14:54:34
    利用JS和CSS3两种方法实现文字横向滚动效果

    1.利用jQuery的animta方法

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>TEXT-MOVE</title>
      <script SRC="../lib/jquery.min.js"></script>
      <style type="text/css" rel="stylesheet">
        * {
          margin: 0;
          padding: 0;
        }
        .container {
          margin: 200px auto;
          width: 500px;
          height: 50px;
          line-height: 50px;
          border: 1px solid red;
          overflow: hidden;
        }
        .text {
          display: inline-block;
          white-space: nowrap;
        }
      </style>
    </head>
    <body>
    <div class="container">
      <p class="text">我是一段滚动的文字我是一段滚动的文字我是一段滚动的文字我是一段滚动的文字我是一段滚动的文字</p>
    </div>
    <script>
      var $container = $('.container'),
        $text = $('.text');
      var direction = 1, // 1为从左进入,2为从右进入
        speed = 3000; // 数值越小速度越快
    
      var textMove = function (obj, container, direction, speed) {
        // 定义文字初始位置
        var initMarginLeft = '-' + obj.width() + 'px';
        obj.css({"margin-left": initMarginLeft});
        // 定义动画
        var move = function () {
          // 定义暂停后的速度
          var allDistance = obj.width() + container.width(),
            remainedDistance = container.width() - parseInt(obj.css('margin-left')),
            currentSpeed = (speed * remainedDistance ) / allDistance;
          // 移动效果
          obj.animate({"margin-left": container.width() + 'px'}, currentSpeed, 'linear', function () {
            obj.stop(true, true);
            obj.css({"margin-left": initMarginLeft});
            move();
          });
        };
        move();
        //  定义容器的暂停、恢复效果
        container.on("mouseenter", function () {obj.stop(true)})
          .on('mouseleave', function () {move()})
      };
    
      textMove($text, $container, direction, speed);
    </script>
    </body>
    </html>

    2. 利用CSS3的keyframe规则

    • 目前浏览器都不支持 @keyframes 规则。
    • Firefox 支持替代的 @-moz-keyframes 规则。
    • Opera 支持替代的 @-o-keyframes 规则。
    • Safari 和 Chrome 支持替代的 @-webkit-keyframes 规则。

    通过 @keyframes 规则,您能够创建动画。

    创建动画的原理是,将一套 CSS 样式逐渐变化为另一套样式。

    在动画过程中,您能够多次改变这套 CSS 样式。

    以百分比来规定改变发生的时间,或者通过关键词 “from” 和 “to”,等价于 0% 和 100%。

    0% 是动画的开始时间,100% 动画的结束时间。

    为了获得最佳的浏览器支持,您应该始终定义 0% 和 100% 选择器。

    注释:请使用动画属性来控制动画的外观,同时将动画(天然与选择器绑定)。

    语法:

    @keyframes animationname {keyframes-selector {css-styles;}}
    • nimationname–必需。定义动画的名称。
    • keyframes-selector–必需。动画时长的百分比。合法的值:0-100%from(与 0% 相同)to(与 100% 相同)
    • css-styles 必需。一个或多个合法的 CSS 样式属性。
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>TEXT-MOVE</title>
      <script SRC="../lib/jquery.min.js"></script>
      <style type="text/css" rel="stylesheet">
        * {
          margin: 0;
          padding: 0;
        }
        .container {
          margin: 200px auto;
          width: 500px;
          height: 50px;
          line-height: 50px;
          border: 1px solid red;
          overflow: hidden;
        }
        .text {
          position: relative;
          display: inline-block;
          white-space: nowrap;
          /*animation:scroll 5s 0s linear infinite;*/
          animation-name: scroll;
          animation-duration: 5s;
          animation-delay: 0ms;
          animation-timing-function: linear;
          animation-iteration-count: infinite;
          -webkit-animation-name: scroll;
          -webkit-animation-delay: 0ms;
          -webkit-animation-duration: 5s;
          -webkit-animation-timing-function: linear;
          -webkit-animation-iteration-count: infinite;
          -moz-animation-name: scroll;
          -moz-animation-delay: 0ms;
          -moz-animation-duration: 5s;
          -moz-animation-timing-function: linear;
          -moz-animation-iteration-count: infinite;
        }
        @-webkit-keyframes scroll {
          100% {
            margin-left: 100%;
          }
        }
        @-moz-keyframes scroll {
          100%  {
            margin-left: 100%;
          }
        }
        @-ms-keyframes scroll {
          100%  {
            margin-left: 100%;
          }
        }
        .text:hover {
          -webkit-animation-play-state: paused;
        }
      </style>
    </head>
    <body>
    <div class="container">
      <p class="text">我是一段滚动的文字我是一段滚动的文字我是一段滚动的文字我是一段滚动的文字我是一段滚动的文字</p>
    </div>
    <script>
      var $text = $('.text');
      var initMarginLeft = '-' + $text.width() + 'px';
      $text.css({"margin-left": initMarginLeft});
    </script>
    </body>
    </html>
    展开全文
  • 下面小编就为大家带来一篇jQuery文字横向滚动效果的实现代码。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • javascript文字横向滚动

    2010-08-05 16:15:59
    javascript文字横向滚动,多条文字可以在一行中滚动显示出来。速度可以控制。
  • 需求最新项目需要一个文字横向滚动效果,vue 文字横向无缝走马灯组件写的很详细,记录下来,广播出去。解决方案1、 HTML先建一个div层作为公告显示区,里面包裹一个公告列表(ul); 2、 CSS每条公告信息(li)的margin...

    需求

    最新项目需要一个文字横向滚动效果,

    vue 文字横向无缝走马灯组件

    写的很详细,记录下来,广播出去。

    解决方案

    1、 HTML

    先建一个div层作为公告显示区,里面包裹一个公告列表(ul);

    2、 CSS

    每条公告信息(li)的margin必须设置‘px’单位,否则要转换,后面js中回到起点还要用到这个值。

    body,div,html,img,li,ul{margin:0;padding:0;border:0}

    li{list-style:none}

    .advert-top{position:relative;display:flex;width:100%;height:.88rem;background:linear-gradient(270deg,rgba(80,175,255,1) 0,rgba(13,132,248,1) 48%,rgba(55,159,248,1) 86%,rgba(81,176,255,1) 100%);color:#fff;font-size:.26rem;align-items:center}

    .ico-horn{display:flex;width:.88rem;height:.88rem;justify-content:center;align-items:center}

    .ico-horn>img{width:.32rem;height:.32rem}

    /* 以下代码与滚动相关 */

    .marquee-wrap{position:relative;display:flex;overflow:hidden;width:100%;height:100%}

    .marquee-box{position:absolute;top:50%;display:flex;white-space:nowrap;transform:translateY(-50%)}

    .marquee-list{margin-right:10px} /* 此处“px”方便回到起点 */

    .marquee-list span{padding:0 .04rem;color:#ffe17b;font-weight:700}

    3、 JavaScript

    var vm = new Vue({

    el: '#app',

    data: {

    ico_horn: 'https://img.alicdn.com/tfs/TB1zwftaPrguuRjy0FeXXXcbFXa-16-16.png',

    message: "全球新冠肺炎确诊病例超45万,死亡人数破2万!",

    },

    mounted: function () {

    // 延时滚动

    setTimeout(() => {

    this.runMarquee()

    }, 1000)

    },

    methods: {

    runMarquee() {

    // 获取文字 计算后宽度

    var width = document.getElementById('marquee').getBoundingClientRect().width,

    marquee = document.getElementById('marquee-box'),

    disx = 0; // 位移距离

    //设置位移

    setInterval(() => {

    disx--; // disx-=1; 滚动步长

    if (-disx >= width) {

    disx = 10; // 如果位移超过文字宽度,则回到起点 marquee-list的margin值

    }

    // marquee.style.transform = 'translateX(' + disx + 'px)'

    marquee.style.left = disx + 'px'

    }, 30) //滚动速度

    }

    }

    });

    // JavaScript Document

    (function px2rem(doc, win) {

    var docEl = doc.documentElement,

    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',

    recalc = function () {

    var clientWidth = docEl.clientWidth;

    if (!clientWidth) return;

    docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';

    /*

    * 100 -> html,body { font-size:100px; }

    * 750 -> 此处以 iPhone6 两倍设计稿 宽度750px 布局页面

    * 根据具体情况改变这两个数值

    */

    };

    if (!doc.addEventListener) return;

    // 窗口大小发生变化,初始化

    win.addEventListener(resizeEvt, recalc, false);

    doc.addEventListener('DOMContentLoaded', recalc, false);

    //防止在html未加载完毕时执行,保证获取正确的页宽

    setTimeout(function () {

    px2rem(doc, win);

    }, 200);

    })(document, window);

    展开全文
  • 主要介绍了Vue替代marquee标签超出宽度文字横向滚动效果,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • js实现文字横向滚动

    千次阅读 2016-08-06 20:46:48
    js实现文字横向滚动
  • 1、文字横向滚动使用&lt;marquee&gt;标签即可。&lt;marquee&gt;&lt;h1 style="margin: 40px; font: 30px Microsoft Yahei; text-align: center;"&gt;简单的jQuery无缝向上滚动...
  • 12864文字横向滚动

    热门讨论 2012-04-23 09:54:31
    功能:文字横向滚动(程序里面有效果图) 实现语言:c语言 1286自带有垂直滚动,但是自带的垂直滚动并不是连续的等于形同虚设 本例是利用了LCD12864的绘图功能,通过对12864的读写操作实现的 1.本程序是原创程序...
  • DIV+CSS纵向横向下拉菜单,JS图片文字横向滚动,比较实用小例子,和大家分享下!
  • iScroll.js 用法参考 (share)分享是传播、学习知识最好的方法以下这篇文章是iScroll.js官网的中文翻译,尽管自己英文不好,但觉得原作者们翻译的这个资料还是可以的,基本用法介绍清楚了。如果你英文比较好的话,...
  • 需求最新项目需要一个文字横向滚动效果,vue 文字横向无缝走马灯组件写的很详细,记录下来,广播出去。解决方案1、 HTML先建一个div层作为公告显示区,里面包裹一个公告列表(ul); 2、 CSS每条公告信息(li)的margin...
  • vue 文字横向滚动

    千次阅读 2019-02-23 17:08:51
    转自:https://www.jianshu.com/p/a9e1cf8efbf3  
  • 实现网站公告横向滚动的需求(vue-cli) 二、思路和实现 1.可以通过改变元素的marginLeft值和计时器来实现滚动 HTML代码如下(示例): <template> <div id="box" ref="box"> &l
  • 实现文字横向滚动

    千次阅读 2019-03-04 16:59:16
    //当滚动滚动了初始内容的宽度时滚动条回到最左端 if (obj.scrollLeft >= obj.firstChild.offsetWidth) obj.scrollLeft = 0; } var a = setInterval("scroll(document.getElementById('scrollobj'))", 20); ...
  • 项目中用到一个横向滚动的TextView用来显示通知自定义控件代码如下:public class MarqueeTextView extends TextView { public MarqueeTextView(Context context) { this(context, null); } public ...
  • js文字横向滚动

    千次阅读 2018-07-16 15:57:03
    <title>js文字向左无缝滚动 .qimo8{ overflow:hidden; width:815px;} .qimo8 .qimo {/*width:99999999px;*/width:8000%; height:30px;} .qimo8 .qimo div{ float:left;} .qimo8 .qimo ul{float:left; height:30px...
  • 文字横向滚动的实现

    千次阅读 2005-09-26 15:20:00
    文字横向滚动的关键在于在计时器里递增文字位置的偏移并重绘,还要处理边界和循环绘制的效果,下面是一个基于CStatic的文字横向滚动的例子void CMyStatic::OnTimer(UINT nIDEvent) { // TODO: Add your message ...
  • 文字横向滚动marquee

    2017-11-07 10:56:00
    ; height:300px"> ;" scrollamount="3" width="100" onmouseover="this.stop();" onmouseout="this.start();"> 这里是要滚动的内容 转载于:https://www.cnblogs.com/zouyun/p/7797971.html
  • 文字横向滚动应用实例(DIV + CSS、鼠标拖动)

空空如也

空空如也

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

文字横向滚动