jQuery实现公告文字左右滚动的实例代码
代码如下:
<!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>jquery公告文字左右滚动效果-www.jb51.net</title>
<style type="text/css">
#scrolltext {
width: 400px;
margin-right: auto;
margin-left: auto;
}
</style>
</head>
<script type="text/javascript" src="/source/js/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
var scrolltime;
function scrollautoplay(contid,scrolldir,showwidth,textwidth,steper){
var posinit,currpos;
with($('#'+contid)){
currpos = parseint(css('margin-left'));
if(scrolldir=='left'){
if(currpos<0 && math.abs(currpos)>textwidth){
css('margin-left',showwidth);
}
else{
css('margin-left',currpos-steper);
}
}
else{
if(currpos>showwidth){
css('margin-left',(0-textwidth));
}
else{
css('margin-left',currpos-steper);
}
}
}
}
//--------------------------------------------左右滚动效果----------------------------------------------
/*
appendtoobj： 显示位置（目标对象）
showheight： 显示高度
showwidth： 显示宽度
showtext： 显示信息
scrolldirection： 滚动方向（值：left、right）
steper： 每次移动的间距（单位：px；数值越小，滚动越流畅，建议设置为1px）
interval: 每次执行运动的时间间隔（单位：毫秒；数值越小，运动越快）
*/
function scrolltext(appendtoobj,showheight,showwidth,showtext,scrolldirection,steper,interval){
var textwidth,posinit,possteper;
with(appendtoobj){
html('');
css('overflow','hidden');
css('height',showheight+'px');
css('line-height',showheight+'px');
css('width',showwidth);
}
if (scrolldirection=='left'){
posinit = showwidth;
possteper = steper;
}
else{
possteper = 0 - steper;
}
if(steper<1 || steper>showwidth){steper = 1}//每次移动间距超出限制(单位:px)
if(interval<1){interval = 10}//每次移动的时间间隔（单位：毫秒）
var container = $('<p></p>');
var containerid = 'containertemp';
var i = 0;
while($('#'+containerid).length>0){
containerid = containerid + '_' + i;
i++;
}
with(container){
attr('id',containerid);
css('float','left');
css('cursor','default');
appendto(appendtoobj);
html(showtext);
textwidth = width();
if(isnan(posinit)){posinit = 0 - textwidth;}
css('margin-left',posinit);
mouver(function(){
clearinterval(scrolltime);
});
mouseout(function(){
scrolltime = setinterval("scrollautoplay('"+containerid+"','"+scrolldirection+"',"+showwidth+','+textwidth+","+possteper+")",interval);
});
}
scrolltime = setinterval("scrollautoplay('"+containerid+"','"+scrolldirection+"',"+showwidth+','+textwidth+","+possteper+")",interval);
}
</script>
<script type="text/javascript">
$(document).ready(function(e) {
scrolltext($('#scrolltext'),23,400,'欢迎光临脚本之家！','left',1,20);//滚动字幕
});
</script>
<body>
<p id="scrolltext"></p>
<script type="text/javascript">
if(document.getelementbyid('googlead')!=null){
document.getelementbyid('googlead').innerhtml = '<p class="searchengine_ad1">' + document.getelementbyid('googleadcode').innerhtml + '</p>';
}
</script>
</body>
</html>