html跑马灯 ie6,jQuery实现 “老汉推车”走马灯效果

1. html 代码结构

• 这里展示的是：“老汉推车”走马灯效果
• 名字不错吧
• 最新“噗～”：“拉灯”死了，我再也不相信爱情鸟～

«

»

我是搜索框，霍霍

注：搜索代码根据自己主题写，注意那个 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 库哦！另外要根据例子步骤举一反三折腾。

转自http://zww.me/archives/25450

声明：本文采用 BY-NC-SA 协议进行授权，如无注明均为原创，转载请注明转自 你好！刘

本文地址：jQuery实现 “老汉推车”走马灯效果