JQuery 公告滚动(跑马灯特效)

最新推荐文章于 2024-05-07 09:46:03 发布

面条请不要欺负汉堡

最新推荐文章于 2024-05-07 09:46:03 发布

阅读量2.3k

点赞数

分类专栏： jquery 文章标签：公告的滚动间歇性向上无缝滚动跑马灯特效

本文链接：https://blog.csdn.net/gao_xu_520/article/details/75051311

版权

jquery 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

一.公告向左滚动

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
html,body,div,ul,li{
	margin: 0;
	padding: 0;
}
a{text-decoration: none;}
.noticelist{
    width: 730px;
    white-space: nowrap;
    overflow: hidden;
    background: #ccc;
    margin: 20px auto;
    padding: 0px 10px;
}
.noticelist ul{
    display: inline-block;
    *display:inline; 
    _zoom:1;
    *zoom:1;
}
.noticelist li{
    margin-right: 25px;
    display: inline-block;
    line-height: 60px;
    *display:inline; 
    _zoom:1;
    *zoom:1;
}
.noticelist>ul>li>a{
    color: #fff;
}
.noticelist>ul>li:hover a{
    color: #f00;
}
.noticelist>ul>li>a>span{
    margin-left: 20px;
}
</style>
</head>
<body>
<div class="noticelist" id="noticelist">
	<ul id="noticetext">
		<li><a href="info-info.php">这里是公告的内容1  <span>[2016.01.01] </span> </a></li>
		<li><a href="info-info.php">这里是公告的内容2  <span>[2016.01.01] </span> </a></li>
		<li><a href="info-info.php">这里是公告的内容3  <span>[2016.01.01] </span> </a></li>
		<li><a href="info-info.php">这里是公告的内容4  <span>[2016.01.01] </span> </a></li>
	</ul>
</div>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		var area = document.getElementById('noticelist'),
			len=$(area).find('li').length,
	 	con = document.getElementById('noticetext'),
		cju = document.createElement("ul");//创建一个ul来存放内容
		if(len>=4){//内容大于4个菜滚动
			area.appendChild(cju);//创建的ul放在con1的后面
			cju.innerHTML = con.innerHTML;//把内容1复制给内容2 
			var myScroll =setInterval(function(){
				if(cju.offsetWidth-area.scrollLeft<=0)//offsetWidth 是对象的可见宽度
					area.scrollLeft-=con.offsetWidth//scrollWidth 是对象的实际内容的宽，不包边线宽度
				else{
					area.scrollLeft++
				}
			},50);
			area.onmouseover = function(){
				clearInterval(myScroll);
			}
			area.onmouseout = function(){
				myScroll =setInterval(function(){
					if(cju.offsetWidth-area.scrollLeft<=0)//offsetWidth 是对象的可见宽度
				area.scrollLeft-=con.offsetWidth//scrollWidth 是对象的实际内容的宽，不包边线宽度
					else{
						area.scrollLeft++
					}
				},50);
			}
		}
	
	});
</script>
</body>
</html>

二.向上滚动

1.js方式

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
html,body,div,ul,li{
	margin: 0;
	padding: 0;
}
a{text-decoration: none;}
.noticelist{
    width: 730px;
    white-space: nowrap;
    overflow: hidden;
    background: #ccc;
    margin: 20px auto;
    padding: 0px 10px;
    height:200px;
}
.noticelist ul{
	zoom:1;
	*zoom:1;
}
.noticelist ul:after{
 	content: " ";
    height: 0;
    visibility: hidden;
    display: block;
    clear: both;
}
.noticelist li{
	float: left;
	width: 100%;
    line-height: 60px;
}
.noticelist>ul>li>a{
    color: #fff;
}
.noticelist>ul>li:hover a{
    color: #f00;
}
.noticelist>ul>li>a>span{
    margin-left: 20px;
}
</style>
</head>
<body>
<div class="noticelist" id="noticelist">
	<ul id="noticetext">
		<li><a href="info-info.php">这里是公告的内容1  <span>[2016.01.01] </span> </a></li>
		<li><a href="info-info.php">这里是公告的内容2  <span>[2016.01.01] </span> </a></li>
		<li><a href="info-info.php">这里是公告的内容3  <span>[2016.01.01] </span> </a></li>
		<li><a href="info-info.php">这里是公告的内容4  <span>[2016.01.01] </span> </a></li>
	</ul>
</div>
<script type="text/javascript">
	var area = document.getElementById('noticelist');
	var con1 = document.getElementById('noticetext');
	var con2 = document.createElement("ul");//创建一个ul来存放内容
	con2.setAttribute("class", "cjul");//给新的元素ul添加class
	area.appendChild(con2);//创建的ul放在con1的后面	
	var speed = 50;
	area.scrollTop = 0;
	con2.innerHTML = con1.innerHTML;//把内容1复制给内容2
	var myScroll = setInterval("scrollUp()",speed);
	area.onmouseover = function(){
		clearInterval(myScroll);
	}
	area.onmouseout = function(){
		myScroll = setInterval("scrollUp()",speed);
	}

	function scrollUp(){
		if(area.scrollTop >= con1.scrollHeight) {
			area.scrollTop = 0;
		}else{
			area.scrollTop ++; 
		} 
	}
