精华内容
下载资源
问答
  • css实现文字左右滚动效果

    万次阅读 2019-03-07 14:49:59
    ...} /*1200px为文本的长度,利用多媒体查询,当屏幕宽度太小时,就设置滚动距离为文本的长度*/ } @keyframes rotaryBlockSecond { 0% { left: 1200px; } 100% { left: 0; } } }  
    <div className={styles.rotaryContainer}>
      <div className={styles.rotaryBlockFirst}>
        注释:自2019年7月起,这是一段很长的文本文本文本文本文本文本文本文本文本文本文本文本文本文本,                    
        本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。
      </div>
      <div className={styles.rotaryBlockSecond}>
        注释:自2019年7月起,这是一段很长的文本文本文本文本文本文本文本文本文本文本文本文本文本文本,                    
        本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。
      </div
    </div>
    .rotaryContainer{
        background-color: yellow;
        color: red;
        height: 30px;
        margin-top: 10px;
        line-height: 30px;
        overflow: hidden;
        position: relative;
    }
    
    .rotaryBlockFirst {
        animation: rotaryBlockFirst 20s linear infinite;
        white-space: nowrap;
        position: absolute;
        width: 100%;
    }
    
    .rotaryBlockSecond {
        animation: rotaryBlockSecond 20s linear infinite;
        position: absolute;
        white-space: nowrap;
        width: 100%;
    }
    
    @keyframes rotaryBlockFirst {
        0% { left: 0; }
        100% { left: -110%;}
    }
    
    @keyframes rotaryBlockSecond {
        0% { left: 110%; }
        100% { left: 0; }
    }
    @media screen and (max-width: 1250px) {
        @keyframes rotaryBlockFirst {
            0% { left: 0; }
            100% { left: -1200px;} /*1200px为文本的长度,利用多媒体查询,当屏幕宽度太小时,就设置滚动距离为文本的长度*/
        }
    
        @keyframes rotaryBlockSecond {
            0% { left: 1200px; }
            100% { left: 0; }
        }
    }
    

     

    展开全文
  • 有时候下拉框里面的一条内容很多,下拉框显示不完,则需要左右滚动效果来显示剩下的文字。 代码很简单: 无标题文档 function init(){ var os=document.getElementsByTagName("option"); for(var i...

    有时候下拉框里面的一条内容很多,下拉框显示不完,则需要左右滚动的效果来显示剩下的文字。

    代码很简单:

    <!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=utf-8" /> 
    <title>无标题文档</title> 
    <script type="text/javascript"> 
    function init(){ 
    var os=document.getElementsByTagName("option"); 
    for(var i=0;i<os.length;i++){ 
    var tx=os[i].innerHTML; 
    var l=tx.length; 
    var b=tx.substring(0,1); 
    var e=tx.substring(1); 
    os[i].innerHTML=e+b; 
    } 
    window.setTimeout(init,1000); 
    } 
    window.οnlοad=init; 
    </script> 
    </head> 
    <body> 
    <select> 
    <option>一个用法</option> 
    <option>也许人生就是如此</option> 
    <option>云在青天,水在瓶</option> 
    </select> 
    </body> 
    </html> 
    


    展开全文
  • ps: 效果图现在不上了,等以后再上吧;类似于游戏中滚动的公告! 自己研究的! html部分 <div className="textFather" ref="textFather"> <div className="text" ref="text"> <span>{"我是...

    ps: 效果图现在不上了,等以后再上吧;类似于游戏中滚动的公告!

    自己研究的!

    html部分

    <div className="textFather" ref="textFather">
    	<div className="text" ref="text">
    		<span>{"我是后台传过来的未知字数的数据"}</span>
    	</div>
    </div>
    

    css部分

    .textFather{
    	width:1000px;
    	height:40px;
    	position:relative;
    	overflow:hidder;
    }
    .text{
    	position:absolute;
    	top:0;
    	left:0;
    	height:100%;
    	line-height:40px;
    	text-overflow:ellipsis;
    	white-space:nowrap;
    }
    
    

    css部分要注意的是子盒子的text-overflow:ellipsis、white-space:nowrap;这个2个属性,文本强制不换行,要不很麻烦的,一行,我认为想来来说好计算;

    js部分

    textLeftToRight=()=>{
    	let num =0;
    	const text=this.refs.text; // 获取文字
    	const textFather=this.refs.textFather;
    	if(text.offsetWidth>textFather.offsetWidth){ // 当文字长度大于父盒子长度时;才会滚动;
    		if(text.offsetWidth===-num){
    			num=text.offsetWidth; // 让值变为父盒子的宽度;
    			clearInterval(timer1); // 清楚定时器;
    		}else{
    			num--;
    			text.style.left=`${num}px`;
    			if(text.offsetWidth-(text.offsetWidth-parseInt(textFather.offsetWidth/2)===-num){ // text 滚动到一定距离时;
    			const text2=text.cloneNode(true); // 克隆text;
    			textFather.appendChild(text2).classList.add("text2"); // 父盒子添加克隆的元素并添加class类名;
    			let num2=textFather.offsetWidth; // 设置text2默认出现位置;
    			this.timer2=setInterval(()=>{
    				if(text2.offsetWidth===-num2){
    					num2=textFather.offsetWidth; // 设置默认值;
    					text.cloneNode(false); // 取消克隆;
    					textFather.removeChild(text2); // 父盒子删除之前克隆的子盒子;
    					clearInterval(timer2); //清楚这个定时器;
    				}
    				num2--; 
    				text2.style.left=`${num2}px`;
    				if(text2.offsetWidth-(text.offsetWidth-parseInt(textFather.offsetWidth/2))===-num2){
    					this.timer1=setInterval(()=>this.textLeftToRight(),30) // 从新调用定时器1;
    					}
    				},30)
    			}
    		}
    	}
    }
    
    componentDidMount(){
    	this.timer1=setInterval(()=>this.textLeftToRight(),30); // 调用;
    }
    
    componentWillUnmount(){
    	clearInterval(this.timer1);
    	clearInterval(this.timer2);
    }
    

    Js部分,我也有过在将timer2定时器单独封装一个函数,但不知啥问题,num2–;不执行,导致效果出不来,以后研究!

    ps: 记录+研究,定时器是主要,老忘记定时器的使用跟清楚;setTimeout还在研究,单个滚动很好实现,就几行代码,多个+重复调用没整明白!囧o(╯□╰)o!!!

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

    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>

    展开全文
  • } } 汝若安好 便是明天 晨钟暮鼓安之若素 //文字左右滚动提示 function ScrollImgLeft() { var speed = 50; var MyMar = null; var scroll_begin = document.getElementById("scroll_begin"); var scroll_end = ...
  • 文字可以自己滚动,无缝衔接的文字跑马灯效果。没毛病!
  • 代码如下:<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ...<head><... charset=gb2312″ /><...jQuery公告文字左右滚动效果-www.jb51.net</title><style type
  • 文字横向滚动效果

    千次阅读 2017-11-03 14:54:34
    利用JS和CSS3两种方法实现文字横向滚动效果
  • 希望用marquee标签来设置字体滚动,代码是下面这样写的,但是没有效果,字体还是不会滚动,应该怎么来写,才会实现这个效果
  • 文字左右循环滚动

    千次阅读 2016-07-29 10:15:16
    jQuery公告文字左右滚动效果-www.jb51.net #scrollText { width: 400px; margin-right: auto; margin-left: auto; } $(document).ready(function(e) { ScrollText($('#scrollTex
  • 下面小编就为大家带来一篇jQuery文字横向滚动效果的实现代码。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 实现一个css 来控制图片和文字左右拖动的效果。具体的效果图 如下图所示:最开始的时候,产品给了我一张静态图片,让我按照这个来是实现页面。跟我说了一下说是可以播放滑动的。我以为是让我写一个轮播图。后来才...
  • 文字上下、左右滚动跑马灯效果

    热门讨论 2014-10-10 10:46:09
    文字上下、左右滚动跑马灯效果,欢迎指正
  • jquery文字滚动效果

    2011-01-16 14:47:34
    用jquery来实现的文字滚动效果,包括上下、左右、跑马灯效果。
  • 主要介绍了Vue替代marquee标签超出宽度文字横向滚动效果,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 在HTML中,可以通过HTML的标签来实现文字滚动效果,通过设置标签里的不同属性来实现不同的文字滚动效果。在HTML中实现文字滚动效果其实很简单,本篇文章就给大家介绍HTML 标签实现文字滚动效果的方法,让...
  • * @description 滚动 * @class Marquee * @param {Object} */ var Marquee = function () { this .direction = "top" ; this .speed = 30 ; }; Marquee.prototype = { //initial init: function ...
  • TextSwitcher是系统的原生类,调用它实现文字滚动效果非常流畅。
  • TextView文本文字左右滚动效果(跑马灯)的两种方式: 一、在布局文件中设置相应的焦点 android:layout_width="match_parent" android:layout_height="wrap_content" android:singleLine="true" android:
  • Swiper左右滚动文字时间轴代码是一款电脑、平板和手机移动端都适用的企业发展历程时间轴效果,带左右箭头控制或触屏滑动切换。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 27,004
精华内容 10,801
关键字:

文字左右滚动效果