- 浏览: 50428 次
- 性别:
- 来自: 广州
最新评论
-
lteb2002:
这个功能用Java Applet也是非常好实现的,可以自动将粘 ...
kindeditor/ckeditor编辑器加+图片自动上传成功
我也是最近因为要做这种效果所以找了一下,很多都没有用,有的滚动一半就不滚了!以下是有用的所以收藏了,大家也可以参考一下。
转自:http://www.ok22.org/art_detail.aspx?id=114(可直接运行)
直接贴代码了:
上下滚动
Html代码
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
- <HTML xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <TITLE>文字上下滚动</TITLE>
- <META http-equiv=Content-Type content="text/html;charset=utf-8">
- <STYLE type=text/css media=screen>
- *{margin:0;padding:0;font-size:12px;}
- a{color:#333;text-decoration:none}
- a:hover{color:#901d22;text-decoration:underline}
- .clear{clear:both;font-size:0;line-height:0;height:0}
- SPAN.darkred{font-size:14px;color:#933}
- #search{border:1px solid #ccc;margin:0 auto;width:950px;margin-bottom:8px;height:29px}
- #commend{width:720px;color:#fff}
- #commend a{color:#333}
- .scrollNews{padding-TOP:4px;position:relative}
- #newscommend{padding-RIGHT:2px;font-weight:normal;overflow:hidden;width:602px;line-height:20px;height:20px}
- .scrollNews div{LEFT:507px;position:absolute;}
- .scrollNews a{CURSOR:pointer}
- .scrollNews IMG{width:25px;height:8px;background:#000;}
- </STYLE>
- </head>
- <body>
- <div id="new_list" style="display:none;">
- <h6><a href="#">宋山木的“温柔论”能成立吗?</a></h6>
- <h6><a href="#">坐在中国最拥挤的火车上</a></h6>
- <h6><a href="#">前卫美女拍比基尼婚纱照</a></h6>
- <h6><a href="#">中南海保镖这么练出来的</a></h6>
- <h6><a href="#">围观景区冬日人体彩绘秀</a></h6>
- <h6><a href="#">贷款修路有尽 为何缴费还贷不止?</a></h6>
- <h6><a href="#">中国“元”级柴电潜艇堪称深海歼20</a></h6>
- <h6><a href="#">辛酸中的感动:为那些骑摩返们</a></h6>
- <h6><a href="#">高房价 让多少未婚女孩当了小三?</a></h6>
- <h6><a href="#">兽内衣模特大赛照!真有料</a></h6>
- </div>
- <div id=search>
- <div id=commend>
- <div class=scrollNews>
- <H3 id=newscommend></H3>
- <div style="TOP:3px"><a id="pre"><IMG src=""></a></div>
- <div style="TOP:15px"><a id="next"><IMG src=""></a></div>
- </div>
- </div>
- </div>
- <SCRIPT type="text/javascript">
- function scrollnews(){
- var htext=document.getElementById("new_list").getElementsByTagName("h6");
- var text_holder=document.getElementById("newscommend");
- var oFrag=document.createDocumentFragment();
- oFrag.innerHTML="";
- for(var i=0;i<htext.length;i++){
- oFrag.innerHTML+=htext[i].innerHTML+" ";
- if((i>0&&i%2==1)||(i==htext.length-1&&i%2==0)){
- oFrag.innerHTML+="<br/>";
- }
- }
- text_holder.innerHTML=oFrag.innerHTML;
- }
- function ScrollText(content,btnPrevious,btnNext,autoStart,timeout,isSmoothScroll){
- this.Speed=10;
- this.Timeout=timeout;
- this.stopscroll=false;
- this.isSmoothScroll=isSmoothScroll;
- this.LineHeight=20;
- thisthis.NextButton=this.$(btnNext);
- thisthis.PreviousButton=this.$(btnPrevious);
- thisthis.ScrollContent=this.$(content);
- this.ScrollContent.innerHTML+=this.ScrollContent.innerHTML;
- if(this.PreviousButton){
- thisthis.PreviousButton.onclick=this.GetFunction(this,"Previous");
- thisthis.PreviousButton.onmouseover=this.GetFunction(this,"MouseOver");
- thisthis.PreviousButton.onmouseout=this.GetFunction(this,"MouseOut");
- }
- if(this.NextButton){
- thisthis.NextButton.onclick=this.GetFunction(this,"Next");
- thisthis.NextButton.onmouseover=this.GetFunction(this,"MouseOver");
- thisthis.NextButton.onmouseout=this.GetFunction(this,"MouseOut");
- }
- thisthis.ScrollContent.onmouseover=this.GetFunction(this,"MouseOver");
- thisthis.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);
- }
- },
- 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);
- }
- }
- }
- </SCRIPT>
- <SCRIPT type="text/javascript">
- scrollnews();
- var scroll1=new ScrollText("newscommend","pre","next",true,2500,false);
- </SCRIPT>
- </body>
- </HTML>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <HTML xmlns="http://www.w3.org/1999/xhtml"> <head> <TITLE>文字上下滚动</TITLE> <META http-equiv=Content-Type content="text/html;charset=utf-8"> <STYLE type=text/css media=screen> *{margin:0;padding:0;font-size:12px;} a{color:#333;text-decoration:none} a:hover{color:#901d22;text-decoration:underline} .clear{clear:both;font-size:0;line-height:0;height:0} SPAN.darkred{font-size:14px;color:#933} #search{border:1px solid #ccc;margin:0 auto;width:950px;margin-bottom:8px;height:29px} #commend{width:720px;color:#fff} #commend a{color:#333} .scrollNews{padding-TOP:4px;position:relative} #newscommend{padding-RIGHT:2px;font-weight:normal;overflow:hidden;width:602px;line-height:20px;height:20px} .scrollNews div{LEFT:507px;position:absolute;} .scrollNews a{CURSOR:pointer} .scrollNews IMG{width:25px;height:8px;background:#000;} </STYLE> </head> <body> <div id="new_list" style="display:none;"> <h6><a href="#">宋山木的“温柔论”能成立吗?</a></h6> <h6><a href="#">坐在中国最拥挤的火车上</a></h6> <h6><a href="#">前卫美女拍比基尼婚纱照</a></h6> <h6><a href="#">中南海保镖这么练出来的</a></h6> <h6><a href="#">围观景区冬日人体彩绘秀</a></h6> <h6><a href="#">贷款修路有尽 为何缴费还贷不止?</a></h6> <h6><a href="#">中国“元”级柴电潜艇堪称深海歼20</a></h6> <h6><a href="#">辛酸中的感动:为那些骑摩返们</a></h6> <h6><a href="#">高房价 让多少未婚女孩当了小三?</a></h6> <h6><a href="#">兽内衣模特大赛照!真有料</a></h6> </div> <div id=search> <div id=commend> <div class=scrollNews> <H3 id=newscommend></H3> <div style="TOP:3px"><a id="pre"><IMG src=""></a></div> <div style="TOP:15px"><a id="next"><IMG src=""></a></div> </div> </div> </div> <SCRIPT type="text/javascript"> function scrollnews(){ var htext=document.getElementById("new_list").getElementsByTagName("h6"); var text_holder=document.getElementById("newscommend"); var oFrag=document.createDocumentFragment(); oFrag.innerHTML=""; for(var i=0;i<htext.length;i++){ oFrag.innerHTML+=htext[i].innerHTML+" "; if((i>0&&i%2==1)||(i==htext.length-1&&i%2==0)){ oFrag.innerHTML+="<br/>"; } } text_holder.innerHTML=oFrag.innerHTML; } 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); } }, 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); } } } </SCRIPT> <SCRIPT type="text/javascript"> scrollnews(); var scroll1=new ScrollText("newscommend","pre","next",true,2500,false); </SCRIPT> </body> </HTML>
左右滚动(修改:文字不够宽度时停止滚动)
Html代码运行
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- <title>JS实现文字无间隙滚动代码</title>
- <style type="text/css">
- body{font-size:12px;}
- .sqBorder {width:938px;margin:0px auto;padding:10px;border:1px #91CD5A solid;background:#DAEEB5;}
- .scroll_div {width:936px;margin:0 auto;overflow: hidden;white-space: nowrap;}
- .scroll_div a:hover{color:#FF0000}
- .scroll_div a{color:#000;margin-right:5px;}
- .scroll_div a img{border:none; vertical-align:middle;}
- #scroll_begin, #scroll_end, #scroll_begin ul, #scroll_end ul, #scroll_begin ul li, #scroll_end ul li{display:inline;}
- </style>
- </head>
- <body>
- <script language="javascript">
- function ScrollImgLeft(){
- var speed=30;
- var scroll_begin = document.getElementById("scroll_begin");
- //alert(scroll_begin.scrollWidth);
- var scroll_end = document.getElementById("scroll_end");
- var scroll_div = document.getElementById("scroll_div");
- if (scroll_begin.scrollWidth > parseInt(document.body.clientWidth) / 2) {
- scroll_end.innerHTML = scroll_begin.innerHTML;
- function Marquee() {
- if (scroll_end.offsetWidth - scroll_div.scrollLeft <= 0)
- scroll_div.scrollLeft -= scroll_begin.offsetWidth
- else
- scroll_div.scrollLeft++
- }
- var MyMar = setInterval(Marquee, speed);
- scroll_div.onmouseover = function() { clearInterval(MyMar) }
- scroll_div.onmouseout = function() { MyMar = setInterval(Marquee, speed) }
- }
- }
- </script>
- <div style="text-align:center">
- <div class="sqBorder">
- <!--#####滚动区域#####-->
- <div id="scroll_div" class="scroll_div">
- <div id="scroll_begin">
- <ul>
- <li><a href="#">供需打法在若需寺革基本原则霜期地模压</a></li>
- <li><a href="#">供需打法在若需寺革基本原则霜期地模压</a></li>
- <li><a href="#">供需打法在若需寺革基本原则霜期地模压</a></li>
- <li><a href="#">供需打法在若需寺革基本原则霜期地模压</a></li>
- <li><a href="#">供需打法在若需寺革基本原则霜期地模压</a></li>
- <li><a href="#">供需打法在若需寺革基本原则霜期地模压</a></li>
- <li><a href="#">供需打法在若需寺革基本原则霜期地模压</a></li>
- </ul>
- </div>
- <div id="scroll_end"></div>
- </div>
- <!--#####滚动区域#####-->
- </div>
- <script type="text/javascript">ScrollImgLeft();</script>
- </div>
- <!--//向左滚动代码结束-->
- </body>
- </html>
相关推荐
在本示例中,"js新闻上下滚动效果(兼容IE和ff)"指的是利用JavaScript实现一个新闻标题在网页上进行上下滚动的效果,这种效果常见于新闻网站,能够展示多条新闻,同时保持页面空间的有效利用。这个效果不仅在现代...
标题“文字间歇向上滚动代码(兼容IE,FF)”表明我们将探讨一个JavaScript实现的解决方案,该方案不仅能在现代浏览器如Firefox中正常工作,而且还能兼容老版本的Internet Explorer(IE)。考虑到IE浏览器曾经的广泛...
JavaScript 无缝上下滚动加定高定宽停顿效果(兼容ie/ff) JavaScript 无缝上下滚动加定高定宽停顿效果(兼容ie/ff) body {font-size:12px;} .Scroller {line-height:20px; border:1px solid #D4D4D4; padding:0px...
在本项目中,通过结合Jquery库和两个特定的插件——jquery.easing.js与jquery.vgrid.js,实现了这种布局,并且确保了在包括IE6+以及Firefox在内的多种浏览器中的兼容性。 1. Jquery:Jquery是一个广泛使用的...
总的来说,"图片向上滚动效果(兼容ie6,ie7.ff)"是一个涉及到CSS布局、JavaScript动画以及浏览器兼容性处理的综合实践。实现这个效果需要对前端技术有深入的理解,并充分考虑用户的需求和体验。提供的压缩包文件很...
跑马灯效果是一种常见的网页动态展示技术,常用于滚动显示文字、图片或其他信息,使得页面内容更具吸引力。在Web开发中,实现这种效果通常需要利用JavaScript语言,因为HTML和CSS本身并不支持自动滚动。本教程将详细...
对于兼容性问题,JavaScript通常配合CSS3使用,因为CSS3提供了许多强大的布局功能,如Flexbox和Grid,但在老版本的IE浏览器(特别是IE8及以下)中,这些新特性可能不被支持。为了实现对这些浏览器的兼容,我们可以...
标题 "下拉框可输入+自动提示+支持键盘事件兼容IE,FF" 指的是一种前端开发技术,用于创建具有智能搜索和自动提示功能的下拉选择框。这种技术通常应用于网页表单中,提高用户输入数据的效率和体验。在描述中提到的 ...
一个可以代替Marquee走马灯特效的图片滚动封装类,它可控制图片做无缝循环滚动,可以在上下左右四个方面滚动,而且具备丰富自定义设置功能。它的特点: 横向、纵向滚动格式调整 (解决横向滚动换行的问题,无需特殊...
针对标题提及的"如何让div+css兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器",这里将详细讨论一些关键的CSS兼容性问题及解决方案。 1. **DOCTYPE的影响**: DOCTYPE声明会影响浏览器进入何种文档模式。在HTML4或...
本话题主要涉及以下几个关键知识点:表格题头的拖动、超出宽度显示省略号、滚动条的使用以及跨浏览器兼容性,特别是针对IE、Firefox(FF)和Safari这三大主流浏览器。 1. **表格题头拖动**:这是一种交互设计特性,...
本文档“DIV+css兼容性FFIE6IE7IE8IE9[借鉴].pdf”主要关注如何处理Firefox和不同版本的Internet Explorer(IE6、IE7、IE8、IE9)之间的CSS差异。以下是一些关键知识点的详细说明: 1. **CSS Hack**: - CSS Hack...
本文主要探讨Internet Explorer(简称IE)与Mozilla Firefox(简称FF或MF)之间在JavaScript脚本执行时存在的兼容性问题。这些问题涉及到文档对象模型(DOM)操作、事件处理等多个方面,对于开发跨浏览器兼容的应用...
* 浏览器兼容问题 (IE、FF、Opera、NS、MYIE) 1.2.060922 + 指定范围间歇滚动 * 程序调整 * 连续间歇滚动停止的错误 1.0.060901 + 向下、向右滚动 + 开始等待时间 + 连续滚动 * 调整时间单位 * ...
### JavaScript 实现无缝滚动 兼容IE与Firefox 在网页设计和前端开发中,无缝滚动是一种常见的技术,它能够提供连续、平滑的滚动效果,为用户带来更加流畅的体验。本文将详细介绍如何使用JavaScript来实现一个兼容...
这个名为"js全兼容图片滚动代码"的资源显然提供了这样一个解决方案,尤其强调对IE7及Firefox的支持。以下将详细解析这一技术点。 首先,JavaScript(简称JS)是一种轻量级的、解释型的编程语言,主要用于客户端网页...
标题“兼容ie,FF,chrome,opera的弹出层居中js”所指的就是一个JavaScript实现的弹出层(popup layer)定位代码,它能在Internet Explorer(IE)、Firefox(FF)、Chrome以及Opera这些主流浏览器中实现居中显示。...
标题中的“jquery实现区块或链接横向无缝循环滚动,自适应宽度,可随意设置外容器的宽度,高度自适应,兼容IE,FF,CHROME”是一个jQuery插件或脚本的功能描述,它涉及到网页中元素的动态展示效果。下面将详细解释这...