</script>
</body>
</html>

2.有间歇性的滚动（滚动一个，然后暂停下，再继续滚）

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
html,body,div,ul,li{
	margin: 0;
	padding: 0;
}
a{text-decoration: none;}
.noticelist{
    width: 730px;
    white-space: nowrap;
    overflow: hidden;
    background: #ccc;
    margin: 20px auto;
    padding: 0px 10px;
    height:200px;
}
.noticelist ul{
	zoom:1;
	*zoom:1;
}
.noticelist ul:after{
 	content: " ";
    height: 0;
    visibility: hidden;
    display: block;
    clear: both;
}
.noticelist li{
	float: left;
	width: 100%;
    line-height: 60px;
}
.noticelist>ul>li>a{
    color: #fff;
}
.noticelist>ul>li:hover a{
    color: #f00;
}
.noticelist>ul>li>a>span{
    margin-left: 20px;
}
</style>
</head>
<body>
<div class="noticelist" id="noticelist">
	<ul id="noticetext">
		<li><a href="info-info.php">这里是公告的内容1  <span>[2016.01.01] </span> </a></li>
		<li><a href="info-info.php">这里是公告的内容2  <span>[2016.01.01] </span> </a></li>
		<li><a href="info-info.php">这里是公告的内容3  <span>[2016.01.01] </span> </a></li>
		<li><a href="info-info.php">这里是公告的内容4  <span>[2016.01.01] </span> </a></li>
	</ul>
</div>
<script type="text/javascript">
	var area = document.getElementById('noticelist');
	var iliHeight = 60;//单行滚动的高度
	var speed = 50;//滚动的速度
	var time;
	var delay= 2000;
	area.scrollTop=0;
	area.innerHTML+=area.innerHTML;//克隆一份一样的内容
	function startScroll(){
	 	time=setInterval("scrollUp()",speed);
	 	area.scrollTop++;
	}
	function scrollUp(){
	if(area.scrollTop % iliHeight==0){
		clearInterval(time);
		setTimeout(startScroll,delay);
	}else{
			area.scrollTop++;
			if(area.scrollTop >= area.scrollHeight/2){
				area.scrollTop =0;
			}
	}
	}
	setTimeout(startScroll,delay)
</script>
</body>
</html>

3.JQuery方式

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
html,body,div,ul,li{
	margin: 0;
	padding: 0;
}
a{text-decoration: none;}
.noticelist{
    width: 730px;
    white-space: nowrap;
    overflow: hidden;
    background: #ccc;
    margin: 20px auto;
    padding: 0px 10px;
    height:60px;
}
.noticelist ul{
	zoom:1;
	*zoom:1;
}
.noticelist ul:after{
 	content: " ";
    height: 0;
    visibility: hidden;
    display: block;
    clear: both;
}
.noticelist li{
	float: left;
	width: 100%;
    line-height: 60px;
}
.noticelist>ul>li>a{
    color: #fff;
}
.noticelist>ul>li:hover a{
    color: #f00;
}
.noticelist>ul>li>a>span{
    margin-left: 20px;
}
</style>
</head>
<body>
<div class="noticelist" id="noticelist">
	<ul id="noticetext">
		<li><a href="info-info.php">这里是公告的内容1  <span>[2016.01.01] </span> </a></li>
		<li><a href="info-info.php">这里是公告的内容2  <span>[2016.01.01] </span> </a></li>
		<li><a href="info-info.php">这里是公告的内容3  <span>[2016.01.01] </span> </a></li>
		<li><a href="info-info.php">这里是公告的内容4  <span>[2016.01.01] </span> </a></li>
	</ul>
</div>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	setInterval(gun,5000);
	function gun(){
		$('#noticetext li').first().slideUp();//向上滚动
		$('#noticetext').append('<li>'+$('#noticetext li').first().html()+'</li>');
		setTimeout(function(){
		$('#noticetext li').first().remove();
		},500);
	}
});
</script>
</body>
</html>

或是

function gun(){
var first = $('#noticetext li:first');
$('#noticetext').append($(first).clone(true));//在gga类里克隆并追加一个first 元素：
$(first).slideUp(500,function(){
first.remove();
});//移除 first
}

setTimeout(表达式,延时时间)在执行时,是在载入后延迟指定时间后,去执行一次表达式,记住,次数是一次
而setInterval(表达式,交互时间)则不一样,它从载入后,每隔指定的时间就执行一次表达式
将setTimeout包含于被执行函数中,然后在函数外再次使用setTimeout来达到定时执行的目的 .
这样,函数外的setTimeout在执行函数时再次触发setTimeout从而形成周而复始的定时效果

面条请不要欺负汉堡

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JQuery 公告滚动(跑马灯特效)

一.公告向左滚动html,body,div,ul,li{ margin: 0; padding: 0;}a{text-decoration: none;}.noticelist{ width: 730px; white-space: nowrap; overflow: hidden; background: #ccc;
复制链接

扫一扫