跑马灯效果

最新推荐文章于 2024-01-17 17:20:20 发布

yddongzs

最新推荐文章于 2024-01-17 17:20:20 发布

阅读量596

点赞数

分类专栏： c# JQUERY

本文链接：https://blog.csdn.net/yddongzs/article/details/11972845

版权

c# 同时被 2 个专栏收录

52 篇文章 0 订阅

订阅专栏

JQUERY

8 篇文章 0 订阅

订阅专栏

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="css.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>

</head>
<div id="siteBulletin">
<ul id="runtopic">
<li id="12">人员：姚test 定位时间:adffff</li>
</ul>
</div>
<input type="button" οnclick="aaa()" value="点击切换" />
<div id="Div1">
<ul id="Ul1">
<li id="Li1">人员：test 定位时间:adffff</li>
<li id="Li2">人员：姚test 1 定位时间:adffff</li>
<li id="Li3">人员：姚test 32 定位时间:adffff</li>
<li id="Li4">人员：姚test 4 定位时间:adffff</li>
<li id="Li5">人员：姚test 5 定位时间:adffff</li>
</ul>
</div>
<script type="text/javascript">
function aaa() {
//克隆.追加到最后.隐藏
$("#12").animate({ opacity: 'hide' }, 1000, function () {
$(this).remove();
$("<li id='12' style='display:none'>开始替换跑马灯</li>").appendTo($("#runtopic"));
$("#12").removeAttr('style').animate({ opacity: 'show' }, 1000);

})

}
$(document).ready(function () {
//播放速度
var speed = 1000;
//控制范围，符合jQuery路径即可
var block = '#Div1 li';
//需要显示的内容条目数
var eq = 2;
var h = 0;

if ($(block).length > eq) {//如果内容数目大于需要滚动的数目，开始滚动！
//隐藏除了第一个的其它所有节点
$(block).slice(eq).css('display', 'none');
//播放开始
h = setInterval('scrollContent("' + block + '",' + eq + ',1)', speed);
$('#siteBulletin').mouseout(function () {
h = setInterval('scrollContent("' + block + '",' + eq + ',1)', speed);
});
$('#siteBulletin').mouseover(function () {
clearInterval(h);
});
}

});

function scrollContent(block, eq, type) {
//获取第节点
var firstNode = $(block);
//动画效果
switch (type) {
case 1:
animation_out = { height: 'hide' };
animation_in = { height: 'show' };
break;
case 2:
animation_out = { opacity: 'hide' };
animation_in = { opacity: 'show' };
break;
case 3:
animation_out = { height: 'hide', opacity: 'hide' };
animation_in = { height: 'show', opacity: 'show' };
break;
default: '';
}
//开始动画
firstNode.eq(0).animate(animation_out, 1000, function () {//隐藏

//克隆.追加到最后.隐藏
$(this).clone().appendTo($(this).parent()).css('display', 'none');
//显示第二个节点内容
firstNode.eq(eq).removeAttr('style').animate(animation_in, 1000);
//删除第一个节点内容
$(this).remove();
});
}
</script>
</html>