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

    不是被Google鄙视了么 :mrgreen:

  2. IM路人 says:

    有现成的了,DEMO去研究下~~

    1. zwwooooo says:

      @IM路人
      最近开始都放放demo,因为主题经常变

  3. 林木木 says:

    好多function()一个套一个~哈

    1. zwwooooo says:

      @林木木
      其实可以写成一个jq fn,懒,现在这样明朗些。而且你一看就知道,核心效果函数是你的那个啥,变量都懒的换了,霍霍。

    2. 无冷 says:

      @zwwooooo 收下代码,备不时之需

  4. SErHo says:

    这个名字好YD。

    1. zwwooooo says:

      @SErHo
      相当地YD

  5. Louis Han says:

    老汉推车比下面那段代码更吸引人

    1. zwwooooo says:

      @Louis Han
      我倒是希望代码比老汉更吸引人,霍霍

  6. 水水 says:

    搜索框可以更性感些

    1. zwwooooo says:

      @水水
      是啊,玩玩

  7. 宝佑 says:

    你这标题写的太X人了!

    1. zwwooooo says:

      @宝佑
      YD?嗯嗯,我知道的。

  8. liveme says:

    哈哈,第一次听你说老汉推车的时候我就笑疯了 :mrgreen:

    1. zwwooooo says:

      @liveme
      的确很搞笑。。。

  9. 学习了啊哈哈。以后弄弄看看。
    想问下博主,能否借鉴一下您大那个侧栏上的tab切换呢? 想节约一点侧栏空间,于是看您的那个侧栏很好,想copy一下.本想直接看jquery函数还有源代码什么的,但是想得到博主的同意.

    1. zwwooooo says:

      @自说Me话
      这是你第一次评论,被审核了,霍霍

  10. Ethan says:

    太邪恶了!

    1. zwwooooo says:

      @Ethan
      名字邪恶

  11. 冲着标题来的 :mrgreen:

    1. zwwooooo says:

      @空中楼阁
      嘻嘻,够YD吧

  12. 标题貌似很邪恶

  13. yetone says:

    我承认我是被标题吸引过来的

    1. zwwooooo says:

      @yetone
      厄~貌似被吸引来的不少。。。

  14. 这起名的人也太邪恶了

    1. schiy says:

      @空空裤兜
      为什么姑娘们都说我是纯洁滴男人 :mrgreen:

    2. @schiy
      怪不得,俺大老爷们一个

  15. 非常地炫,应该应用到你的下个主题中就好了.别一味地想提交到官网,来一个炫点的主题撒~

    1. zwwooooo says:

      @yesureadmin
      我就喜欢一味提交到官网,国内 - - 你懂的

  16. wmtimes says:

    你这个名称起的忒好:老汉推车 :razz:

    1. zwwooooo says:

      @wmtimes
      嘻嘻,够YD吧

  17. 求助 says:

    请好,能看下我的那个效果,为什么文字不能居中而是偏下?和搜索框不对齐。能告诉我下是哪里的问题么?

    1. zwwooooo says:

      @求助
      简单看了下,你的主题木有写css reset,所以你给
      #notice ul{}
      大括号里面加上下面的属性
      margin:0;

    2. 三十本书 says:

      @zwwooooo
      哈哈~谢谢!搞定了

  18. mopvhs says:

    标题亮了~~~收下~~

    1. zwwooooo says:

      @mopvhs
      霍霍,慢慢玩

  19. mcooo says:

    这标题实在是太亮了...

    1. zwwooooo says:

      @mcooo
      嘻嘻,YD一下

  20. 灰狼 says:

    我是被标题吸引进来的

    1. zwwooooo says:

      @灰狼
      你是第几个被吸引的?貌似是第5个。。。

回复给 SErHo ¬
取消回复

昵称 *

网址

B em del U Link Code Quote