精华内容
下载资源
问答
  • 原生js间歇文字滚动新浪微博评论文字向下滚动效果
  • 本文实例讲述了JS实现文字向下滚动的方法。分享给大家供大家参考。具体实现方法如下: 代码如下: <!DOCTYPE> <html> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=...
  • 这是一款简单的css3广告文字向下滚动切换代码,css文字滚动轮播效果,可自定义文字样式跟背景颜色。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>简单的CSS...
  • 一款简单的css3广告文字向下滚动切换代码,css文字滚动轮播效果,可自定义文字样式跟背景颜色。
  • 新浪微博文字向下滚动效果 主要是文字在特定区域内滚动
  • HTML网页滚动条滚动插件(匀速滚动,支持向上向下滚动
  • jQuery模仿微博常用的文字向下滚动效果
  • 一款简单的js+css3文字上下滚动切换动画特效,可设置多种不同颜色的文字
  • js实现文字上下滚动效果【赞】

    千次阅读 2018-10-31 17:42:32
    大家都知道,做html页面时,为了提升网页的用户体验,我们需要在网页中加入一些特效,比如单行区域文字上下滚动就是经常用到的特效。如下图示效果: 完整 html 页面代码,可以直接运行 &lt;html&gt; &...

    大家都知道,做html页面时,为了提升网页的用户体验,我们需要在网页中加入一些特效,比如单行区域文字上下滚动就是经常用到的特效。如下图示效果:

    完整 html 页面代码,可以直接运行

    <html>
    <head>
    	<title>js实现文字上下滚动效果</title>
    	<style type="text/css">
    		#flinks{width:500px;}
    	
    		/* 文字上下滚动 */
    		.scroll-box{position:relative;top:0;overflow:hidden;padding:0 10px;display:inline-block;height:29px;line-height:29px}
    		.scroll-box.on{background:#fff;z-index:2;overflow:auto;height:auto !important;box-shadow:1px 1px 10px #888}
    		.scroll-box.on li{top:0 !important;border-bottom:1px dotted #ccc}
    		.scroll-box li{position:relative;}
    		.scroll-box a{display:inline-block;white-space:nowrap;padding-top:0 !important;padding-bottom:0 !important;margin-top:0 !important;margin-bottom:0 !important;}
    		.scroll-mask{z-index:1;display:none;position:fixed;top:0;right:0;bottom:0;left:0;display:none;background-color:rgba(0,0,0,0.5);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000)}
    		.scroll-mask.on{/*display:block;*/}
    	</style>
    	<script type="text/javascript" src="http://libs.baidu.com/jquery/1.7.1/jquery.min.js"></script>
    	<script type="text/javascript">
    		
    		(function ($) {
    			/* 单行文字上下滚动 */
    			$.fn.adScroll = function (options) {
    				// 默认配置
    				var scrollOptions = {
    					interval: 6000
    				};
    				$.extend(scrollOptions, options);
    
    				$(this).each(function () {
    					var scrollObj = $(this);
    					// 单行内容无需滚动显示,取消初始化
    					var totalHeight = 0;
    					scrollObj.find('li').each(function () { totalHeight += $(this).height() });
    					var liSize = Math.round(totalHeight / scrollObj.height());
    					if(liSize <= 1) return;
    					
    					// 初始化开始
    					scrollObj.attr('index', '0');
    					// 重置滚动容器高度
    					scrollObj.height(scrollObj.find('a').outerHeight(true));
    					// 重置滚动项 li 高度
    					scrollObj.find('li').size() > 1 && scrollObj.find('li').height(scrollObj.height());
    					// 外层容器,辅助定位
    					var containerObj = $('<div>').height(scrollObj.outerHeight(true));
    					scrollObj.wrap(containerObj);
    					// 遮罩层
    					var maskObj = $('<div>').addClass('scroll-mask');
    					scrollObj.after(maskObj);
    
    					setInterval(function () {
    						if (!scrollObj.hasClass('on')) {
    							// 所有 li 高度之和除以容器高度
    							var liTotalHeight = 0;
    							scrollObj.find('li').each(function () { liTotalHeight += $(this).height() });
    							var size = Math.round(liTotalHeight / scrollObj.height());
    							var curIndex = parseInt(scrollObj.attr('index'));
    							var next = curIndex + 1 >= size ? 0 : curIndex + 1;
    							if (next == 0) {
    								scrollObj.find('li').animate({ top: 0 }, 'slow');
    							} else {
    								scrollObj.find('li').animate({ top: '-=' + scrollObj.height() }, 'slow');
    							}
    							scrollObj.attr('index', next);
    						}
    					}, scrollOptions.interval);
    
    					// 滚动列表可以被展开
    					if(scrollObj.hasClass('box-expand')) {
    						// 切换
    						scrollObj.mouseover(function () {
    							scrollObj.css('top', scrollObj.find('li').css('top'));
    							scrollObj.addClass('on');
    							maskObj.addClass('on');
    						}).mouseout(function () {
    							scrollObj.css('top', 0);
    							scrollObj.removeClass('on');
    							maskObj.removeClass('on');
    						});
    					}
    				});
    			};
    		})(jQuery);
    		
    		$(function(){
    			if ($('.scroll-box').size() > 0) {
    				$('.scroll-box').adScroll({interval: 2000});
    			}
    		})
    
    	</script>
    </head>
    <body>
    	<h1>js实现文字上下滚动效果</h1>
    	<h2>文字滚动示例一:</h2>
    	<p>适用于单行区域文字或图片上下滚动广告</p>
    	<ul class="scroll-box box-expand">
    		<li><a href="#" target="_blank">双十一大额优惠券,领券折上折!</a></li>
    		<li><a href="#" target="_blank" >※ 新人福利社,超级好货0元购 ※</a></li>
    		<li><a href="#" target="_blank">韩都衣舍,闺蜜衣橱 — 天猫女装销量冠军</a></li>
    		<li><a href="#" target="_blank" >20181031期福利红包,订单提交时抵现使用</a></li>
    		<li><a href="#" target="_blank">淘宝网优惠,官方活动一网打尽</a></li>
    	</ul>
    	
    	<h2>文字滚动示例二:</h2>
    	<p>适合于单行区域友情链接上下滚动</p>
    	<ul id="flinks" class="scroll-box">
    		<li>
    			<a href="#" target="_blank">友情链接1</a>
    			<a href="#" target="_blank">友情链接2</a>
    			<a href="#" target="_blank">友情链接3</a>
    			<a href="#" target="_blank">友情链接4</a>
    			<a href="#" target="_blank">友情链接5</a>
    			<a href="#" target="_blank">友情链接6</a>
    			<a href="#" target="_blank">友情链接7</a>
    			<a href="#" target="_blank">友情链接8</a>
    			<a href="#" target="_blank">友情链接9</a>
    			<a href="#" target="_blank">友情链接10</a>
    		</li>
    	</ul>
    </body>
    </html>

    要点提示:

    1、特效初始化代码

    $('.scroll-box').adScroll({interval: 2000});

    2、特效代码结构

    <ul class="scroll-box box-expand">
    	<li>........</li>
    	<li>........</li>
    </ul>

    3、样式名称 box-expand 控制鼠标移上时是否显示所有内容

    特效源码源自:领券网 www.i075.com

    展开全文
  • jquery文字上下滚动

    2019-09-15 22:02:00
    jquery文字上下滚动
  • 介绍了jquery实现文字到上循环滚动的实例代码,有需要的朋友可以参考一下
  • TextSwitcher是系统的原生类,调用它实现文字滚动效果非常流畅。
  • vue实现文字上下滚动

    千次阅读 2021-03-07 07:10:26
    实现文字的上下滚动使用positon的relative的top属性,通过动态改变top来实现相关内容的更换,通过transion来实现相关的动画效果,相关的dom内容{{"第"+item+"条数据"}}{{"第"+list[0]+"条数据"}}hello相关css内容img...

    实现文字的上下滚动使用positon的relative的top属性,通过动态改变top来实现相关内容的更换,通过transion来实现相关的动画效果,

    相关的dom内容

    • {{"第"+item+"条数据"}}

    • {{"第"+list[0]+"条数据"}}

    hello

    相关css内容

    img{ 30px;height: 30px;border-radius: 50%;vertical-align: middle;margin-right: 20px}

    ul{position: relative;}

    li{overflow: hidden;white-space: nowrap; text-overflow:ellipsis; 80%;height: 60px;line-height: 60px;text-align: left;margin: 0;font-size: 14px}

    .scroll{height:60px;overflow: hidden;font-size: 0px; position: relative;}

    .transition{transition: top 0.5s}

    相关script内容

    export default {

    name: 'HelloWorld',

    data() {

    return {

    list: [

    "一","二","三","四","五","六","七","八","九","十"

    ],

    top: "",

    index: 0,

    p:""

    }

    },

    mounted() {

    this.goScroll()

    },

    methods: {

    goScroll() {

    var _this = this;

    this.p = setInterval(() => {

    console.log(22)

    _this.top = -60 * _this.index + 'px';

    if (_this.index >= this.list.length + 1) {

    _this.index = 0;

    _this.top = -0 + 'px';

    clearInterval(_this.p);

    _this.continueScroll()

    } else {

    _this.index++;

    }

    }, 1000)

    },

    continueScroll(){

    var _this=this;

    setTimeout(() => {

    _this.index=1;

    _this.top = -60 * this.index+ 'px';

    _this.index++

    this.goScroll()

    },100);

    }

    },

    destroyed(){

    clearInterval( this.p );

    }

    }

    展开全文
  • JS-文字上下滚动(多行停顿)

    千次阅读 2015-09-09 14:16:23
    JS-文字上下滚动(多行停顿)

    代码如下:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <style type="text/css">
    * { margin:0; padding:0; font-size:12px; }
    #scrollBox
    {
    width:400px;
    height:40px;
    line-height:20px;
    overflow:hidden;
    margin:10px;
    }
    #scrollBox2
    {
    width:400px;
    height:80px;
    line-height:20px;
    overflow:hidden;
    margin:10px;
    }</style>
    <p> </p>
    <p>每屏两行:</p>
    <div id="scrollBox">
    <ul>
        <li><a href="http://www.cookseo.com/article/web/29.htm" target="_blank">ASP.NET 是.NET FrameWork的一部分</a></li>
        <li><a href="http://www.cookseo.com/article/css/126.htm" target="_blank">是一种使嵌入网页中的脚本可由因特网服务器执行的服务器端脚本技术</a></li>
        <li><a href="http://www.cookseo.com/article/soft/125.htm" target="_blank">是一项微软公司的技术</a></li>
        <li><a href="http://www.cookseo.com/article/css/2.htm" target="_blank">ASP.NET 是.NET FrameWork的一部分</a> </li>
    </ul>
    </div>
    <p>每屏四行:</p>
    <div id="scrollBox2">
    <ul>
        <li><a href="http://www.cookseo.com/article/soft/5.htm" target="_blank">ASP.NET 是.NET FrameWork的一部分</a></li>
        <li><a href="http://www.cookseo.com/article/css/35.htm" target="_blank">是一项微软公司的技术</a></li>
        <li><a href="http://www.cookseo.com/article/web/88.htm" target="_blank">是一项微软公司的技术</a></li>
        <li><a href="http://www.cookseo.com/article/css/2.htm" target="_blank">是一项微软公司的技术</a></li>
        <li><a href="http://www.cookseo.com/article/soft/71.htm" target="_blank">是一项微软公司的技术</a></li>
        <li><a href="http://www.cookseo.com/article/soft/9.htm" target="_blank">是一项微软公司的技术</a></li>
        <li><a href="http://www.cookseo.com/article/web/53.htm" target="_blank">是一项微软公司的技术</a></li>
        <li><a href="http://www.cookseo.com/article/web/124.htm" target="_blank">是一项微软公司的技术</a></li>
        <li><a href="http://www.cookseo.com/article/seo/32.htm" target="_blank">是一项微软公司的技术</a></li>
        <li><a href="http://www.cookseo.com/article/web/29.htm" target="_blank">是一项微软公司的技术</a></li>
        <li><a href="http://www.cookseo.com/article/css/126.htm" target="_blank">是一项微软公司的技术</a></li>
        <li><a href="http://www.cookseo.com/article/soft/125.htm" target="_blank">是一项微软公司的技术</a> </li>
    </ul>
    </div>
    <script type="text/javascript">
        function Dron_ScrollBox(uid) {
            this.scrollBox = document.getElementById(uid);
            this.scrollBoxHeight = this.scrollBox.clientHeight;
            this.scrollBoxInner = this.scrollBox.innerHTML;
            this.scrollCol = this.scrolln = 0;
            this.setScroll = function () {
                this.scrollBox.scrollTop = this.scrollCol + this.scrolln;
                if (this.scrolln == this.scrollBoxHeight)
                    return this.addScroll()
                else
                    this.scrolln++;
                var o = this;
                function m() { o.setScroll(); }
                setTimeout(m, 40);
            }
            this.addScroll = function () {
                this.scrollBox.innerHTML += "<br />" + this.scrollBoxInner;
                this.scrollCol = this.scrollBox.scrollTop;
                this.scrolln = 0;
                var o = this;
                function m() { o.setScroll(); }
                setTimeout(m, 2000);
            }
            this.init = this.addScroll;
        }
        //类的调用方法,可多个
        new Dron_ScrollBox("scrollBox").init();
        new Dron_ScrollBox("scrollBox2").init();
    </script>
    </body>
    </html>
    

    效果如图:


    展开全文
  • 文字滚动控件

    2013-07-25 10:54:06
    一个用于股市或者其他大屏的控件,有走马灯效果,使用简单,运行可靠
  • 主要介绍了Android实现文字滚动播放效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考
  • HTML5实现文字滚动

    2021-06-12 03:59:58
    滚动方向属性 direction该属性的滚动方向可以设置四个值:up(文字向上)、down(文字向下)、left(文字向左)、right(文字向右)。2.滚动方式属性 behavior该属性的取值有三个值:scroll(循环滚动,默认效果)、slide(只...

    充值公告:首充100送1元

    1.滚动方向属性 direction

    该属性的滚动方向可以设置四个值:up(文字向上)、down(文字向下)、left(文字向左)、right(文字向右)。

    2.滚动方式属性 behavior

    该属性的取值有三个值:scroll(循环滚动,默认效果)、slide(只滚动一次就停止)、alternate(来回交替进行滚动)

    3.滚动速度属性 scrollamount

    该属性能调整文字滚动的速度,滚动文字的速度实际上是通过设置滚动文字每次移动的长度来实现的,以像素为单位。值只写数字,不带px单位,若带了单位则设置无效。

    4.滚动延迟属性 scrolldelay

    该属性用来设置滚动文字滚动的时间间隔(滚动两步之间的时间间隔)。

    scrolldelay的时间间隔单位是毫秒,取值只写数字

    5.滚动循环属性 loop

    设置滚动文字后,默认会无限循环下去,若想控制循环的次数,可设置此属性。

    6.滚动范围属性 width&height

    若想控制文字滚动的范围,则可起用这二属性,以像素为单位,不写px单位。默认情况下left和right滚动的width和浏览器窗口同宽,搞定和文字高度同高。up和down时height为浏览器窗口高度的三分之一。

    7.滚动背景颜色属性 bgcolor

    此属性为滚动区域设置背景色(取值为十六进制颜色码和英文)。

    8.滚动空间属性 hspace&vspace

    hsapce属性可以设置滚动范围的水平位置,vspace用来设置滚动范围的垂直位置。单位均为像素,写值时不写单位px。

    展开全文
  • 封装成了用户自定义控件,文本字体、背景颜色随自定义控件的字体喝背景颜色改变而改变,使用方便。
  • 本文给大家分享了三种方式实现Android文字垂直滚动、纵向走马灯效果,文中给大家介绍了相关属性及注意事项,需要的朋友参考下吧
  • 一款目前挺多网站用到的jQuery页面滚动文字图片元素淡入动画特效,网页往下滚动时div、img等元素才淡入动画显示出来。
  • Unity中通过DoTWeen实现文字滚动效果

    千次阅读 2019-11-22 10:36:44
    Unity中通过DoTWeen实现文字滚动效果 废话不多说,直接上脚本内容 用的话,只需要把这个代码内容复制过去,然后按着注释理解很快就能完全理解了 写本篇文章的主要目的是为了防止自己在以后忘了,所以特此记录一下。...
  • 图片不间断向下滚动JS代码
  • js实现文字上下滚动

    千次阅读 2019-03-31 16:43:00
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">...js实现问题滚动</title> <script src="https://code.jquery.com/jquery-3.3.1.min.j...
  • 内容索引:VB源码,字符处理,文字滚动,电影序幕 一个VB写的文字滚动...而且没有闪烁现象,【滚动样式一】是循环连续滚动,【滚动样式二】则滚动到左端时停止一下继续滚动,【向上滚动样式一】也和前面差不多。
  • 【Web】CSS3实现文字滚动公告效果

    万次阅读 2018-04-03 16:08:10
    代码<!DOCTYPE html> , initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
  • jQuery简单的用户评论列表文字向下滑动切换特效
  • {return {scrollData: [{ id: 1, title: '架不住公司高层喜欢这种玩意儿' },{ id: 2, title: '用在vue项目中的需求跟原生js的实现' },{ id: 3, title: '文字间歇无缝向上滚动' },{ id: 4, title: '即使你有一百个不...
  • 原生js高仿新浪微博大厅评论列表文字淡出淡进向下滚动效果

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 58,551
精华内容 23,420
关键字:

文字向下滚动