无缝文字滚动

最新推荐文章于 2024-08-16 08:29:03 发布
最新推荐文章于 2024-08-16 08:29:03 发布
阅读量1.2k 收藏
点赞数
分类专栏： ASP.NET 文章标签： 无缝文字滚动

一个常见的无缝文字滚动，结合CSS构建的区域形成即时新闻列表，与常见滚动有所不同的是，我们增加了手动控制，即：如果文字滚动错过了想要看的文章标题，您可以按向上或向下的控制按钮进行返回操作。


文章源自：烈火网，原文：http://www.veryhuo.com/a/view/26106.html

<html>
<head>
<title>可控制文字列表上下滚动效果</title>
<meta http-equiv="content-type" content="text/html; charset=gbk" />
<style>
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td {margin:0;padding:0; font-size:12px;}
li{ list-style:none;}
ul{ margin:0;}
a{ color:#0066CC; text-decoration:none;}
a:hover{ color:#FF0000; text-decoration: underline;}
.breakNewsblock {
margin:0 auto;
position:relative;
width:276px;
overflow:hidden;
}
.breakNewsblock h2 {
background:transparent url(/uploads/allimg/1009/icon.gif) no-repeat scroll 7px -307px;
color:#8F1D21;
float:left;
font-size:12px;
padding-left:25px;
}
.breakNewsblock h2 span{ float:right; padding-right:10px;}
#breakNews {
background:transparent url(/uploads/allimg/1009/backbar.gif) no-repeat scroll center top;float:left;height:138px;
margin-top:5px;
padding:0 0 3px 2px;
width:275px;
}
#breakNews .list6 {color:#333333;float:left;height:115px;margin-top:11px;overflow:hidden;width:240px; padding-left:10px;
}
#breakNews .list6 li{ padding:3px 0;}
#breakNews .hit {float:right;height:24px; margin-top:23px; width:17px;}
#breakNews .hit span { display:block;float:left;height:13px; margin-bottom:6px;width:13px;}
</style>
<script language="javascript" type="text/javascript">
function ScrollText(content,btnPrevious,btnNext,autoStart,timeout,isSmoothScroll)
{
this.Speed = 10;//滚动速度
this.Timeout = timeout;
this.stopscroll =false;//是否停止滚动的标志位
this.isSmoothScroll= isSmoothScroll;//是否平滑连续滚动
this.LineHeight = 20;//默认高度。可以在外部根据需要设置
this.NextButton = this.$(btnNext);
this.PreviousButton = this.$(btnPrevious);
this.ScrollContent = this.$(content);
this.ScrollContent.innerHTML += this.ScrollContent.innerHTML;//为了平滑滚动再加一遍
if(this.PreviousButton)
{
this.PreviousButton.onclick = this.GetFunction(this,"Previous");
this.PreviousButton.onmouseover = this.GetFunction(this,"MouseOver");
this.PreviousButton.onmouseout = this.GetFunction(this,"MouseOut");
}
if(this.NextButton){
this.NextButton.onclick = this.GetFunction(this,"Next");
this.NextButton.onmouseover = this.GetFunction(this,"MouseOver");
this.NextButton.onmouseout = this.GetFunction(this,"MouseOut");
}
this.ScrollContent.onmouseover = this.GetFunction(this,"MouseOver");
this.ScrollContent.onmouseout = this.GetFunction(this,"MouseOut");
if(autoStart)
{
this.Start();
}
}
ScrollText.prototype = {
$:function(element)
{
return document.getElementById(element);
},
Previous:function()
{
this.stopscroll = true;
this.Scroll("up");
},
Next:function()
{
this.stopscroll = true;
this.Scroll("down");
},
Start:function()
{
if(this.isSmoothScroll)
{
this.AutoScrollTimer = setInterval(this.GetFunction(this,"SmoothScroll"), this.Timeout);
}
else
{
this.AutoScrollTimer = setInterval(this.GetFunction(this,"AutoScroll"), this.Timeout);
}
},
Stop:function()
{
clearTimeout(this.AutoScrollTimer);
this.DelayTimerStop = 0;
},
MouseOver:function()
{
this.stopscroll = true;
},
MouseOut:function()
{
this.stopscroll = false;
},
AutoScroll:function()
{
if(this.stopscroll)
{
return;
}
this.ScrollContent.scrollTop++;
if(parseInt(this.ScrollContent.scrollTop) % this.LineHeight != 0)
{
this.ScrollTimer = setTimeout(this.GetFunction(this,"AutoScroll"), this.Speed);
}
else
{
if(parseInt(this.ScrollContent.scrollTop) >= parseInt(this.ScrollContent.scrollHeight) / 2)
{
this.ScrollContent.scrollTop = 0;
}
clearTimeout(this.ScrollTimer);
//this.AutoScrollTimer = setTimeout(this.GetFunction(this,"AutoScroll"), this.Timeout);
}
},
SmoothScroll:function()
{
if(this.stopscroll)
{
return;
}
this.ScrollContent.scrollTop++;
if(parseInt(this.ScrollContent.scrollTop) >= parseInt(this.ScrollContent.scrollHeight) / 2)
{
this.ScrollContent.scrollTop = 0;
}
},
Scroll:function(direction)
{
if(direction=="up")
{
this.ScrollContent.scrollTop--;
}
else
{
this.ScrollContent.scrollTop++;
}
if(parseInt(this.ScrollContent.scrollTop) >= parseInt(this.ScrollContent.scrollHeight) / 2)
{
this.ScrollContent.scrollTop = 0;
}
else if(parseInt(this.ScrollContent.scrollTop)<=0)
{
this.ScrollContent.scrollTop = parseInt(this.ScrollContent.scrollHeight) / 2;
}
if(parseInt(this.ScrollContent.scrollTop) % this.LineHeight != 0)
{
this.ScrollTimer = setTimeout(this.GetFunction(this,"Scroll",direction), this.Speed);
}
},
GetFunction:function(variable,method,param)
{
return function()
{
variable[method](param);
}
}
}
function ignoreError() {
return true;
}
window.onerror = ignoreError;
</script>
</head>
<body>
<div class="breakNewsblock">
<h2><a target="_blank" href="#">即时新闻</a></h2>
<div id="breakNews">
<ul id="breakNewsList" class="list6">
<li><a target="_blank" href="http://www.veryhuo.com/a/view/25671.html">百度MP3哼唱搜索悄悄上线 可通过旋律</a></li>
<li><a target="_blank" href="http://www.veryhuo.com/a/view/26072.html">盛大游戏获《最终幻想14》大陆独家运</a></li>
<li><a target="_blank" href="http://www.veryhuo.com/a/view/26071.html">百度在线输入法上线 占据首页重要位置</a></li>
<li><a target="_blank" href="http://www.veryhuo.com/a/view/26068.html">腾讯SNS平台开放:开发者担忧开放性</a></li>
<li><a target="_blank" href="http://www.veryhuo.com/a/view/26061.html">百度推微博(t.baidu.com)内测,取名百度</a></li>
<li><a target="_blank" href="http://www.veryhuo.com/a/view/26022.html">盛大和CNTV.CN成立合资游戏公司易橙天</a></li>
<li><a target="_blank" href="http://www.veryhuo.com/a/view/26021.html">MSN推出中文网址导航 定位白领用户生活</a></li>
<li><a target="_blank" href="http://www.veryhuo.com/a/view/25988.html">phpwind站长交流会石家庄站本月18日召开</a></li>
<li><a target="_blank" href="http://www.veryhuo.com/a/view/26020.html">7K7K流量逼近4399 hao123游戏导航栏悄然</a></li>
<li><a target="_blank" href="http://www.veryhuo.com/a/view/25947.html">传4399出售谈判近尾声 蔡文胜亮底价待</a></li>
<li><a target="_blank" href="http://www.veryhuo.com/a/view/25900.html">最大域名注册商GoDaddy或将10亿美元</a></li>
<li><a target="_blank" href="http://www.veryhuo.com/a/view/25509.html">网易邮箱及有道翻译实现百度搜索即搜</a></li>
<li><a target="_blank" href="http://www.veryhuo.com/a/view/25485.html">微软Bing可视化搜索之“魔兽世界”上</a></li>
<li><a target="_blank" href="http://www.veryhuo.com/a/view/25425.html">百度联盟推出网盟推广“邀请.返利”活</a></li>
</ul>
<div class="hit">
<span><a style="cursor: pointer;"><img width="11" height="10" id="pre2" alt="上一条" src="/uploads/allimg/1009/none.gif"/></a></span>
<span><a style="cursor: pointer;"><img width="11" height="10" id="next2" alt="下一条" src="/uploads/allimg/1009/none.gif"/></a></span>
</div>
</div>
</div>
<script language="javascript" type="text/javascript">
var scroll2 = new ScrollText("breakNewsList","pre2","next2",true,70,true);
scroll2.LineHeight = 24;
</script>
</body>
</html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
文章源自：烈火网，原文：http://www.veryhuo.com/a/view/26106.html

