<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://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="#" target="_blank">那些无法理解的荒唐事</a></li>
<li style="height: 24px;"><span class="date">2011-11-11</span><a href="#" target="_blank">中国打破了世界软件巨头规则</a></li>
<li style="height: 24px;"><span class="date">2011-11-11</span><a href="#" target="_blank">口语：会说中文就能说英语！</a></li>
<li style="height: 24px;"><span class="date">2011-11-11</span><a href="#" target="_blank">农场摘菜不如在线学外语好玩</a></li>
<li style="height: 24px;"><span class="date">2011-11-11</span><a href="#" target="_blank">数理化老师竟也看学习资料？</a></li>
<li style="height: 24px;"><span class="date">2011-11-11</span><a href="#" target="_blank">学英语送ipad2,45天突破听说</a></li>
<li style="height: 24px;"><span class="date">2011-11-11</span><a href="#" target="_blank">学外语，上北外！</a></li>
<li style="height: 24px;"><span class="date">2011-11-11</span><a href="#" target="_blank">那些无法理解的荒唐事</a></li>
<li class="clone" style="height: 24px;"><span class="date">2011-11-11</span><a href="#" target="_blank">中国打破了世界软件巨头规则</a></li>
<li class="clone" style="height: 24px;"><span class="date">2011-11-11</span><a href="#" target="_blank">口语：会说中文就能说英语！</a></li>
<li class="clone" style="height: 24px;"><span class="date">2011-11-11</span><a href="#" target="_blank">农场摘菜不如在线学外语好玩</a></li>
<li class="clone" style="height: 24px;"><span class="date">2011-11-11</span><a href="#" target="_blank">数理化老师竟也看学习资料？</a></li>
<li class="clone" style="height: 24px;"><span class="date">2011-11-11</span><a href="#" 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>
效果图：
时间： 2024-08-29 23:27:38