- 浏览: 35165 次
- 性别:
- 来自: 广州
最近访客 更多访客>>
最新评论
-
charrys:
呵自己跟自己留言
JS可以控制样式的名称写法 -
charrys:
自己顶下
我的json获取数据实例,直接运行就可以看到了
我也是最近因为要做这种效果所以找了一下,很多都没有用,有的滚动一半就不滚了!以下是有用的所以收藏了,大家也可以参考一下。
直接贴代码了:
上下滚动
<!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="#">宋山木的“温柔adf论”能成立吗?</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 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"); var scroll_end = document.getElementById("scroll_end"); var scroll_div = document.getElementById("scroll_div"); 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>
来自(http://www.ok22.org/art_detail.aspx?id=114)可直接运行查看
发表评论
-
我的json获取数据实例,直接运行就可以看到了
2011-04-18 10:36 1276开始一直用jq的ajax接收值也是字符但是没用过json数据。 ... -
ckeditor 编辑器+finder配置上传功能
2011-04-03 11:53 1285一、官方Download 1、CKEditor ... -
kindeditor/ckeditor 编辑器加+图片自动上传成功(源码下载)
2011-04-03 11:40 1967编辑器加+图片自动上传并且更新编辑器图片的URL成功完例! ... -
js实现的非跨域的iframe高度自适应(完美兼容IE,FF,Opera)
2011-03-12 16:28 1357iframe的高度一直是让人头疼的问题。今天因为有个项目需要用 ... -
js遮罩层
2011-03-12 15:23 771直接贴代码了!(来自:http://www.ok22.org/ ... -
js多Tab自动切换,带完善的鼠标事件
2011-03-01 09:31 1532js多Tab自动切换,带完善的鼠标事件! 说明:打开鼠标时 ... -
js多个tab切换简单不需要在body内添加事件
2011-02-15 17:20 1307注意的是a的里面的rel属性window.onload事件!在 ... -
前端设计js+Tab切换可关闭+添加并自动判断是否已打开自动切换当前状态
2011-02-14 15:59 1295看了很多别人写的tab切换效果感觉都只是div+js去切换已存 ... -
清空数组的两种方式
2011-02-09 16:58 2234方式一,length赋值为0 这种方式很有意思,其它语言 ... -
js时间倒计时
2011-01-06 11:26 847前断时间,因为需要 ... -
JS可以控制样式的名称写法
2011-01-06 11:19 993盒子标签和属性对照 CSS语法 (不区分大小写) ... -
js给C#控件赋值
2010-12-30 10:34 1734前台代码 Html代码 <%@ Pa ... -
iframe里面的页面调用父窗口,左右窗口js函数的方法
2010-12-30 10:33 1188iframe里面的页面调用父窗口,左右窗口js函数的方法 ... -
关于图片延迟加载技术-ImageLazyLoad
2010-12-30 10:29 1071关于图片延迟加载技术的优点与缺点(来自http://www ... -
js判断父页存在
2010-12-30 10:26 775当你有多个页面有iframe内页时,你肯定也不想别人直接打开子 ...
相关推荐
js新闻上下滚动效果(兼容IE和ff)。
文字间歇向上滚动代码(兼容IE,FF),网上很多都不好用
JavaScript 无缝上下滚动加定高定宽停顿效果(兼容ie/ff) JavaScript 无缝上下滚动加定高定宽停顿效果(兼容ie/ff) body {font-size:12px;} .Scroller {line-height:20px; border:1px solid #D4D4D4; padding:0px...
一个可以代替Marquee走马灯特效的图片滚动封装类,它可控制图片做无缝循环滚动,可以在上下左右四个方面滚动,而且具备丰富自定义设置功能。它的特点: 横向、纵向滚动格式调整 (解决横向滚动换行的问题,无需特殊...
* 浏览器兼容问题 (IE、FF、Opera、NS、MYIE) 1.2.060922 + 指定范围间歇滚动 * 程序调整 * 连续间歇滚动停止的错误 1.0.060901 + 向下、向右滚动 + 开始等待时间 + 连续滚动 * 调整时间单位 * ...
js 实现无缝滚动 兼容IE FF,大家可以看看。
* 浏览器兼容问题 (IE、FF、Opera、NS、MYIE) 1.2.060922 + 指定范围间歇滚动 * 程序调整 * 连续间歇滚动停止的错误 1.0.060901 + 向下、向右滚动 + 开始等待时间 + 连续滚动 * 调整时间单位 * ...
支持 ie7ie7FF js控制图片平滑滚动 其他未测试
它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+),jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML(标准通用标记语言下的一个应用)...
JS无间隔滚动代码.rar 网页JS无间隔滚动代码,兼容IE FF OP
实现图片文字,向左,向右,向上,向下无缝滚动,适合广告图片展示 浏览器兼容(IE、FF、Opera、NS、MYIE)
My Name is tomzhou! Hello,ipaddr Hello,bcomcn ... [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]其中,100px是滚动区域的高度,宽度由scrollcont的外面容器决定,setInterval里面的50决定滚动的速度。
//获取滚动距离(FF每次滚动 data为3或者-3,其他为120或者-120) var data = e.detail || e.wheelDelta; alert(data); } //IE之外的绑定事件方法 if(document.addEventListener && !document.attachEvent) {...
脚本资源,jQuery,图片放大,图片缩小 onmousewheeljquery的滚动鼠标放大缩小图片效果 兼容火狐今天要出个鼠标滚动放大缩小图片的功能,看似很简单,从网上一搜,出现的都是onmousewheel的例子,全部只支持IE浏览器,...
JustWalking 是本人开发的一款js常用效果框架,兼容各种浏览器,代码经长期使用测试并没有什么bug,分享给大家,希望为广大javascript爱好者提供帮助。 以下是部分效果链接地址: ... ... ... ...滚动播放广告图片.html ...
使用js实现了ie的marquee标签滚动功能, 使之能兼容FF,ie 并修正了纯中文横向滚动时的bug..
2010最新全面兼容ie6,ie7,ie8,ff的CSS HACK写法 #google1 { border:none; width:270px; height:20px; margin:0px 0; font-size:12px; padding-left:0px; overflow:hidden; font-family:Arial; } #google1 ul { ...
兼容IE与FF Code:间隔滚动效果-兼容IE和FireFox 14家国内银行启用CN新域名防诈骗 华军,天空就暂停迅雷下载发布最新公告 微软OneCare处子秀过关 拦住Word漏洞木马 [Ctrl+A 全选 注:如需引入外部Js需刷新...