jquery实现简单的自动滚动

最新推荐文章于 2022-03-31 16:51:53 发布

最新推荐文章于 2022-03-31 16:51:53 发布 · 1.4k 阅读

文章标签：

#jQuery #CSS #JavaScript #HTML #ViewUI

css + jquery 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一种使用jQuery实现的平滑信息滚动效果的方法。通过设置定时器和鼠标悬停事件来控制列表项的自动向下移动，当列表项移动到特定位置时，会重新定位到顶部开始新一轮滚动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本来想模仿新浪微薄那种实时更新效果那，但没有滑动的效果，看着有些生硬。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>
 <HEAD>
  <TITLE>信息滚动显示 </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <script type="text/javascript" src="jquery.js"></script>
  <style tyle="text/css">
 #content {margin:0 auto;width:400px;height:600px;}
  ul{list-style:none;height:300px;width:110px;overflow:hidden;border:2px solid #858585;position:relative;}
  ul li{width:100px;height:40px;line-height:40px;border-bottom:1px dashed #858585;margin:5px 0px;text-align:center;position:absolute;border:1px solid red;}
  </style>
<script type="text/javascript">

//自动调用
$(document).ready
(
function(){//设置定时器
	var blb_bgtime = setInterval("blb_automove()",3000);

	//鼠标移入移除事件
$("ul").hover(
  function () {
	//清除定时器
		clearInterval(blb_bgtime);
    
  },
  function () {
	
     blb_bgtime = setInterval("blb_automove()",3000);
  }
);
	}
);

//逐步移动
function blb_automove()
{

	$("ul>li").each(
		function()
		{
		//alert ($(this).css('top'));
		var oldtop = $(this).css('top');
		var pp = /px/g;
		var newtop =Number(oldtop.replace(pp,""))+40;
		if ( newtop > 560 )
		{
			 
			$(this).css("top","0px");
		}
		else
		{

			$(this).css("top",newtop+"px");
		}
//			$(this).css({top:""});
		}
	);
}


</script>
 
 </HEAD>

 <BODY>
 <input type="button" value="click" />
	<div id='content'>
		<ul>
			<li class="item" style="top:0px;">1aaaaa</li>
			<li class="item" style="top:40px;">2bbbbbbbbb</li>
			<li class="item" style="top:80px;">3ccccccccc</li>
			<li class="item" style="top:120px;">4dddddddd</li>
			<li class="item" style="top:160px;">5eeeeeeee</li>
			<li class="item" style="top:200px;">6ffffffff</li>
			<li class="item" style="top:240px;">7ggggggggg</li>
			<li class="item" style="top:280px;">8hhhhhhhhhh</li>
			<li class="item" style="top:320px;">9jjjjjjjjjjj</li>
			<li class="item" style="top:360px;">10kkkkkkkkkkk</li>
			<li class="item" style="top:400px;">11oooooooooo</li>
			<li class="item" style="top:440px;">12pppppppppp</li>
			<li class="item" style="top:480px;">13kkkkkkkkk</li>
			<li class="item" style="top:520px;">14mmmmmmmmmm</li>
			<li class="item" style="top:560px;">15nnnnnnnnnn</li>
		</ul>
	</div>
 </BODY>
</HTML>