`

jQuery仿新浪微博图片文字列表间歇上下滚动淡进淡出滚动-20130622

eachpushwrapfindspy 
阅读更多
1、效果及功能说明
仿新浪微博图片文字列表上下淡进淡出间歇上下滚动

2、实现原理
首先要设定div内只能显示4个图片那么多出来的图片会自动隐藏然后在给图片添加一个动画的事件让他们可以滚动的播放出来上下滚动效果播放就是li标签里面的内容图片和文字把每一个li看成一个整体在滚动播放的时候进入div内的显示出来在最后离开div的时候隐藏在给整个动画效果设定一个时间就可以完整的运行

3、效果图




4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现


5、所有图片的压缩包新建一个文件后将包解压放进文件夹图片的压缩包在页面的最下方可以看到并下载下载后无需修改文件夹名因为本身就已经写好了和html5内的路径相吻合

6、将创建html文件保存的时候将编码类型换成(UTF-8有签名)这样可以让部分中文正常的显示出来，将保存类型(T)换成(所有文件(*.*))，将html5和解压后的图片文件夹放在同一个文件夹内效果


7、代码[html5] 

<!DOCTYPE HTML">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
.demo{width:500px;margin:30px auto 0 auto;}
.demo h2{font-size:16px;color:#333;height:52px;line-height:24px;}
/* sidebar */
#sidebar{color:#AFB0B1;background:#0D171A;float:left;margin:0 0 24px;padding:15px 10px 10px;width:300px;}
#sidebar li{height:90px;overflow:hidden;}
#sidebar li h5{color:#A5A9AB;font-size:1em;margin-bottom:0.5em;}
#sidebar li h5 a{color:#fff;text-decoration:none;}
#sidebar li img{float:left;border:solid 3px #fff;margin-right:8px;display:inline;}
#sidebar li .info{color:#B1B1B1;font-size:1em;}
#sidebar .spyWrapper{height:100%;overflow:hidden;position:relative;}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
(function($){ 
	$.fn.simpleSpy = function (limit, interval){
		limit = limit || 4;
		/*让div始终显示4个单位的高度*/
		interval = interval || 4000;
		/*控制每个动画效果的时间4000毫秒就是4秒 从最下面的图片消失到第5张图片的从上面显示出来一个动画2秒一共4秒的时间*/
		return this.each(function(){
			var $list = $(this),
			/*获得所有列表项目的缓存*/
			items = [], 
			/*未初始化*/
			currentItem = limit,
			total = 0, 
			/*初始化以后*/
			height = $list.find('> li:first').height();
			/*列表限制li元素*/
			$list.find('> li').each(function(){
			/*获得缓存*/
				items.push('<li>' + $(this).html() + '</li>');
				/*获得所有列表的li里面的缓存*/
			});

			total = items.length;
			/*始终显示在缓存里的li*/

			$list.wrap('<div class="spyWrapper" />').parent().css({height : height * limit});
			/*控制div在图片消失的时候依然保持同样的高度不会因为div的消失而变化*/

			$list.find('> li').filter(':gt(' + (limit - 1) + ')').remove();
			/*通过调用遍历方法获得所有li元素在实现移除的方法*/
        
			function spy(){
			/*开始第二个图片从最上方插入的效果*/
				var $insert = $(items[currentItem]).css({height : 0,opacity : 0,display : 'none'}).prependTo($list);
				/*插入一个新的div，透明度和高度为零*/

				$list.find('> li:last').animate({ opacity : 0}, 1000, function(){
				/*通过遍历插入一个动画出现的效果 时间为1秒*/
					$insert.animate({ height : height }, 1000).animate({ opacity : 1 }, 1000);
					/* 增加新的第一个div的高度*/
					$(this).remove();	
					/*这个移除的效果是什么呢 就是在当我们第一次加载完页面的时候都会有几个只有图片没有属性值的li 清除就是在第一个动画结束后把没有属性的li给删除掉 没有属性的就是 没有高的 没有动画效果的li*/
				});

				currentItem++;
				/*永远在第一个li位置显示出现的是下一个li图片*/
				if(currentItem >= total){
				/*如果4张图片大于或等于所有的大于或等于整个图片的的话*/
					currentItem = 0;
					/*那么就从0开始*/
				}
				setTimeout(spy, interval)
				/*在ul和4秒内完成*/
			}

			spy();
			/*效果的整个开关*/
		});
	};   
})(jQuery);
</script>

<script type="text/javascript">
$(document).ready(function(){
	$('ul.spy').simpleSpy();
	/*ul.spy调用simpleSpy()模版方法*/
});
</script>

</head>
<body>

<div class="demo">

	<h2>jquery仿新浪微博图片文字列表间隙滚动淡进淡出滚动</h2>

	<div id="sidebar">
		<ul class="spy">
			<li>
				<a href="http://www.17sucai.com/" title="View round"><img width="70" height="70" src="images/1.png" title="" /></a>
				<h5><a href="http://www.17sucai.com/" title="View round">round</a></h5>
				<p class="info">Nov 29th 2008 by neue</p>
			</li>
			<li>
				<a href="http://www.17sucai.com/" title="View reflet"><img width="70" height="70" src="images/2.png" title="" /></a>
				<h5><a href="http://www.17sucai.com/" title="View reflet">reflet</a></h5>
				<p class="info">Nov 29th 2008 by neue</p>
			</li>
			<li>
				<a href="http://www.17sucai.com/" title="View Kate Moross Little Big Planet"><img width="70" height="70" src="images/3.png" title="" /></a>
				<h5><a href="http://www.17sucai.com/" title="View Kate Moross Little Big Planet">Kate Moross Little Big Planet</a></h5>
				<p class="info">Nov 29th 2008 by neue</p>
			</li>
			<li>
				<a href="http://www.17sucai.com/" title="View Untitled"><img width="70" height="70" src="images/4.png" title="" /></a>
				<h5><a href="http://www.17sucai.com/" title="View Untitled">Untitled</a></h5>
				<p class="info">Nov 29th 2008 by mike1052</p>
			</li>
			<li>
				<a href="http://www.17sucai.com/" title="View My Tutorial's Library"><img width="70" height="70" src="images/5.png" title="" /></a>
				<h5><a href="http://www.17sucai.com/" title="View My Tutorial's Library">My Tutorial's Library</a></h5>
				<p class="info">Nov 29th 2008 by FrancescoOnAir</p>
			</li>
			<li>
				<a href="http://www.17sucai.com/" title="View Sandy &mdash; your free personal email assistant - Log in"><img width="70" height="70" src="images/6.png" title="" /></a>
				<h5><a href="http://www.17sucai.com/" title="View Sandy &mdash; your free personal email assistant - Log in">Sandy &mdash; your free</a></h5>
				<p class="info">Nov 29th 2008 by John Doe</p>
			</li>
			<li>
				<a href="http://www.17sucai.com/" title="View Sandy &mdash; your free personal email assistant - Log in"><img width="70" height="70" src="images/7.png" title="" /></a>
				<h5><a href="http://www.17sucai.com/" title="View Sandy &mdash; your free personal email assistant - Log in">Sandy &mdash; your free</a></h5>
				<p class="info">Nov 29th 2008 by John Doe</p>
			</li>
			<li>
				<a href="http://www.17sucai.com/" title="View Sandy &mdash; your free personal email assistant"><img width="70" height="70" src="images/8.png" title="" /></a>
				<h5><a href="http://www.17sucai.com/" title="View Sandy &mdash; your free personal email assistant">Sandy &mdash; your free</a></h5>
				<p class="info">Nov 29th 2008 by John Doe</p>
			</li>
			<li>
				<a href="http://www.17sucai.com/" title="View Values of n Blog"><img width="70" height="70" src="images/9.png" title="" /></a>
				<h5><a href="http://www.17sucai.com/" title="View Values of n Blog">Values of n Blog</a></h5>
				<p class="info">Nov 29th 2008 by John Doe</p>
			</li>
		</ul>
	</div>
	  
</div>

</body>
</html>
  • 大小: 25.3 KB
  • 大小: 119.6 KB
分享到：
| 6月21号学习jquery(文档操作)
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery新浪微博图片文字列表间歇上下滚动淡进淡出滚动

    标题中的“jquery新浪微博图片文字列表间歇上下滚动淡进淡出滚动”是一个jQuery实现的动态效果，主要用于展示新浪微博上的图片和文字内容。这种效果可以使页面更生动，吸引用户的注意力，通常应用于新闻网站、社交...

    jquery高仿新浪微博图片显示插件

    《jQuery高仿新浪微博图片显示插件深度解析》 在网页设计和开发中，图片的展示方式对于用户体验至关重要。尤其在社交媒体平台，如新浪微博，图片的加载速度和展示效果直接影响到用户的浏览体验。为了满足此类需求，...

    jQuery仿新浪微博高度自适应滚动代码.zip

    《jQuery仿新浪微博高度自适应滚动代码详解》 在网页开发中，动态的、高度自适应的滚动效果常常能提升用户体验，使页面更具吸引力。"jQuery仿新浪微博高度自适应滚动代码"便是实现这一效果的一种解决方案。它以其...

    jquery仿新浪微博动态显示

    【jQuery仿新浪微博动态显示】 在Web开发中，模拟社交媒体如新浪微博的动态加载效果是一项常见的需求。这涉及到前端JavaScript库jQuery的高效使用，以及Ajax技术来实现数据的异步加载。以下我们将深入探讨如何使用...

    完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效

    1、效果及功能说明 仿新浪微博图片文字列表上下淡进淡出间歇上下滚动 2、实现原理 首先要设定div内只能显示4个图片那么多出来的图片会自动隐藏然后在给图片添加一个动画的事件让他们可以滚动的播放出来上下滚动效果...

    jquery仿新浪微博鼠标滚动到底部加载内容.rar

    【jQuery仿新浪微博鼠标滚动到底部加载内容】是一个常见的网页动态加载技术，主要应用于社交媒体和新闻网站，以提高用户体验。在用户滚动页面至底部时，无需手动点击“加载更多”按钮，内容会自动分页加载，这被称为...

    jquery仿新浪微博评论回复交互表单代码

    综上所述，使用jQuery实现仿新浪微博的评论回复交互表单涉及DOM操作、事件监听、数据处理、动画效果以及良好的用户界面设计。通过熟练掌握这些技巧，你可以创建出一个功能完备且用户体验优秀的评论系统。

    jQuery仿新浪微博大厅滚动效果v2.0

    【jQuery仿新浪微博大厅滚动效果v2.0】是一款基于JavaScript库jQuery实现的动态滚动效果，旨在模拟新浪微博大厅的信息流更新模式。这个效果的核心在于利用jQuery的动画功能和特定的插件来实现信息的平滑滚动，使用户...

    jQuery仿新浪微博发布新鲜事页面代码

    《使用jQuery实现仿新浪微博发布页面的功能详解》 在Web开发中，模拟知名社交网络的界面和功能是一项常见的挑战。本文将深入探讨如何使用jQuery库来创建一个类似新浪微博的发布新鲜事页面，涵盖字数统计、表情支持...

    jQuery仿新浪微博首页滚动留言板插件

    关于【jQuery仿新浪微博首页滚动留言板插件】，这是一个基于jQuery的动态效果插件，它的设计灵感来源于新浪微博的首页。在微博平台上，用户发布的消息会以滚动的形式不间断地展示，这种设计既节省了页面空间，又为...

    jQuery仿新浪微博@功能代码

    【jQuery仿新浪微博@功能代码】是一种常见的前端交互设计，它基于JavaScript库jQuery实现，用于在网页文本输入框中实现类似新浪微博的“@”提及功能。这个功能的主要目的是提高用户在社交媒体或评论系统中的互动体验...

Magicbox
Global site tag (gtag.js) - Google Analytics