jQuery: “老汉推车”走马灯效果

“老汉推车”效果，是xx黑缎 schiy 给我主题头部的公告栏/唠叨栏轮换效果起的名，我也在《IE9、FF4、zSnos-private和zShowBox》这篇文章提到过。

这个算是用普通的 jQuery 轮换效果（也称走马灯）想到的一个“变形”效果，或者说是“合作”效果，就是把搜索框加个ooxx动作来配合轮换效果，算是 idea 原创吧

当时刚换上时就有很多朋友要求共享这段代码，其实不复杂，懂点 jQuery 的朋友很容易做出来，不过呢我答应几个朋友放出的，所以这几天放假（对于我来说每天都在放假——杯具）就写出来共享一下，喜欢的朋友自个按照下列步骤折腾。

下面是根据 Demo 写的步骤：

0. Demo

1. html 代码结构

<div id="notice_wrap">
	<div id="notice">
		<ul>
			<li>这里展示的是：“老汉推车”走马灯效果</li>
			<li>名字不错吧</li>
			<li>最新“噗～”：“拉灯”死了，我再也不相信爱情鸟～</li>
		</ul>
		<p id="prev">&laquo;</p>
		<p id="next">&raquo;</p>
	</div>
	<div id="search">我是搜索框，霍霍<!-- 这里放搜索框代码或者其它框框类，当作撞击棍 --></div>
</div>

注：搜索代码根据自己主题写，注意那个 id名和样式配合。

2. css 参考

/* #notice_wrap */
#notice_wrap{position:relative;width:700px;height:50px;margin:0 auto;border:1px solid #ddd;}
/* #notice */
#notice{overflow:hidden;position:absolute;top:0;left:0;width:500px;height:50px;}
#notice ul{position:absolute;width:1000px;}
#notice ul li{overflow:hidden;list-style:none;float:left;width:470px;height:50px;line-height:50px;margin-left:15px;padding-right:14px;border-right:1px solid #ddd;}
#prev,#next{display:none;cursor:pointer;position:absolute;top:0;width:15px;height:50px;line-height:50px;text-align:center;color:#777;}
#prev{left:0;}
#next{right:0;}
/* #search */
#search{overflow:hidden;position:absolute;top:12px;right:15px;width:170px;height:24px;line-height:24px;text-align:center;background:#fff;border:1px solid #ddd;border-radius:12px;-moz-border-radius:12px;-webkit-border-radius:12px;}

3. jQuery 核心代码

jQuery(document).ready(function(){
	/* “老汉推车”走马灯效果 by zwwooooo | https://zww.me */
	var $notice=$('#notice'), //选择器赋值
		$prev=$('#prev'),
		$next=$('#next'),
		$search=$('#search'),
		myScroll=setInterval(notice,4000); //每4秒循环
	$next.click(function(){ //点击向右翻
		var $first=$notice.find('li:first');
		$first.remove();
		$notice.find('li:last').after($first);
	});
	$prev.click(function(){ //点击向左翻
		var $last=$notice.find('li:last');
		$last.remove();
		$notice.find('li:first').before($last);
	});
	$notice.hover(function(){ //鼠标hover时停止动画 + 显示翻页按钮
		clearInterval(myScroll);
		$prev.show();
		$next.show();
	},function(){
		myScroll=setInterval(notice,4000);
		$prev.hide();
		$next.hide();
	});
	function notice(){ //老汉推车效果函数
		var first=$notice.find('li:first'),
			width=-(first.outerWidth(true))+'px';
		$search.animate({right:'28px'},{ //注意这个14px值，通常是搜索框中right值+搜索框距离左边撞击线的距离（看css）
			duration:400,complete:function(){
				$search.animate({right:'14px'},400); //14px为搜索框原来的right值（看css）
				$notice.find('li').css({"border-color":"#999"});
				$notice.children('ul').animate({left:width},{
					duration:1200,complete:function(){
						$notice.children('ul').append(first).css("left","0");
						$notice.find('li').css({"border-color":"#ddd"});
					}
				});
			}
		});
	};
});