小辉网络社区致力于优质软件,活动线报,游戏辅助,绿色工具等资源共享,好货不私藏!

js实现公告栏效果间歇性滚动展示效果

小辉工作室 建站知识


使用js操作ul的scrollTop并配合setTimeout和setInterval实现循环间歇滚动,感兴趣的小伙伴们可以参考一下!
<!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=utf-8" />
<title>无缝滚动</title>
</head>
<script src="http://www.lxh5068.com/tool/ad/js/jquery-1.12.4.js" type="text/javascript"></script>
<style type="text/css">
*{margin:0;
padding:0;
border:0;
}
body{
margin:0 auto;
}
#container{
    width:300px;
    position:relative;
    top:50px;
    }
#title{
    width:100%;
    height:50px;
    text-align:center;
    line-height:50px;
    font-size:1.3em;
    background-color:#0FF;
    }
#scrollBox{
width:300px;
height:144px;
overflow:hidden;
    }
#scrollBox ul{
    height:144px;
    width:300px;
    }
#scrollBox ul li{
    height:24px;
    width:100%;
    text-align:left;
    font-size:24px;
    line-height:24px;
    }
#scrollBox ul li a{
    text-decoration:none;
    color:#f60;
    }
#scrollBox ul li a:hover{
        color:#000;
        font-size:smaller;
}
</style>
<body>
<div id="container">
<div id="title"><a href="http://bbs.lxh5068.com/">更多</a></div>
<div id="scrollBox">
<ul>
<li><a href="#">1:C语言学习</a></li>
<li><a href="#">2:html学习</a></li>
<li><a href="#">3:css学习</a></li>
<li><a href="#">4:javascript学习</a></li>
<li><a href="#">5:jquery学习</a></li>
<li><a href="#">6:htmll5和css3学习</a></li>
</ul>
</div>
<div>
<script type="text/javascript">
//window.onload=function(){
    //获取滚动部分
        var area=document.getElementById("scrollBox");
        //设置全局定时器
        var timer=null;
        //定义延迟
        var delay=2000;
        //获取高度
        var oLiHeight=$("#scrollBox li").height();
        //速度
        var speed=50;
        area.scrollTop=0;
area.innerHTML+=area.innerHTML;
function startScroll(){//开始运动
     timer=setInterval("scrollUp()",speed);
     area.scrollTop++;
    }
function scrollUp(){//循环运动
    if(area.scrollTop%oLiHeight==0){
        clearInterval(timer)
        setTimeout(startScroll,delay);
        }else{
            area.scrollTop++;
             if(area.scrollTop >= area.scrollHeight/2){
                 area.scrollTop =0;
                 }
            }
    }
    //页面加载两秒后运动
     setTimeout(startScroll,delay)
    //鼠标事件
    $("#scrollBox").mouseover(function(){clearInterval(timer)});
    $("#scrollBox").mouseout(function(){timer=setInterval('scrollUp()',speed)});
</script>
</body>
</html>

温馨提示:如有转载或引用以上内容请将本文链接作为出处标注!百度已收录

免责声明:本站提供的一切软件、教程和内容信息仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑或手机中彻底删除上述内容。如果您喜欢该程序,请支持正版,购买注册,得到更好的正版服务。侵删请致信E-mail:431228450@qq.com

标签 暂无标签
资源分享
评论列表