JS不间断横/纵向滚动

横向: 需内容宽度大于容器宽度才能完整滚动


<style> 
.scroll_div {width:890px; height:50px;margin:0 auto; overflow: hidden; white-space: nowrap; background:#379BE9;} 
#scroll_begin, #scroll_end, #scroll_begin ul, #scroll_end ul, #scroll_begin ul li, #scroll_end ul li{display:inline;}/* 设置ul和li横排 */ 
a {
text-decoration:none;
outline:none;
color:#fff;
font-size: 13px;
line-height: 20px;
}
a:hover {
color:#A7D3F8;
font-size: 13px;
line-height: 20px;
}
</style>
<script language="javascript"> 
function ScrollImgLeft(){ 
var speed=30
var scroll_begin = document.getElementById("scroll_begin"); 
var scroll_end = document.getElementById("scroll_end"); 
var scroll_div = document.getElementById("scroll_div"); 
scroll_end.innerHTML=scroll_begin.innerHTML;
function Marquee(){ 
if(scroll_end.offsetWidth-scroll_div.scrollLeft<=0) 
//scroll_div.scrollLeft-=scroll_begin.offsetWidth;
scroll_div.scrollLeft = 0;
else
scroll_div.scrollLeft++;
} 
var MyMar=setInterval(Marquee,speed);
scroll_div.οnmοuseοver=function() {clearInterval(MyMar)} 
scroll_div.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)} 
} 
</script>
<div style="text-align:center">
<div class="sqBorder">

<div id="scroll_div" class="scroll_div" style="overflow:scroll">
<div id="scroll_begin" style="background:#41b34d">
<ul>
<li><a href="http://www.sn.xinhuanet.com/news1/2016-03/22/c_1118404593.htm" target="_blank">方光玉:用道德道德道德正能量立心于天地之间</a></li>
 
<li><a href="http://chat.xuan.news.cn/zt/hjns.html" target="_blank">这些年,姑娘们换过的韩剧“老公”</a></li>  
<li><a href="http://www.sn.xinhuanet.com/original/2016-02/05/c_1118004782.htm" target="_blank">春运人多,请握运人多,请握紧孩子的手</a></li>
<li><a href="http://www.sn.xinhuanet.com/news1/2016-03/22/c_1118404593.htm" target="_blank">WWWWS WWB OWWWWW f地之间</a></li>
 
</ul>
</div>
<div id="scroll_end" style="background:#cccccc"></div>
</div>

</div>
<script type="text/javascript">ScrollImgLeft();</script>
</div>
<!--//向左滚动代码结束-->



纵向:


<div id="marquees" style="width:228px; height:318px;">
<table width="228" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td><a href="http://sports.sina.com.cn/z/2013K-1WorldGP/?qq-pf-to=pcqq.c2c" target=_blank><img src="/upf/km/pic/2013-08-02/012240-319-7253.gif" border=0 width=210 height=60 class=linkPic /></a><a href="http://sports.qq.com/others/k-1.htm" target=_blank><img src="/upf/km/pic/2015-06-16/132008-726-1468.jpg" border=0 width=210 height=60 class=linkPic /></a><a href="http://sports.sohu.com/s2012/8055/s360353355/index.shtml" target=_blank><img src="/upf/km/pic/2013-09-11/004110-728-6191.jpg" border=0 width=210 height=60 class=linkPic /></a></td></tr></table>
</div>
<script language="JavaScript">
marqueesHeight=318;
stopscroll=false;

with(marquees){
style.width=228;
style.height=marqueesHeight;
style.overflowX="visible";
style.overflowY="hidden";
noWrap=true;
οnmοuseοver=new Function("stopscroll=true");
οnmοuseοut=new Function("stopscroll=false");
}
document.write('<div id="templayer" style="position:relative;z-index:1;visibility:hidden"></div>');

preTop=0; currentTop=0;

function init(){
templayer.innerHTML="";
while(templayer.offsetHeight<marqueesHeight){
    templayer.innerHTML+=marquees.innerHTML;
}
marquees.innerHTML=templayer.innerHTML+templayer.innerHTML;
setInterval("scrollUp()",30);
}
document.body.οnlοad=init;

function scrollUp(){
if(stopscroll==true) return;
preTop=marquees.scrollTop;
marquees.scrollTop+=1;
if(preTop==marquees.scrollTop){
    marquees.scrollTop=templayer.offsetHeight-marqueesHeight;
    marquees.scrollTop+=1;
}
}
</script>


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值