文字无缝滚动,响应鼠标停止,可控上下一条

发布时间：2018-08-21 04:41:32 所属栏目：PHP教程来源：站长网

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

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

　　文字滚动是使用了js控制，烈火在js中进行了标注，您可以修改js脚本以调整滚动高度，是否平滑连续滚动，滚动速度等等，当然您的javascript水平可能高的多，小编就不再多介绍了。

　　实例演示：

<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>
提示：可修改后代码再运行!

（编辑：信阳站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!