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. 电商圈 says:

    这个效果还是蛮友好的 :mrgreen:

  2. Bob says:

    不错,good, :grin:

  3. Alex Gao says:

    哇咔咔~~淫荡的效果终于放出代码了~~我要研究研究怎么搞到我那里去

    1. zwwooooo says:

      @Alex Gao
      你那要好好想想位置

  4. 囧啊囧 says:

    总是把标题写得那么邪恶

    1. zwwooooo says:

      @囧啊囧
      总是么?偶尔才一次啊

    2. 囧啊囧 says:

      @zwwooooo
      都偶尔好多次了

    3. zwwooooo says:

      @囧啊囧
      起码不是标题党,霍霍

  5. 西风 says:

    我喜欢 老汉推车

    1. zwwooooo says:

      @西风
      很多人喜欢,哈哈哈

  6. ztnotes says:

    好猥琐的名字~~

  7. 阳光e友 says:

    效果不错的说

  8. :mrgreen: 我承认 是看标题进来的。。。

    1. zwwooooo says:

      @免费情结
      很多朋友都是,我欺骗了大家的感情 :mrgreen:

  9. Microhu says:

    哈哈,等到这一天了.

    1. zwwooooo says:

      @Microhu
      荒淫折腾使用

  10. 很邪恶的标题

    1. schiy says:

      @亿品元素
      zww很淫荡,鉴定完毕 :lol:

    2. zwwooooo says:

      @schiy
      我很纯情的哦

  11. Demon says:

    这效果出来了哦。不错。不过这名字很XE。

  12. 先看看 says:

    效果挺炫

  13. 公子 says:

    确实很给力@!~

  14. Timothy says:

    题目比较邪恶……我承认,我是被题目吸引过来的……

    1. zwwooooo says:

      @Timothy
      好吧,你是第6个被标题吸引过来的?

    2. Alex Gao says:

      @zwwooooo
      大叔的网站因为这篇文章会吸引到各方人士前来围观 :grin:

    3. zwwooooo says:

      @Alex Gao
      看来还是YD的人多啊

  15. 孤风 says:

    哈哈,每天都看到的效果,没想到有个这么XX的名字
    :mrgreen:
    果断留名,有空也推推两下试试

    1. zwwooooo says:

      @孤风
      荒淫折腾使用

  16. 又邪恶,又实用啊。哈哈

    1. zwwooooo says:

      @baros博客
      这样印象深刻点,霍霍

  17. 小王子 says:

    你主题是越来越漂亮了,细节做的越来越到位了。

  18. 园子 says:

    效果不错
    名字取的的也好。

    1. zwwooooo says:

      @园子
      效果BC,名字YD :mrgreen:

  19. 标题太那个了!哈哈!

    1. zwwooooo says:

      @董欣博客
      哈哈,的确是

  20. 小羿 says:

    标题亮了 (#--) :evil: :evil:

    1. zwwooooo says:

      @小羿
      希望代码也亮了 :mrgreen:

发表评论

昵称 *

网址

B em del U Link Code Quote