精华内容
下载资源
问答
我要提问
  • js文字滚动代码，不使用＜marquee＞
    2021-12-08 16:57:09 
    <style>
    .span {
        width: 10em;  /*设置显示条长度10em*/
        margin-left:20%;
        cursor: default;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
    }
</style>

<body>  
    <div class="span">字体——1——2——滚动——3——4——效果</div>
    <script>
        var span = document.querySelector('.span');
        var timer=null;
        let time = 0; //字体滚动长度

        function animate(obj) {     //字体动画移动函数
            var a = obj.innerText.length;  //获取div中文本长度
            clearInterval(obj.timer);
            obj.timer = setInterval(function() {
                if (a >= 10) {
                    time=time-0.1;
                    obj.style.textIndent = time + 'em';//字体左移0.1个em
                    // console.log(obj.style.textIndent);
                    if(time <= -a) {//  如果移动的值大于字体长度
                        obj.style.textIndent = 10 + 'em';  //文本移动到div右边再向左移
                        time = 10;
                    }
                }
            }, 25);
        }

        span.onmouseover = function() {
            animate(this);
            this.style.textOverflow = 'clip';   //字体超出部分剪切
        }

        span.onmouseleave = function() {
            time = 0;//重置字体滚动长度
            this.style.textIndent = 0+'em';//字体回到初始位置
            clearInterval(this.timer);//停止字体滚动
            this.style.textOverflow = 'ellipsis';  //字体超出部分省略  
        }
    </script>

    设置25ms的定时器，每25ms字体第一行缩进0.1个单位。若缩进的距离超过了字体长度，字体回到盒子右边，重新缩进。time-0.1，可以将0.1改动，越小，字体滚动越慢越流畅

    html css
    更多相关内容

  • js文字滚动制作js scroll单排文字滚动向上间歇滚动

     2019-11-23 22:43:41
    js文字滚动制作js scroll单排文字滚动向上间歇滚动
    收起

  • js文字滚动停顿效果代码

     2020-10-30 09:35:45
    javascript文字滚动停顿效果的实现代码
    收起

  • js文字滚动一次一行特效,类似抽奖公告

     2017-12-03 22:09:12
    类似抽奖公告.文字滚动一次一行特效,html,js css源码都 在这里.代码简洁容易修改
    收起

  • JS文字滚动

     2022-01-13 22:45:25
    先获取盒子长度和文字长度，若文字长度超出盒子则进行滚动，滚动到末端清除定时器，重置步长，等待一会再重启定时器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...

    先获取盒子长度和文字长度，若文字长度超出盒子则进行滚动，滚动到末端清除定时器，重置步长，等待一会再重启定时器

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            position: relative;
            width: 200px;
            height: 30px;
            background-color: #f8b500;
            margin: auto;
            overflow: hidden;
        }

        .text {
            position: absolute;
            top: 0;
            left: 0;
            color: #000000;
            padding: 0 10px;
            white-space: nowrap;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="text">风萧萧兮易水寒壮士一去不复还留得青山在不愁没柴烧</div>
    </div>
    <script>
        let box = document.querySelector('.box'); // 外盒
        let text = document.querySelector('.text'); // 文字
        let boxWidth = box.clientWidth // 盒子长度
        let textWidth = text.clientWidth // 文字长度
        let position = boxWidth - textWidth // 长度之差
        let step = 0
        let timer = null
        function fn() {
            if (step <= position) {
                clearInterval(timer)
                setTimeout(() => {
                    step = 0
                    timer = setInterval(fn, 30)
                }, 1000)
            }
            step -= 1
            text.style.left = step + 'px'
        }
        setTimeout(() => {
            if (position < 0) {
                timer = setInterval(fn, 30)
            }
        }, 1000)
    </script>
</body>

</html>

    收起
    展开全文
    css html

  • js文字滚动插件制作新闻公告列表scroll文字间歇滚动

     2019-11-23 22:18:52
    js文字滚动插件制作新闻公告列表scroll文字间歇滚动 js文字滚动插件制作新闻公告列表scroll文字间歇滚动 js文字滚动插件制作新闻公告列表scroll文字间歇滚动
    收起

  • 浅析js 文字滚动效果

     2020-10-29 02:49:20
    字滚动显示，是网页企业公告，文字链广告常用的一种效果，说不定在什么时候你就能看到它。
    收起

  • 基于DIV的JS文字滚动特效.rar

     2019-07-10 10:42:30
    基于DIV的JS滚动条控制文字滚动特效，拖动滚动条，文字区域可上下滚动，滚动条也是自定义的，不是默认风格的滚动条，本滚动条不但兼容IE浏览器，还可正常运行于火狐和Chrome等浏览器中。
    收起

  • js文字滚动效果

     2020-07-22 10:10:52
    js文字滚动效果 效果 html <div class="index-ling clearfix"> <div class="ling-left float-left text-center"> <img src="assets/img/index/index-ling.png">公告 </div> <div id...

    效果

    效果

    html

    <div class="index-ling clearfix">
    <div class="ling-left float-left text-center">
        <img src="assets/img/index/index-ling.png">公告
    </div>
    <div id="scroll_div" class="float-left">
        <div id="scroll_begin">
            <span class="lan">我是蓝色我是蓝色我是蓝色我是蓝色我是蓝色我是蓝色我是蓝色我是蓝色我是蓝色</span>
            <span class="hui">我是灰色我是灰色我是灰色我是灰色我是灰色我是灰色我是灰色我是灰色我是灰色</span>
        </div>
        <div id="scroll_end"></div>
    </div>
</div>

    CSS

    //css
.index-ling {
    background: rgba(242, 242, 242, 0.6);
    width: 90%;
    margin: 0 auto;
    border-radius: 20px;
    height: 40px;
    line-height: 40px;
}
 
.index-ling>.ling-left {
    width: 10%;
    color: #FF9000;
}
 
.index-ling>.ling-left img {
    width: 18px;
    margin: -2px 5px 0 0;
}
 
#scroll_begin span {
    margin-right: 20px;
    cursor: pointer;
}
 
