滚动显示

最新推荐文章于 2023-12-02 22:09:37 发布

iteye_8678

最新推荐文章于 2023-12-02 22:09:37 发布

阅读量131

点赞数

分类专栏： jQuery 文章标签： jQuery CSS HTML ViewUI

jQuery 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一种使用jQuery实现的动态滚动效果，包括淡入淡出及滑动两种方式。通过对列表项的操作，如clone(), appendTo(), eq(), fadeIn() 和 fadeOut()等方法的应用，实现了流畅的动画过渡。

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

此例子也是根据人家修改的呵呵
公共的css

<style type="text/css">
ul,li{margin:0;padding:0}
#scrollDiv{width:800px;height:100px;line-height:25px;border:#ccc 1px solid;overflow:hidden}
#scrollDiv li{height:25px;padding-left:10px;}
</style>

公共的html


<div id="scrollDiv">
	<ul id="scroll-container" style="margin-top: 0px;">
    <li>1 clone()克隆匹配的DOM元素并且选中这些克隆的副.</li>
    <li>2 appendTo()把所有匹配的元素追加到另一个、指定的元素元素集合中。</li>
    <li>3 eq()减少匹配对象到一个单独得dom元素.</li>
    <li>4 fadeIn()通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数.</li>
    <li>5 fadeOut()能过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数.</li>
    <li>6 parent()取得一个包含着所有匹配元素的唯一父元素的元素集合。 可以通过一个可选的表达式进行筛选.</li>   
    <li>7 show()以优雅的动画显示所有匹配的元素，并在显示完成后可选地触发一个回调函数.</li>
    </ul>
</div>

1.淡入淡出


	jQuery(function ($) {
		//对于横向的时候 如果出现多个时候会使用
		$('#scroll-container li').each(function(index,domEl){
			if(index >=4)
				$(domEl).hide() ;
		});
		setInterval('scroll_news()',2000);
	});

    function scroll_news(){
		var $firstNode = $('#scroll-container li');                       
		$firstNode.eq(0).fadeOut('slow',function(){   
			$(this).clone().appendTo($(this).parent()).hide();
			$(this).remove();
			$firstNode.eq(4).fadeIn('slow');

		});
    }

2.滑动


	var runTime ;
	jQuery(function ($) {
		runTime = setInterval('scroll_news()',2000);
		$("#scrollDiv").mouseover(function(){ 
			clearInterval(runTime);
		}); 
		$("#scrollDiv").mouseout(function(){ 
			runTime = setInterval('scroll_news()',2000);
		}); 
	});
	function scroll_news(){    
		$("#scrollDiv").find("ul:first").animate({marginTop:"-25px"},1000,function(){
			$(this).css({marginTop:"0px"}).find("li:first").appendTo(this);
        });
    }