笔墨无缝转动,相应鼠标遏制,可控上下一条

发布时间：2018-08-20 08:32:04 所属栏目：编程来源：站长网

导读：一个常见的无缝笔墨转动，团结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>
提醒：可修改儿女码再运行!

（编辑：湖南网）

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

MySQL源码安置	运用图形界面从SQL导入
MySQL5.7+keepalived+	windows系统下jsp+mys