waterxcfg304
关注
专栏目录
js无缝滚动制作js文字无缝滚动
12-15
js无缝滚动制作js文字无缝滚动和js图片无缝滚动 js文字切换特效制作焦点文字带滤镜切换效果 js文字特效制作js文字闪烁与文字变色效果
文字左右无缝滚动JS（前端技术分享）
10-31
网上找了很多文字无缝滚动的都是坑爹货，这个不是HTML自带的滚动文字滚动，而是JS实现的左右滚动
文字无缝滚动
前端随笔
06-13 514
闲来无事写了一个文字无缝滚动，直接上代码，也可将文字替换成相应的图片。。 HTML代码： 文本内容df文本内容re文本er内容文本内g容文本内容文本内容文本内容文本内容文本内vgg容文本内容文本内容文本内容文本内容文本内容文本dfgsd容文本内dfdf容文本内容文本内gf文本内容文本gd本df内容文本g内s容文本内容 CSS代码： .box{width:200px;he
开源推荐：React Native 文本滚动神器 —— react-native-text-ticker
最新发布
gitblog_00960的博客
08-16 558
???? 开源推荐：React Native 文本滚动神器 —— react-native-text-ticker react-native-text-tickerReact Native Text Ticker/Marquee Component项目地址:https://gitcode.com/gh_mirrors/re/react-native-text-ticker ???? 项目介绍 在移动应用开发...
JS实现文字无缝滚动
LY
04-25 8394
今天学习了JS的一些位置属性，练习的时候写一个文字无缝滚动。（之前看书学习的时候也做过一个类似的案例：竖直滚动的文本行） 位置属性： style.top：设置或返回定位元素的顶部位置 style.left：设置或返回定位元素的左边位置 offsetWidth：自己的的宽度，无单位。 style.width只能得到行内样式设置的宽度 offsetHeight：自己的的高度 offsetTop：距离...
文字无缝循环滚动js代码（放到body中直接可以使用）
01-23
文字无缝循环滚动js代码（放到body中直接可以使用） 想把table中的内容做成滚动效果，尝试了很多代码，有的都只循环了一次就停了。这个代码就会一直循环，而且无缝，解释也非常详细。希望对大家有帮助！
无缝文字滚动方案
07-18
【无缝文字滚动方案】是一种常见的网页动态效果，用于在有限的空间内展示大量文字内容，比如新闻更新、滚动公告等。这种技术主要通过JavaScript实现，利用JS的定时器和字符串操作功能，让文字按照预设的方式不间断地...
文字列表无缝向上滚动
12-09
【文字列表无缝向上滚动】是一种常见的网页动态效果，它能够为用户提供流畅的视觉体验，尤其在展示大量文本信息时，如新闻更新、公告或者产品列表等。这种效果通过编程技术实现，使得文字列表在到达顶部时不是突然...
js实现文字内容无缝滚动动画效果
06-20
"js实现文字内容无缝滚动动画效果"是一个常见的JavaScript技术应用，主要用于创建一种视觉上连续、无中断的文字滚动展示，常见于新闻网站或者公告栏。这种效果使得有限的空间内可以展示更多的信息，而不会显得拥挤。...
javascript实现文字无缝滚动
10-20
在前端开发领域，实现文字的无缝滚动是一个常见的需求，它可以使网页内容呈现更加动态和吸引人的效果。无缝滚动，顾名思义，是指滚动的文字在到达容器的末端时能够无缝地从另一端出现，从而形成一个连续滚动的视觉...
js实现文字无缝向上滚动
10-20
描述部分提到，文章提供了一个示例代码，而标签“js文字无缝向上滚动 文字向上无缝滚动 js 无缝滚动”表明文章将围绕在网页设计中实现文字滚动效果的技术点展开讨论。 在给定的内容部分中，首先展示了一段HTML代码...
JQuery实现文字无缝滚动效果示例代码(Marquee插件)
12-10
推荐一个JQuery的无缝文字滚动效果，同时也可以滚动图片，也叫做跑马灯效果。 此jquery插件，依托jquery库，能实现各种滚动效果，且让HTML代码符合W3C标准。 使用方法如下： 1、加载javascript。 [removed][removed] [removed][removed] [removed] $(function(){ $("#marquee").
利用Marquee实现无缝循环滚动文字
02-25
MARQUEE属性与用法，能实现无缝循环滚动文字，上下，左右都可以
文字无缝滚动效果代码
02-04
在做网站时经常会遇到文字或者图片的滚动效果，这款资源很全面
【代码】js实现文字无缝滚动播放
xilejie的博客
05-22 1721
【代码】js实现文字无缝滚动播放。
html文字无缝隙,marquee实现文字无缝滚动+css无缝滚动
weixin_31208627的博客
06-11 800
内容内容 内容内容 内容内容 内容内容 direction表示滚动的方向，值可以是left，right，up，down，默认为leftbehavior表示滚动的方式，值可以是scroll(连续滚动)slide(滑动一次)alternate(往返滚动)loop表示循环的次数，值是正整数，默认为无限循环scrollamount表示运动速度，值是正整数，默认为6scrolldelay表示停顿时间，值是...
css3 实现文字横幅无缝滚动
来杯卡布奇诺的博客
08-10 915
使用 css3 关键帧 @keyframes 和 animation属性实现文字横幅无缝滚动。
如何实现文字的无缝滚动
梦幻之白夜
03-15 652
文字列表无缝向上滚动JavaScript代码 *{margin:0px;padding:0px;border:0px;} body{font-size:12px} #demo1{ height:auto; text-align:left; } #demo2{ height:auto; text-align:left; } #demo1 li{ list-style-type:none; hei
js原生实现文字无缝横向滚动
静心园
04-15 2727
文字无缝滚动可以使用现成的组件实现，但总感觉有点杀鸡用牛刀的感觉，而且网上的东西太杂乱，即使找到一个可用的组件，在参考资料很少的情况下也需要花费大量的精力，所以还不如自己纯手工实现一个，其主要的原理就是使用js修改文字warpper的trasform属性，然后加上相应的位置判断，当文字滚动超出了wrapper的范围，就重新回到初始位置，这样来回就可以实现文字的无缝滚动了。 项目是基于vue的，但具体实现使用的是原生js方法，简单修改可用于一般项目当中 html <div id="center-bott
创建CSS文字滚动效果
"该资源是关于创建文字滚动效果的代码示例。" 在网页设计中，文字滚动效果是一种常见的动态展示信息的方式，尤其适用于有限的空间内显示大量文本。这个示例提供了一段CSS和JavaScript代码，用于实现一个简单的水平...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值