大家好，欢迎来到IT知识分享网。<html>
<style>
/* #notice_wrap */
#notice_wrap{position:relative;width:700px;height:50px;margin:0 auto;border:1px solid #ddd;}
/* #notice */
#notice{background:#c0c0c0;}
#notice{overflow:hidden;position:absolute;top:0;left:0;width:500px;height:50px;}
#notice ul{position:absolute;width:1000px; background:#ffffff;}
#notice ul li{overflow:hidden;list-style:none;float:left;width:470px;height:50px;line-height:30px;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;}
</style>
<body>
<div id=”notice_wrap”>
<div id=”notice”>
<ul>
<li>这里展示的是：“老汉推车”走马灯效果</li>
<li>名字不错吧</li>
<li>最新“噗～”：“拉灯”死了，我再也不相信爱情鸟～</li>
<li>最新“噗～”：“拉灯”死了，我再也不相信爱情鸟111～</li>
</ul>
<p id=”prev”>«</p>
<p id=”next”>»</p>
</div>
<div id=”search”>我是搜索框，霍霍<!– 这里放搜索框代码或者其它框框类，当作撞击棍 –></div>
</div>
</body>
</html>
<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript” >
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”});
}
});
}
});
};
});
</script>
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/101031.html
