Old

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

声明: 除非注明,ZWWoOoOo文章均为原创,转载请以链接形式标明本文地址
本文地址: https://zww.me/archives/25450

140 comments

  1. elaphent elaphent Google Chrome 13 Google Chrome 13 Windows 7 Windows 7

    不是被Google鄙视了么 :mrgreen:

    沙发
  2. IM路人 IM路人 Maxthon 3 Maxthon 3 Windows XP Windows XP

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

    板凳
  3. 林木木 林木木 Google Chrome 12 Google Chrome 12 Windows 7 Windows 7

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

    地板
  4. ......
  5. Leyar Leyar Internet Explorer 8 Internet Explorer 8 Windows XP Windows XP

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

    61楼
  6. 包子 包子 Google Chrome 9 Google Chrome 9 Windows XP Windows XP

    果然在不断的往前推

    62楼
  7. 仰肖 仰肖 Google Chrome 13 Google Chrome 13 Windows XP Windows XP

    好邪恶的名字。。

    63楼
  8. 电商圈商城 电商圈商城 Google Chrome 11 Google Chrome 11 Windows XP Windows XP

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

    64楼
  9. yesureadmin yesureadmin Google Chrome 12 Google Chrome 12 Windows 7 Windows 7

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

    65楼
  10. yesureadmin yesureadmin Google Chrome 12 Google Chrome 12 Windows 7 Windows 7

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

    66楼
  11. yesureadmin yesureadmin Google Chrome 12 Google Chrome 12 Windows 7 Windows 7

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

    67楼
    • zwwooooo zwwooooo Firefox 5 Firefox 5 Windows 7 Windows 7

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

    • yesureadmin yesureadmin Google Chrome 10 Google Chrome 10 Windows XP Windows XP

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

  12. yesureadmin yesureadmin Google Chrome 10 Google Chrome 10 Windows XP Windows XP

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

    68楼
    • yesureadmin yesureadmin Google Chrome 10 Google Chrome 10 Windows XP Windows XP

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

    • zwwooooo zwwooooo Firefox 5 Firefox 5 Windows 7 Windows 7

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

  13. 求索阁 求索阁 Google Chrome 10 Google Chrome 10 Windows 7 Windows 7

    这名字起的好邪恶啊~

    69楼
  14. 宝宝健康成长 宝宝健康成长 Firefox 5 Firefox 5 Windows XP Windows XP

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

    70楼
  15. 在simple-M主题上添加ZWW的“老汉推车”效果 | 孤风的网志 - pingback on 2012/06/25/ 19:12
    71楼
  16. 公告栏添加走马灯效果 | 测试站 - pingback on 2012/09/03/ 18:59
    72楼
  17. 大发 大发 Google Chrome 21 Google Chrome 21 Windows XP Windows XP

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

    73楼

Leave a Reply