js无缝滚动(SIMPLE)版

最新推荐文章于 2024-08-09 08:26:24 发布

CQ_Amin

最新推荐文章于 2024-08-09 08:26:24 发布

阅读量310

点赞数

分类专栏： Javascript

本文链接：https://blog.csdn.net/CQ_Amin/article/details/8568189

版权

Javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!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>文字列表无缝向上滚动JavaScript代码</title>
<style>
*{margin:0px;padding:0px;border:0px;}
body{font-size:12px}
#demo1{
height:auto;
text-align:left;
}
ul li{
list-style-type:none;
height:22px;
background:url() no-repeat left center;
text-align:left;
text-indent:15px;
}
.a-hover{
position: relative;
float: left;
}
.a-hover a{
color: #fff;
}

</style>
</head>
<body>
<div id="demo" style="overflow:hidden;height:80px;width:280px;padding:10px;border:10px;background: yellow;">
<ul id="demo1">
<li><a href="/soft/4085.shtml" target="_blank">XP Menu 仿QQ菜单管理器左侧菜单</a></li>
</ul>
</div>
<div id="demo11" style="overflow:hidden;height:80px;width:280px;padding:10px;border:10px;">
<ul id="demo22">
<li><a href="/soft/4085.shtml" target="_blank">XP Menu 仿QQ菜单管理器左侧菜单</a></li>
</ul>
</div>
<div style="width:300px;height:20px;background: blue;color:#fff;overflow: hidden;">
<div id="marleft" style="width:800px">
<ul id="marleft-1" class="a-hover">
<li><a href="/soft/4085.shtml" target="_blank">XP Menu 仿QQ菜单管理器左侧菜单</a></li>
</ul>
</div>
</div>
<div style="width:300px;height:20px;background: blue;color:#fff;overflow: hidden;">
<div id="marright" style="width:800px;">
<ul id="marright-1" class="a-hover">
<li><a href="/soft/4085.shtml" target="_blank">XP Menu 仿QQ菜单管理器左侧菜单</a></li>
</ul>
</div>
</div>

<script type="text/javascript">
(function(win){
var doc = win.document,r_trim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,r_blank=/[\s\uFEFF\xA0]/g,s_id = new Date().getTime(),_marquee_win = {};
function Marquee(a,b,c,d){
var obj = null;
a = $(a);
b = $(b);
d ? null : d = 40;
if(a && b){
var t1 = 1,m={};
if("top" == c || "bottom" == c){
eval('_marquee_win.$'+a.id+'=m');
//外面的高度大于内容高度
if(a.offsetHeight > b.offsetHeight){
t1 = parseInt(a.offsetHeight / b.offsetHeight);
a.offsetHeight % b.offsetHeight != 0 ? t1 ++ : null;
}
}else if("left" == c || "right" == c){
eval('_marquee_win.$'+a.id+'=m');
//外面的宽度大于内容宽度
if(a.parentNode.offsetWidth > b.offsetWidth){
t1 = parseInt(a.parentNode.offsetWidth / b.offsetWidth);
a.parentNode.offsetWidth % b.offsetWidth != 0 ? t1 ++ : null;
}
}
m.count = t1;
m.a = a;
m.b = b;
for(;t1>0;t1--){
obj = b.cloneNode();
//兼容IE和谷歌
if(obj.innerHTML==""){
obj.innerHTML = b.innerHTML;
}
obj.id = b.id+'_'+(s_id++);
a.appendChild(obj);
}

m.id = setInterval(function(){scroll(a.id,c);},d);//计时器ID
a.$direct = c;
a.οnmοuseοver=function() {
var m = null;
eval('m = _marquee_win.$'+a.id);
clearInterval(m.id)
};
a.οnmοuseοut=function() {
//console.log('dir',a.$direct);
var m = null;
eval('m = _marquee_win.$'+a.id);
m.id = setInterval(function(){scroll(a.id)},d);
};
}
}

function scroll(a,b){
var m = null;
b ? null : b = $(a).$direct;
eval('m = _marquee_win.$'+a);
if("top" == b){//向上滚动,从视觉上我测试需要相差1px才能做到平滑滚动
if(m.b.offsetHeight - m.a.scrollTop <= 1) {
m.a.scrollTop = 0;
} else {
m.a.scrollTop++ ;
}
}else if("bottom" == b){//向下滚动
//console.log('m.a.scrollTop - m.b.offsetHeight',m.a.scrollTop - m.b.offsetHeight);
if(m.a.scrollTop <= 1){
m.a.scrollTop = m.b.offsetHeight;
}else{
m.a.scrollTop--;
}
}else if("left" == b){//向左滚动
if(m.b.offsetWidth - m.a.parentNode.scrollLeft <= 1) {
m.a.parentNode.scrollLeft = 0;
} else {
m.a.parentNode.scrollLeft++;
}
}else if("right" == b){//向右滚动
if(m.a.parentNode.scrollLeft <= 1) {
m.a.parentNode.scrollLeft = m.b.offsetWidth;
} else {
m.a.parentNode.scrollLeft--;
}
}
}

function $(a){
return doc.getElementById(trim(a));
}
//去掉左右空格
function trim(a){
return a.replace(r_trim,"");
}
//去掉所有空白字符
function trimAll(a){
return a.replace(r_blank,"");
}
//_marquee_win.scroll = scroll;
//win._marquee_win = _marquee_win;
win.Marquee = Marquee;
})(window);
Marquee('demo','demo1','top');
Marquee('demo11','demo22','bottom');
Marquee('marleft','marleft-1','left');
Marquee('marright','marright-1','right');
</script>
</body>
</html>

CQ_Amin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js无缝滚动(SIMPLE)版

文字列表无缝向上滚动JavaScript代码*{margin:0px;padding:0px;border:0px;}body{font-size:12px}#demo1{height:auto;text-align:left;}ul li{list-style-type:none;height:22px;background:url() no-rep
复制链接

扫一扫