jQuery实现公告⽂字左右滚动
jQuery实现公告⽂字左右滚动的代码。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jQuery公告⽂字左右滚动效果-www.jbxue</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;
html滚动效果代码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 = $('<div></div>');
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);
mouseover(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>
<div id="scrollText"></div>
<script type="text/javascript">
ElementById('GoogleAD')!=null){
</script>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。