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

    2020-10-23 08:39:43
    主要介绍了js文字横向滚动特效,实现过程很简单,文字在某块区域内横向无间隙滚动,感兴趣的小伙伴们可以参考一下
  • 下面小编就为大家带来一篇jQuery文字横向滚动效果的实现代码。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • js 文字横向滚动

    2013-01-21 16:37:30
    简单、实用的javascript文字横向滚动效果。
  • 一、npm 安装 如果你想安装插件(自己写的) 安装 # install dependencies npm i marquee-components 使用 在main.js引入 import marquee from 'marquee-components' Vue.use(marquee );... return
  • 要实现这样一个功能,文字在某块区域内横向无间隙滚动
  • CSS3实现文字横向滚动

    2021-06-09 13:38:11
    上效果图: 上代码: <div id="tips" :style="'--textWidth--:'+ msg.length+'em'"> ... } data(){ return{ msg:"这是一条会滚动的提示信息!", } } 如果字符串长度过长导致重叠的话,可以用var(--textWidth--)。

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

    上代码:

    <div id="tips" :style="'--textWidth--:'+ msg.length+'em'">
    	<span class="span1">{{msg}}</span>
    	<span class="span2">{{msg}}</span>
    </div>
    
    #tips{
    	background: #FFEEAA;
    	width: 100%;
    	line-height: 40px;
    	height: 40px;
    	color: #FF0000;
    	overflow: hidden;
    }
    #tips span{
    	position: absolute;
    	left: 0;
    	white-space: nowrap;
    	margin: 0 10px;
    	white-space: nowrap;
    }
    @keyframes around1 {
    	from {
    		left: 0;
    	}
    	to {
    		/* left: calc(0px - var(--textWidth--) - 10px); */
    		left: -100%;
    	}
    }
    @keyframes around2 {
    	from {
    		/* left: calc(var(--textWidth--) + 10px); */
    		left: 100%;
    	}
    	to {
    		left: 0;
    	}
    }
    #tips .span1{
    	animation: around1 10s linear infinite;
    }
    #tips .span2{
    	animation: around2 10s linear infinite;
    }
    
    data(){
    	return{
    		msg:"这是一条会滚动的提示信息!",
    	}
    }
    

    如果字符串长度过长导致重叠的话,可以用var(--textWidth--)

    展开全文
  • vue 文字横向滚动

    千次阅读 2019-02-23 17:08:51
    转自:https://www.jianshu.com/p/a9e1cf8efbf3  
    展开全文
  • 水平滚动字幕循环滚动
  • react 文字水平滚动 文字走马灯

    千次阅读 2020-04-01 02:37:34
    /** * 文字水平滚动 * 用法: */ import React, { PureComponent } from ‘react’; let dataArr = []; let distanceArr = []; export default class Marquee extends PureComponent { constructor(props) { super...
    /** * 文字水平滚动 * 用法:<Marquee :lists="lists"/> */
    import React, { PureComponent } from 'react';
    let dataArr = [];
    let distanceArr = [];
    
    export default class Marquee extends PureComponent {  
        constructor(props) {    
            super(props);    
            this.state = {      
                listsObj: {},      
                listsArr: [],      
            };  
        }  
        componentDidMount() {    
            setTimeout(() => {      
                let marqueeElementArr = document.getElementsByTagName('li');      
                let listsLength = dataArr.length; // 数组长度      
                let listWidthArr = []; // 储存li宽度数组
            // 获取每个元素需要移动的距离      
            for (var i = 0; i < listsLength; i++) {        
                listWidthArr.push(marqueeElementArr[i].clientWidth); // 把每一个元素需要移动的距离都存起来      
            }      
            distanceArr = listWidthArr;      
            this.move();    
            }, 1000);  
        }
        componentWillReceiveProps(nextProps) {    
            // 父祖件传过来的props发生改变    
            if (this.state.listsObj.length !== nextProps.lists.length) {      
                this.setState({          
                    listsObj: nextProps.lists        
                }, () => {          
                    this.exchangeDataType();        
                });    
            }  
        }
        exchangeDataType = () => {  // 转换数据类型
            // 这里因为后台传给我的数据是对象, 我需要把对象转换成数组, 如果后台本来传给你是数组就不用转换了    
            let obj = this.state.listsObj;    
            for (var i = 0; i < obj.length; i++) {      
                dataArr.push(obj[i].description);    
            }
            this.setState({ listsArr: dataArr });  
        };  
        move = () => {
            let marquee = document.getElementById('marquee-box');    
            let distance = 0; // 位移距离    
            // 设置位移    
            setInterval(() => {      
            distance = distance - 1;      
            // 滚动距离超出第一个li的宽度(即第一个li播完了)      
            if (-distance >= distanceArr[0]) {        
                // 每次移动完一个元素的距离,就把这个元素的宽度放在数组最后       
                distanceArr.push(distanceArr.shift());        
                let arr = this.state.listsArr;        
                let copyArr = [...arr];        
                // 把移动完的第一个元素剪切下来追加在数组最后        
                let newArr = copyArr.concat(copyArr.shift());        
                this.setState({          listsArr: newArr        });        
                // 滚动距离恢复为0        
                distance = 0;      
            }      
            // div向左偏移      
            marquee.style.transform = 'translateX(' + distance + 'px)';    }, 20);  
        };
        render() {    
            let { listsArr } = this.state;    
            return (      
                <div className="wrap">        
                    <div id="box">          
                        <div id="marquee-box">            
                        {
                            listsArr.map((item, index) => {            
                            return <li key={index}>&nbsp;{item}&nbsp;</li>;            
                            }
                        )}          
                        </div>        
                    </div>      
                </div>    
            );  
        }
    }
    

    css
    css(https://img-blog.csdnimg.cn/20200401024153716.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjE3NDkzOA==,size_16,color_FFFFFF,t_70)

    参考来源

    展开全文
  • 对duilib原生控件label进行扩展支持文字水平滚动,可通过speed属性控制滚动速度
  • 多条新闻的title横向滚动播放,并可点击。
  • 实现文字横向滚动

    千次阅读 2019-03-04 16:59:16
    //当滚动滚动了初始内容的宽度时滚动条回到最左端 if (obj.scrollLeft >= obj.firstChild.offsetWidth) obj.scrollLeft = 0; } var a = setInterval("scroll(document.getElementById('scrollobj'))", 20); ...

    html

    <div id="scrollobj" class="hotword2" style="white-space:nowrap;overflow:hidden;width:400px;margin: auto;" onmouseover="stop()" onmouseout="start()"><span>欢迎您登录拜博医疗口腔集团内部网</span>
        </div>
    

    js

    <script>
            function scroll(obj) {
                var tmp = (obj.scrollLeft) ++;
                //当滚动条到达右边顶端时
                if (obj.scrollLeft == tmp) obj.innerHTML += obj.innerHTML;
                //当滚动条滚动了初始内容的宽度时滚动条回到最左端
                if (obj.scrollLeft >= obj.firstChild.offsetWidth) obj.scrollLeft = 0;
            }
            var a = setInterval("scroll(document.getElementById('scrollobj'))", 20);
            function stop() {
                clearInterval(a);
            }
    
            function start() {
                a = setInterval("scroll(document.getElementById('scrollobj'))", 20);
            }
        </script>
    

    在这里插入图片描述

    展开全文
  • vue实现公告文字横向滚动

    千次阅读 2021-02-04 17:02:33
    实现网站公告横向滚动的需求(vue-cli) 二、思路和实现 1.可以通过改变元素的marginLeft值和计时器来实现滚动 HTML代码如下(示例): <template> <div id="box" ref="box"> &l
  • js实现文字横向滚动

    千次阅读 2016-08-06 20:46:48
    js实现文字横向滚动
  • JQ实现文字跑马灯,文字横向滚动

    千次阅读 2019-12-10 15:53:53
    因需求要做一个,横向文字从右到左的跑马灯 ,鼠标移动上去暂停,参考其他大大的跑马灯不太适用所以,自己再次封装了一个跑马灯,分享给大家也方便自己下次直接使用,我自己用的JQ版本为3.3.1(jquery-3.3.1.min.js...
  • HTML文字横向滚动

    2016-04-24 15:41:00
    <!DOCTYPE html><html><head> <title></title></head><body><div>...marquee width="100%" height="64px" direction="left" scrollamount="3" onmo...
  • 使用css3实现文字横向滚动循环

    千次阅读 2020-05-08 09:52:42
    <div class="remind-block"> <div class="marquee-block"> <...这是一段很长的滚动文字&nbsp;&nbsp;&nbsp;</div> <div class="marqueeT">这是一段很长...
  • 文字用弹性盒子包裹展示,利用transform translateX负值来进行移动 marquee.vue 代码: <template> <div class="marquee-wrap" ref="marqueebox"> <div class="scroll" ref="scroll"> <p ...
  • 文字横向滚动效果

    千次阅读 2017-11-03 14:54:34
    利用JS和CSS3两种方法实现文字横向滚动效果
  • 1.首先安装dayjs插件(后面唯一id使用) day.js–一个轻量的处理时间和日期的JavaScript库 npm install dayjs --save ...3.滚动组件 <template> <div :id="id" class="marquee-wrapper"> <span
  • 借鉴:https://www.cnblogs.com/zhahuhu/p/11592400.html 实例: //template中的元素代码 <div v-for="item in hdanger" :key="item.id"> <i>{{ item.hazardDesc }}<... data(){
  • TextView支持文字水平滚动,按如下设置: <TextView android:id="@+id/tv_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:ellipsize="marquee" android:single...
  • 12864文字横向滚动

    热门讨论 2012-04-23 09:54:31
    功能:文字横向滚动(程序里面有效果图) 实现语言:c语言 1286自带有垂直滚动,但是自带的垂直滚动并不是连续的等于形同虚设 本例是利用了LCD12864的绘图功能,通过对12864的读写操作实现的 1.本程序是原创程序...
  • 在做APP公告滚动的时候用到,感觉还不错,码了 转载地址:https://blog.csdn.net/zhangzeshan/article/details/83588979#commentsedit 先看下实现的效果 就是红色箭头部分指向的位置,字体会从右往左进行滚动 接下来...
  • 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...
  • QLabel 文字水平滚动显示

    千次阅读 2019-02-20 16:01:19
    1. 自适应函数,判断label文本是否需要滚动起来。 void MLabel::upateLabelRollingState() { // 获取文本大小,小于文本框长度,则无需滚动 QFont ft = font(); ft.setPointSize(fontSize); QFontMetrics fm...
  • 主要介绍了微信小程序实现文字从右向左无限滚动
  • <span>jQuery文字横向滚动 </div> Jquery代码: $.fn.textScroll=function(){ var p = $(this), c = p.children(), speed=3000; //值越大速度越小 var cw = c.width(),pw=p.width(); var t = (cw / ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 53,902
精华内容 21,560
关键字:

文字横向滚动