精华内容
下载资源
问答
  • vue中实现文字超出横向滚动

    千次阅读 2020-12-15 16:51:38
    vue中实现文字超出横向滚动 marquee组件 <template> <div class="marquee-wrap" ref="marquee-wrap"> <div class="scroll" ref="scroll"> <p class="marquee">{{text}}</p> <p...

    vue中实现文字超出横向滚动

    marquee组件
    <template>
      <div class="marquee-wrap" ref="marquee-wrap">
        <div class="scroll" ref="scroll">
          <p class="marquee">{{text}}</p>
          <p class="copy" ref="copy"></p>
        </div>
        <p class="getWidth" ref="getWidth">{{text}}</p>
      </div>
    </template>
    
    <script>
    export default {
      name: 'marquee',
      props: ['val'],
      data () {
        return {
          timer: null,
          text: ''
        }
      },
      created () {
        let timer = setTimeout(() => {
          this.move()
          clearTimeout(timer)
        }, 1000)
      },
      mounted () {
        for (let item of this.val) {
        this.text += item
        }
      },
      methods: {
        move () {
        let maxWidth = this.$refs['marquee-wrap'].clientWidth
        let width = this.$refs['getWidth'].scrollWidth
          if (width <= maxWidth) return
        let scroll = this.$refs['scroll']
        let copy = this.$refs['copy']
          copy.innerText = this.text
          let distance = 0 
          this.timer = setInterval(() => {
            distance -= 1
            if (-distance >= width) {
              distance = 16
            }
            scroll.style.transform = 'translateX(' + distance + 'px)'
          }, 20)
        }
      },
      beforeDestroy () {
        clearInterval(this.timer)
      }
    }
    </script>
    
    <style scoped>
      .marquee-wrap {
        width: 100%;
        overflow: hidden;
        position: relative;
      }
      .marquee{
        margin-right: 0.16rem;
      }
      p {
        word-break:keep-all;
        white-space: nowrap;
        font-size: 0.28rem;
      }
      .scroll {
        display: flex;
      }
      .getWidth {
        word-break:keep-all;
        white-space:nowrap;
        position: absolute;
        opacity: 0;
        top: 0;
      }
    </style>
    
    使用marquee组件
    //引入组件
    import Marquee from './marquee'
    //注册并使用
    <Marquee :val=""></Marquee>
    
    展开全文
  • 主要介绍了Vue替代marquee标签超出宽度文字横向滚动效果,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • /*超出不换行,必须加,否则横向超出部分会自动换行*/ } .content { display: inline-block; /*切记不能使用flex*/ background-color: yellowgreen; margin-left: 50px; width: 200px; height: 800px; } 效果如下:

    html代码:

        <div class="box">
          <div class="content"></div>
          <div class="content"></div>
          <div class="content"></div>
          <div class="content"></div>
          <div class="content"></div>
          <div class="content"></div>
        </div>
    

    CSS代码:

         .box {
            margin: 0 auto;
            width: 800px;
            height: 400px;
            background-color: aqua;
            overflow: scroll; /*超出部分滚动不换行*/
            white-space: nowrap; /*超出不换行,必须加,否则横向超出部分会自动换行*/
          }
          .content {
            display: inline-block; /*切记不能使用flex*/
            background-color: yellowgreen;
            margin-left: 50px;
            width: 200px;
            height: 800px;
          }
    

    效果如下:
    在这里插入图片描述

    展开全文
  • 后加文字即可,当超过文本容器长度时,触动横向滚动效果。 二、直接引入组件 marquee组件 < template > < div class = " marquee-wrap " > < div class = " scroll " > < p class = " marquee ...

    一、npm 安装

    如果你想安装插件(自己写的)

    安装

    # install dependencies
    npm i marquee-components
    
    

    使用

    在main.js引入

    import marquee from 'marquee-components'
    Vue.use(marquee );
    

    在页面使用

    <template>
      <div id="app">
           <marquee :val="msg"></marquee>
      </div>
    </template>
    <script>
    export default {
      name: 'app',
      data () {
        return {
          msg: 'vuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevue'
        }
      }
    }
    </script>
    

    val后加文字即可,当超过文本容器长度时,触动横向滚动效果。

    二、直接引入组件

    marquee组件

    <template>
      <div class="marquee-wrap">
        <div class="scroll">
          <p class="marquee">{{text}}</p>
          <p class="copy"></p>
        </div>
        <p class="getWidth">{{text}}</p>
      </div>
    </template>
    
    <script>
    export default {
      name: 'marquee',
      props: ['val'],
      data () {
        return {
          timer: null,
          text: ''
        }
      },
      created () {
        let timer = setTimeout(() => {
          this.move()
          clearTimeout(timer)
        }, 1000)
      },
      mounted () {
        for (let item of this.val) {
          this.text += ' ' + item
        }
      },
      methods: {
        move () {
          let maxWidth = document.querySelector('.marquee-wrap').clientWidth
          let width = document.querySelector('.getWidth').scrollWidth
          if (width <= maxWidth) return
          let scroll = document.querySelector('.scroll')
          let copy = document.querySelector('.copy')
          copy.innerText = this.text
          let distance = 0 
          this.timer = setInterval(() => {
            distance -= 1
            if (-distance >= width) {
              distance = 16
            }
            scroll.style.transform = 'translateX(' + distance + 'px)'
          }, 20)
        }
      },
      beforeDestroy () {
        clearInterval(this.timer)
      }
    }
    </script>
    
    <style scoped>
      .marquee-wrap {
        width: 100%;
        overflow: hidden;
        position: relative;
      }
      .marquee{
        margin-right: 16px;
      }
      p {
        word-break:keep-all;
        white-space: nowrap;
        font-size: 16px;
        font-family: "微软雅黑 Light";
      }
      .scroll {
        display: flex;
      }
      .getWidth {
        word-break:keep-all;
        white-space:nowrap;
        position: absolute;
        opacity: 0;
        top: 0;
      }
    </style>
    
    

    其他页面引入marquee组件

    <template>
      <div class="container">
            <marquee :val="title"></marquee>
      </div>
    </template>
    <script>
    import marquee from './marquee'
     name: 'index',
     components: {
        marquee
     },
      data () {
        return {
    		title: ''
        }
      },
    </script>
    
    展开全文
  • 文字如果超出了自动向左滚动 function scroll(){ var info = document.getElementById('info'); var div = info.getElementsByTagName('div')[0]; var p = document.getElementsByTagName('p')[0]; var ...
    在线 演示
    <!doctype html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>test</title>
        <style type="text/css">
            *{ margin:0; padding:0;}
            body{font:12px/1 '微软雅黑';background: #fff;}
            .wrap{ width:140px; padding:10px;}
            .info{ padding-top:10px; overflow:hidden;}
            .inner{ width:1000px;height:172px; height:17px; line-height:17px; overflow:hidden;}
            .inner p{ display:inline-block;}
        </style>
    </head>
    <body>
    <div class="wrap">
        <div class="img"><img src="http://dummyimage.com/140x90/" alt=""/></div>
        <div id="info" class="info">
            <div class="inner">
                <p class="txt">文字如果超出了自动向左滚动</p>
            </div>
        </div>
    </div>
    <script>
        function scroll(){
            var info = document.getElementById('info');
            var div = info.getElementsByTagName('div')[0];
            var p = document.getElementsByTagName('p')[0];
            var p_w = p.offsetWidth;
            var div_w = info.offsetWidth;
            if(div_w > p_w){ return false; }
            div.innerHTML += div.innerHTML;
    
            setInterval(function(){
                if(p_w <= info.scrollLeft){
                    info.scrollLeft -= p_w;
                } else {
                    info.scrollLeft++;
                }
            }, 30);
        }
        scroll();
    
    
    </script>
    </body>
    </html>
    

     

    引用:http://bbs.csdn.net/topics/390908118

    转载于:https://www.cnblogs.com/vendy/p/5633639.html

    展开全文
  • 最近项目中遇到一个多级的树形结构,使用el-tree组件后,父容器规定了宽高,设置overflow:auto,但是超出横向滚动条并没有出现。  查询原因是el-tree组件中class名为el-tree-node的div是块级元素,需要把它变为...
  • 原来用过,没有太在意,最近又用到。... 参数: 1.visible :不剪切内容也不添加滚动条。假如显式声明此默认值,对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效 2.auto :此为b
  • 通知栏单行文本超出横向滚动字 vue

    千次阅读 2019-11-18 20:39:25
    判断动画区域是否超出父元素宽度 宽则有动画,不宽则无 const parent = this . $refs . barparent ; const child = this . $refs . barchild ; if ( child . clientWidth > parent . clientWidth ) { ...
  • 思路如下:文字很多的话 ,计算下要显示的文字的长度,根据文字长度来计算滚动时间和滚动偏移的位置 mounted 中设置: //计算滚动文字的长度 const animateTextlength = this.meeting.importantInfo.toString()...
  • 纯css实现文字循环滚动效果 * { margin: 0; padding: 0; } .box { width: 300px; margin: 0 auto; position: relative; border: 1px solid #ff6700; } .animate { padding-left: 20px; font-size:...
  • } css让表格超出部分不换行并有滚动条实现核心思路:首先用浮动或者inline-block来让所有元素一行排列,这时候肯定排不下的会自动换行,我们就给父级盒子加个white-space: nowrap;强制一行排列,不让他换行,然后给...
  • 一、滚动组件 <template> <div class="scrollText" ref="outer"> <div class="st-inner" :class="{'st-scrolling': needToScroll}"> <span class="st-section" ref="inner">{{text}}&...
  • 1、如果文字超出div高度:文字不用滚动 2、如果文字太多超出了div高度,那些文字就自动滚动 ps:滚动的效果就像我这个设置一样() onmouseout=this.start()> 该系统于2017-06-21进行维护,望相互告知!!! ...
  • 微信小程序实现横向滚动

    千次阅读 2019-10-03 11:04:09
    由于看官方微信小程序文档无法实现横向滚动,百度查询后发现实现的方法。贴上博主文章 本文链接:https://blog.csdn.net/weixin_40099554/article/details/80820135 <!--pages/my/my.wxml--> <scroll-view ...
  • 微信小程序 横向滚动

    千次阅读 2018-04-03 19:12:42
    微信小程序官方的滚动写的比较简单,想实现横向滚动还花了点时间,这里记录一下下面是wxml文件里的内容&lt;scroll-view scroll-x class="scroll-header"&gt; &lt;view id="green" ...
  • 直接上代码 <template> <div class="rollbox"> <div ref="ccc" class="ccc" @mouseover="stopScroll" @mouseout="startScroll"> 您有8条消息未查收! <...export default
  • 文字在div里自动换行
  • html内容 <div class="box"> <div class="row"> <div class="item" v-for="i in 50" :key="i"> <span>学生11</span> <span>a</span> .../sp
  • 具体如何解决呢 可以设置下拉菜单的最大宽度,然后文字超出时,出现横向滚动条。 代码如下: <style lang="scss"> .el-select-dropdown { max-width: 251px; } .el-select-dropdown__item { display: inline...
  • 现在的前端开发中,有许多页面上有设计了横向滚动,可以说横向滚动是一个很常见的场景,今天就来说说横向滚动怎么实现以及需要注意的问题。 实现横向滚动 要实现横向滚动,方式不止一种,这里我只说最简单的一种,...
  • /*添加横向滚动条*/ white-space: nowrap;/*不换行*/ } .one { width: 45%; margin-right: 2%; display: inline-block;/*设为inline-block*/ } .one img { width: 100%; height: 80%; } .one p { font-size: 18px; ...
  • 微信小程序scroll-view实现横向滑动滚动 效果图如下: 实现代码: index.wxml <view class="hotService"> <view class="hotServiceList_box"> <!-- 这里为滚动的内容部分 --> <scroll-...
  • 1、首先看下效果 2、主要是在表格第二列【important】以及【2019-2-21...如果长度超过限制范围,就执行横向滚动 3、代码如下: css: <style> .up { color: black; display: block; width: 96%;...
  • style={{ marginLeft: 10, marginTop: 10,marginRight: 5, marginBottom: 10,overflow:“hidden”,overflowX:“scroll”}} overflow:"hidden” 解决字体溢出 overflowX:"scroll“ 加横向滚动
  • uniapp 横向滚动,微信小程序显示效果 显示效果 uniapp 横向滚动效果 代码 html <template> <view> <view style="padding-top:100rpx;">横向滚动</view> <scroll-view scroll-x=...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,663
精华内容 2,265
关键字:

文字超出横向滚动