素材牛VIP会员

纯JS实现文字无缝上下滚动特效

 所属分类:网页特效-文字特效,触屏/拖拽/下拉

 浏览:2410次  下载:4次  评论:0次  更新时间:2016-10-20
纯JS实现文字无缝上下滚动特效兼容IE6
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!   充值积分   充值会员   更多说明»
素材描述:多用于公告、新闻滚动,支持自定义文字间歇滚动方向。

详细介绍

使用方法和介绍:

核心CSS样式

.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;}

引入特效JS文件

<script type="text/javascript" src="js/scrolltext.js"></script>

HTML结构

演示1:向下滚动

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

JS初始化、配置

// 演示一
if (document.getElementById("sucainiu01")) {
    var scrollup = new ScrollText("sucainiu01");
    scrollup.LineHeight = 22;        //单排文字滚动的高度
    scrollup.Amount = 1;            //注意:子模块(LineHeight)一定要能整除Amount.
    scrollup.Delay = 20;           //延时
    scrollup.Start();             //文字自动滚动
    scrollup.Direction = "down"; //文字向下滚动
}

演示2:向上滚动

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

JS初始化、配置

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

相关素材 - 文字特效,触屏/拖拽/下拉

讨论这个素材(0)回答他人问题或分享使用心得会奖励牛币

〒_〒 居然一个评论都没有……

 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的牛币余额:0 已下载次数:4
所需牛币:1 开始下载

牛币获取:签到、评论、充值    » 在线充值(10牛币=1元)