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"});
					}
				});
			}
		});
	};
});

PS: 别忘了加载 jQuery 库哦!另外要根据例子步骤举一反三折腾。

完。

zww
or
oooo

“jQuery: “老汉推车”走马灯效果”有140条评论

  1. Leyar says:

    我知道了。。- -;哈,不错,我要用上,不过,不会,等我慢慢折腾吧。。 :razz:

  2. 包子 says:

    果然在不断的往前推

  3. 仰肖 says:

    好邪恶的名字。。

  4. 拉登死了和爱情有木有关系,吼吼~~~
    很多人都这样说,嘎嘎

  5. zww帮我看看我的老汉推车,上下不居中啊,怎么调正啊

  6. 我明白了去掉框后就好调了

  7. 在IE6还还是走位,用什么办法能让在IE下正常呢,我见你的就正常

    1. zwwooooo says:

      @yesureadmin
      css问题。解决方法是#notice_wrap用绝对定位:
      你给#header加position:relative;
      然后#notice_wrap{position:absolute;left:370px;top:20px;}
      具体就自己调了。

    2. @zwwooooo
      还是不行哦,能否写详细点,谢谢

  8. 老不往向跑,我给#header加position:relative;了
    在#notice_wrap{position:absolute;left:370px;top:20px;}TOP改为1都不往顶上跑

    1. @yesureadmin
      这个是搞定了,不过现在的问题是撞击棍老在左边不往右跑.不好意思留了这么多垃圾

    2. zwwooooo says:

      @yesureadmin
      说明你对css一点都不熟。只简单给你思路,自己折腾:
      #notice_wrap定义个宽度
      里面放2个div,一个是#notice,一个是#search,这两个div用float属性分为左右,然后你懂的,不懂就付费请人吧 :mrgreen:

  9. 求索阁 says:

    这名字起的好邪恶啊~

  10. 许久许久没有来了,错过了这么多好东东。

    1. zwwooooo says:

      @宝宝健康成长
      呵呵,荒淫常来

  11. 在simple-M主题上添加ZWW的“老汉推车”效果 | 孤风的网志 says:

    [...] 看着主题导航栏下面的一截空白,我就想,咱不能让他空着啊,这是想起了ZWW的“老汉推车”撞击棍,那么把这个效果放在这个位置,不是正适合?其实刚开始看到这个老汉推车的时候,我就曾在zbench主题上试过,无奈水平有限,弄不正好。今天再次想起来,就决定要弄好它,弄不正好,也得弄个差不多好吧! [...]

  12. [...] 原文链接:http://zww.me/archives/25450 目前有16条回应 Comment Trackback luacloud 回应于2012/07/05 16:33 回复TA [...]

  13. 大发 says:

    不知道什么原因,我这会弹不到原来的位置鸟。

    1. zwwooooo says:

      @大发
      检查一下,这篇文章很多人照着折腾成功的了

发表评论

昵称 *

网址

B em del U Link Code Quote