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. huiris says:

    哈哈,很有创意,标题很闪亮

    1. zwwooooo says:

      @huiris
      玩玩,霍霍

  2. says:

    为什么是老汉推车。。。

    1. zwwooooo says:

      @囧
      因为……你懂的

  3. CXM says:

    我喜欢这个效果,但是思路真难理。 :grin:

    1. zwwooooo says:

      @CXM
      难么?懂点jq就会觉得简单了

  4. 不错,这段代码终于出来了

    1. zwwooooo says:

      @皇家元林
      答应了就会放出的

  5. 瓜瓜 says:

    老汉推车..来学习来了,哈哈.

    1. zwwooooo says:

      @瓜瓜
      嗯,我明白了,你是来学“老汉推车”的 :mrgreen:

  6. 你越来越邪恶咯。。。

    1. zwwooooo says:

      @一世年华
      哪里,我纯洁的很,噗~

  7. 张衡 says:

    垂涎这个好久了。。。

    1. zwwooooo says:

      @张衡
      荒淫折腾使用

  8. smilebull says:

    原来老汉是这么推车的 :mrgreen:

  9. Leyond says:

    呵呵,一般都是自动的吧

  10. Neeke says:

    :shock: 老汉推车...我邪恶了...

    1. zwwooooo says:

      @Neeke
      名字很YD。。。

  11. 山头人 says:

    老汉推车,这名好熟。博主学用的一招么?

    1. zwwooooo says:

      @山头人
      这只是一个YD的词而已

  12. Fanr says:

    足够YD的说

  13. 好邪恶的命名啊

  14. okbox says:

    不错的想法。。。

  15. 万戈 says:

    围观老汉推车 :twisted:

  16. 万戈 says:

    有大叔推车吗? :mrgreen:

    1. zwwooooo says:

      @万戈
      应该没有,只听过老汉和万戈推出

  17. 革新 says:

    哥您太有才了。 :twisted:

  18. 设计失控 says:

    :cry: 不懂代码者,伤不起呀!

    1. zwwooooo says:

      @设计失控
      你的新主题很漂亮啊

    2. 设计失控 says:

      @zwwooooo
      谢谢!搞了很长时间!

  19. 竹箫 says:

    推出的twitter是自动更新的还是手动更新的?

  20. 换上jQuery“老汉推车”走马灯效果 - 王笨笨 - 爱自己,爱生活 says:

    [...] 前几天在ZWW.ME博客中看到jQuery“老汉推车”走马灯效果,就想在自己博客中也弄一个就荒淫的copy了ZWW.ME的代码。在此感谢ZWW.me大神作品。谁叫偶是菜鸟,刚放上去就错位跑到页面左面去了…….效果请看我的博客 ~想要实现这个效果的朋友请移步至ZWW.me的《jQuery: “老汉推车”走马灯效果》。 [...]

回复给 zwwooooo ¬
取消回复

昵称 *

网址

B em del U Link Code Quote