首页 > 代码库 > javascript 向上滚动
javascript 向上滚动
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta http-equiv="Content-Language" content="zh-CN"><meta name="Keywords" content=",,"><meta name="Description" content=" /"><title>SuperSlide - 文字无缝滚动特效-上</title><!-- <script src=http://www.mamicode.com/"http://libs.baidu.com/jquery/1.4.2/jquery.min.js"></script> --></head><body><style type="text/css"> /* css 重置 */ *{margin:0; padding:0; list-style:none; } body{ background:#fff; font:normal 12px/22px 宋体; } img{ border:0; } a{ text-decoration:none; color:#333; } a:hover{ color:#1974A1; } /* 本例子css */ .txtMarquee-top{ overflow:hidden; position:relative; border:1px solid #ccc; } .txtMarquee-top .hd{ overflow:hidden; height:30px; background:#f4f4f4; padding:0 10px; } .txtMarquee-top .hd .prev,.txtMarquee-top .hd .next{ display:block; width:9px; height:5px; float:right; margin-right:5px; margin-top:10px; overflow:hidden; cursor:pointer; background:url("../images/arrow.png") 0 -100px no-repeat;} .txtMarquee-top .hd .next{ background-position:0 -140px; } .txtMarquee-top .hd .prevStop{ background-position:-60px -100px; } .txtMarquee-top .hd .nextStop{ background-position:-60px -140px; } .txtMarquee-top .bd{ padding:15px; } .txtMarquee-top .infoList li{ height:24px; line-height:24px; } .txtMarquee-top .infoList li .date{ float:right; color:#999; }</style> <div class="txtMarquee-top"> <div class="bd"> <div class="tempWrap" id="tempWrap" style="overflow:hidden; position:relative; height:120px" > <ul class="infoList" id="infoList" style="position: relative; padding: 0px; margin: 0px; top: 0px;" > <li class="clone" style="height: 24px;"><span class="date">2011-11-11</span><a href=http://www.mamicode.com/"#" target="_blank">那些无法理解的荒唐事</a></li> <li style="height: 24px;"><span class="date">2011-11-11</span><a href=http://www.mamicode.com/"#" target="_blank">中国打破了世界软件巨头规则</a></li> <li style="height: 24px;"><span class="date">2011-11-11</span><a href=http://www.mamicode.com/"#" target="_blank">口语：会说中文就能说英语！</a></li> <li style="height: 24px;"><span class="date">2011-11-11</span><a href=http://www.mamicode.com/"#" target="_blank">农场摘菜不如在线学外语好玩</a></li> <li style="height: 24px;"><span class="date">2011-11-11</span><a href=http://www.mamicode.com/"#" target="_blank">数理化老师竟也看学习资料？</a></li> <li style="height: 24px;"><span class="date">2011-11-11</span><a href=http://www.mamicode.com/"#" target="_blank">学英语送ipad2,45天突破听说</a></li> <li style="height: 24px;"><span class="date">2011-11-11</span><a href=http://www.mamicode.com/"#" target="_blank">学外语，上北外！</a></li> <li style="height: 24px;"><span class="date">2011-11-11</span><a href=http://www.mamicode.com/"#" target="_blank">那些无法理解的荒唐事</a></li> <li class="clone" style="height: 24px;"><span class="date">2011-11-11</span><a href=http://www.mamicode.com/"#" target="_blank">中国打破了世界软件巨头规则</a></li> <li class="clone" style="height: 24px;"><span class="date">2011-11-11</span><a href=http://www.mamicode.com/"#" target="_blank">口语：会说中文就能说英语！</a></li> <li class="clone" style="height: 24px;"><span class="date">2011-11-11</span><a href=http://www.mamicode.com/"#" target="_blank">农场摘菜不如在线学外语好玩</a></li> <li class="clone" style="height: 24px;"><span class="date">2011-11-11</span><a href=http://www.mamicode.com/"#" target="_blank">数理化老师竟也看学习资料？</a></li> <li class="clone" style="height: 24px;"><span class="date">2011-11-11</span><a href=http://www.mamicode.com/"#" target="_blank">学英语送ipad2,45天突破听说</a></li> </ul> </div> </div> </div> <script type="text/javascript"> window.onload=function(){ var InfoList = document.getElementById(‘infoList‘); var li = document.getElementsByTagName(‘li‘); var TempWrap = document.getElementById(‘tempWrap‘); var HTempWrap = TempWrap.offsetHeight; var HInfoList = InfoList.offsetHeight; var index = 0; var Hli = li[0].offsetHeight; var Lli = li.length; InfoList.style.height = Hli*Lli; var info = (HInfoList-HTempWrap)*-1; Timeint = setInterval(setTime,500) TempWrap.onmouseover = function(){ clearInterval(Timeint); }; TempWrap.onmouseout = function(){ Timeint = setInterval(setTime,500); } function setTime(){ index --; if(index <= info){ index = -1; return false; }else{ index = index+-3; InfoList.style.top = index+‘px‘; } } } </script> </body></html>
效果图：
javascript 向上滚动
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。