使用jquery及javascript实现文本滚动效果 博客分类： web开发学习笔记 JavaScriptjQuery
程序员文章站
2024-03-20 08:53:58
...
使用jquery及javascript实现文本滚动效果
<html>
<head>
<style type="text/css">
.body{
font-family: Arial, Helvetica, sans-serif, "宋体";
font-size: 12px;
line-height: 1.7em;
background-color: #FFFFFF;
background-image: url(../../image/bg.gif);
background-repeat: repeat-x;
background-position: top;
margin-top: 0px;
margin-left: 0px;
}
.scrollDiv {border: 1px #fff solid;width: 200px; height:192px;overflow: hidden;}
.scrollDiv ul{height: 25px;line-height: 25px;margin: 0;padding: 0;}
.scrollDiv li{line-height: 25px; padding-left: 5px; overflow: hidden;}
.table {background-color: #dae8f0;border: 1px solid #99ccff;}
.table_content {background-color: #FFFFFF;border: 1px solid #b8c4d8;}
</style>
</head>
<body class="body">
<table width="100%" border="0" cellpadding="3" cellspacing="2" class="table">
<tr>
<td>
<strong>信息列表</strong>
</td>
</tr>
<tr>
<td class="table_content">
<div id="scrollDiv" class="scrollDiv">
</div>
</td>
</tr>
</table>
<script language=JavaScript>
function refreshData_gs()
{
var ScrollText = "";
ScrollText += "<ul>";
ScrollText+="<li style=\"word-break: break-all; word-wrap:break-word;\" ><label>1.aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa！</label></li>";
ScrollText+="<li style=\"word-break: break-all; word-wrap:break-word;\" ><label>2.bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb！</label></li>";
ScrollText+="<li style=\"word-break: break-all; word-wrap:break-word;\" ><label>3.cccccccccccccccccccccccccccccccccccccccccccccccccc！</label></li>";
ScrollText+="<li style=\"word-break: break-all; word-wrap:break-word;\" ><label>4.ddddddddddddddddddddddddddd！</label></li>";
ScrollText+="<li style=\"word-break: break-all; word-wrap:break-word;\" ><label>5.eeeeeeeee！</label></li>";
ScrollText+="<li style=\"word-break: break-all; word-wrap:break-word;\" ><label>6.ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff！</label></li>";
ScrollText+="<li style=\"word-break: break-all; word-wrap:break-word;\" ><label>7.ggggggggggggggggggggggggggggggggg</li>";
ScrollText+="<li style=\"word-break: break-all; word-wrap:break-word;\" ><label>8.hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh！</label></li>";
ScrollText += "</ul>";
document.getElementById("scrollDiv").innerHTML=ScrollText;
}
function getData_GS()
{
refreshData_gs();
}
getData_GS();
</script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type='text/javascript'>
function AutoScroll(obj) {
var lineH=$(obj).find("li:first").height();
var upHeight=0-(lineH);
var ulHeight = $(obj).find("ul:first").height();
var lines = $(obj).find("ul li").size();
//alert("li:first height :" + lineH);
//alert("ul:first height :" + ulHeight);
var scrollLines = lineH;
var scrollH = $(obj).height();
var scrollLis = 1;
var currLiHeight;
//alert("scrollH :" + scrollH);
//alert("scrollLines :" + scrollLines);
for(var i=1;i<lines;i++){
var currLi = $(obj).find("ul li:eq("+i+")");
currLiHeight = currLi.height();
if((currLiHeight + scrollLines) <= scrollH){
//alert("i :" + i + "\ncurrLiHeight :" + currLiHeight);
scrollLines += currLiHeight;
upHeight -= currLiHeight;
scrollLis += 1;
}else{
break;
}
}
//alert("scrollLines :" + scrollLines + "\nupHeight :" + upHeight + "\nscrollLis :" + scrollLis);
$(obj).find("ul:first").animate(
{marginTop:upHeight},
500,
function () {
for(i = 1; i <= scrollLis; i++){
$(this).css({ marginTop: "0px" }).find("li:first").appendTo(this);
}
}
);
}
var s = true;
var t = 0;
function startli() {
if (s) t = setInterval('AutoScroll(".scrollDiv")', 3000);
}
$(document).ready(function () {
startli();
$(".scrollDiv").hover(function () {
clearInterval(t);
var s = false;
}, function () {
s= true;
startli();
});
})
</script>
</body>
</html>