.lan {
    color: #3B7FFC;
}
 
.hui {
    color: #8D8D8D;
}
 
#scroll_div {
    overflow: hidden;
    width: 85%;
    white-space: nowrap;
}
 
#scroll_begin,
#scroll_end {
    display: inline;
}

    JS

    //js
//文字横向滚动
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();
    收起
    展开全文
    html css

  • js文字滚动插件制作双行关联向上文字间歇滚动

     2019-11-23 22:44:07
    js文字滚动插件制作双行关联向上文字间歇滚动
    收起

  • JS文字滚动和google地图位置选择搜索

     2021-05-12 05:37:23
    摘要:脚本资源,Ajax/JavaScript,JS文字滚动　JS文字滚动和google地图位置选择搜索，两个特效集合在了一个网页上，文字滚动这个就先不说了，Google地图选择，这个功能估计有些朋友会需要吧，见有些博客上面有此项功能...
    收起

  • js文字滚动插件

     2012-09-26 13:45:49
    js文字滚动插件制作scroll文字自动滚动，设置新闻公告列表文字向上间歇滚动与文字向下间歇滚动。
    收起

  • js 上下文字滚动效果

     2020-10-29 00:17:15
    用js实现的上下文字滚动效果代码，需要的朋友可以参考下。
    收起

  • js 文字滚动效果

     2019-04-20 01:14:11
    NULL 博文链接：https://664795551.iteye.com/blog/1888286
    收起

  • JS实现title标题栏文字不间断滚动显示效果

     2020-10-21 14:32:39
    主要介绍了JS实现title标题栏文字不间断滚动显示效果,通过javascript时间函数定时操作动态修改页面元素实现滚动效果,需要的朋友可以参考下
    收起

  • js文字滚动插件制作新闻公告列表scroll文字自动滚动

     千次阅读 2018-12-15 15:05:57
    js文字滚动插件制作新闻公告列表scroll文字自动滚动js文字滚动插件制作新闻公告列表scroll文字自动滚动style:html:javascript:效果图： js文字滚动插件制作新闻公告列表scroll文字自动滚动 引用 scrolltext.js ...

    js文字滚动插件制作新闻公告列表scroll文字自动滚动

    js文字滚动插件制作新闻公告列表scroll文字自动滚动

    引用 scrolltext.js 文件，关于 插件 ，参考 这儿

    style:

    <style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;vertical-align:middle;}
