“老汉推车”效果，是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">«</p> <p id="next">»</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 | http://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 库哦！另外要根据例子步骤举一反三折腾。
完。
声明: 除非注明，ZWWoOoOo文章均为原创，转载请以链接形式标明本文地址
本文地址: http://zww.me/archives/25450
我知道了。。- -;哈，不错，我要用上，不过，不会，等我慢慢折腾吧。。
果然在不断的往前推
好邪恶的名字。。
拉登死了和爱情有木有关系，吼吼~~~
很多人都这样说，嘎嘎
@电商圈商城
开个玩笑
zww帮我看看我的老汉推车,上下不居中啊,怎么调正啊
我明白了去掉框后就好调了
在IE6还还是走位,用什么办法能让在IE下正常呢,我见你的就正常
@yesureadmin
css问题。解决方法是#notice_wrap用绝对定位：
你给#header加position:relative;
然后#notice_wrap{position:absolute;left:370px;top:20px;}
具体就自己调了。
@zwwooooo
还是不行哦,能否写详细点,谢谢
老不往向跑,我给#header加position:relative;了
在#notice_wrap{position:absolute;left:370px;top:20px;}TOP改为1都不往顶上跑
@yesureadmin
这个是搞定了,不过现在的问题是撞击棍老在左边不往右跑.不好意思留了这么多垃圾
@yesureadmin
说明你对css一点都不熟。只简单给你思路，自己折腾：
#notice_wrap定义个宽度
里面放2个div，一个是#notice，一个是#search，这两个div用float属性分为左右，然后你懂的，不懂就付费请人吧
这名字起的好邪恶啊~
许久许久没有来了，错过了这么多好东东。
@宝宝健康成长
呵呵，荒淫常来
不知道什么原因，我这会弹不到原来的位置鸟。
@大发
检查一下，这篇文章很多人照着折腾成功的了