/*公告*/
.notice{width:387px;margin:20px auto;height:26px;overflow:hidden;background:url(images/bg.gif) no-repeat;}
.noticTipTxt{color:#ff7300;height:22px;line-height:22px;overflow:hidden;margin:0 0 0 40px;}
.noticTipTxt li{height:22px;line-height:22px;}
.noticTipTxt a{color:#0075E8;font-size:12px;text-decoration:none;}
.noticTipTxt a:hover{color:#ff7300;text-decoration:underline;}
</style>

    html:

    <div class="notice">
	<ul id="jsfoot01" class="noticTipTxt">
		<li><a href="https://download.csdn.net/" target="_blank">js无缝滚动制作js文字无缝滚动和js图片无缝滚动 <img src="./hot001.gif" width="22" height="11"></a></li>
		<li><a href="https://download.csdn.net/" target="_blank">js文字切换特效制作焦点文字带滤镜切换效果</a></li>
		<li><a href="https://download.csdn.net/" target="_blank">js文字特效制作js文字闪烁与文字变色效果</a></li>
		<li><a href="https://download.csdn.net/" target="_blank">js文字滚动制作js scroll单排文字滚动向上间隔滚动</a></li>
	
		<li><a href="https://download.csdn.net/" target="_blank">js无缝滚动制作js文字无缝滚动和js图片无缝滚动 <img src="./hot001.gif" width="22" height="11"></a></li>
		<li><a href="https://download.csdn.net/" target="_blank">js文字切换特效制作焦点文字带滤镜切换效果</a></li>
		<li><a href="https://download.csdn.net/" target="_blank">js文字特效制作js文字闪烁与文字变色效果</a></li>
		<li><a href="https://download.csdn.net/" target="_blank">js文字滚动制作js scroll单排文字滚动向上间隔滚动</a></li>
	</ul>
</div>

<div class="notice">
	<ul id="jsfoot02" class="noticTipTxt">
		<li><a href="https://download.csdn.net/" target="_blank">js文字滚动制作js scroll单排文字滚动向上间隔滚动</a></li>
		<li><a href="https://download.csdn.net/" target="_blank">js文字特效制作js文字闪烁与文字变色效果</a></li>
		<li><a href="https://download.csdn.net/" target="_blank">js文字切换特效制作焦点文字带滤镜切换效果</a></li>
		<li><a href="https://download.csdn.net/" target="_blank">js无缝滚动制作js文字无缝滚动和js图片无缝滚动 <img src="./hot001.gif" width="22" height="11"></a></li>
	
		<li><a href="https://download.csdn.net/" target="_blank">js文字滚动制作js scroll单排文字滚动向上间隔滚动</a></li>
		<li><a href="https://download.csdn.net/" target="_blank">js文字特效制作js文字闪烁与文字变色效果</a></li>
		<li><a href="https://download.csdn.net/" target="_blank">js文字切换特效制作焦点文字带滤镜切换效果</a></li>
		<li><a href="https://download.csdn.net/" target="_blank">js无缝滚动制作js文字无缝滚动和js图片无缝滚动 <img src="./hot001.gif" width="22" height="11"></a></li>
	</ul>
</div>

    javascript:

    <script type="text/javascript">
// 演示一
if(document.getElementById("jsfoot01")){
	var scrollup = new ScrollText("jsfoot01");
	scrollup.LineHeight = 22;        //单排文字滚动的高度
	scrollup.Amount = 1;            //注意:子模块(LineHeight)一定要能整除Amount.
	scrollup.Delay = 20;           //延时
	scrollup.Start();             //文字自动滚动
	scrollup.Direction = "down"; //文字向下滚动
}
// 演示二
if(document.getElementById("jsfoot02")){
	var scrollup = new ScrollText("jsfoot02");
	scrollup.LineHeight = 22;
	scrollup.Amount = 1;     
	scrollup.Delay = 20;     
	scrollup.Start();
	scrollup.Direction = "up";   //默认设置为文字向上滚动
}
</script>

    效果图：

    在这里插入图片描述

    以上就是本文的全部内容，希望对大家的学习有所帮助.

    收起
    展开全文

  • 简单原生js文字向上滚动消息框代码

     2020-06-11 17:03:21
    一款简单原生js文字向上滚动消息框代码，可以用来做网站公告消息、最新动态等模块。
    收起

  • javaScript小案例------js实现文字滚动效果篇

     千次阅读 多人点赞 2022-04-06 22:37:42
    原生js实现文字滚动效果
    收起

  • js文字横向滚动特效

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

  • 几种js文字滚动(滚动 新闻)代码共享

     2019-03-17 02:15:43
    NULL 博文链接：https://coolzhi.iteye.com/blog/578340
    收起

  • js 文字横向滚动

     2013-01-21 16:37:30
    简单、实用的javascript文字横向滚动效果。
    收起

  • vue.js动态文字滚动公告特效代码

     2021-03-20 02:48:11
    vue.js动态文字滚动公告代码是一款适用于手机端的动态文字数组列表文字滚动公告代码。
    收起

  • JavaScript-实现文字滚动

     千次阅读 2019-04-30 16:03:13
    第一种： <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />...循环滚动</title> <!--CSS/JS--> <style t...
    收起

  • 可视化-threejs文字滚动效果

     千次阅读 2019-11-28 10:41:16
    var texture_up; this.planeUp = [] var flyShader = { vertexshader: ` varying vec2 vUv; varying float u_opacity; uniform sampler2D texture; uniform float t...
    收起
    THREE

  • Swiper左右滚动文字时间轴代码

     2020-06-11 15:03:57
    Swiper左右滚动文字时间轴代码是一款电脑、平板和手机移动端都适用的企业发展历程时间轴效果，带左右箭头控制或触屏滑动切换。
    收起

  • js无缝滚动制作js文字无缝滚动

     2018-12-15 14:48:04
    js无缝滚动制作js文字无缝滚动和js图片无缝滚动 js文字切换特效制作焦点文字带滤镜切换效果 js文字特效制作js文字闪烁与文字变色效果
    收起

  • vue.js文字滚动效果

     2021-10-26 17:47:29
    <el-col :span="16"> <div class="companyEntryName"> <div class="notice"> ...ul class="marquee_list" :class="{marquee_top:animate}">...li v-for="(item, index) in enterpriseNameList" :...
    收起
    html

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 54,883
精华内容 21,953
热门标签
关键字：

js 文字滚动