jquery随机新闻滚动切换效果

来源：互联网发布：易推客营销软件下载编辑：程序博客网时间：2024/05/24 16:17
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><head><title>随机新闻滚动切换效果</title><script src="jquery.1.6.3.js"></script><script type = "text/javascript">function scroll_news(){var $firstNode = $('#scroll-container li');//得到 i的值 列数var iRow = $('#scroll-container').find('li').length-1;//debugger;$(function(){$firstNode.eq(0).fadeOut('slow',function(){$(this).clone().appendTo($(this).parent()).fadeIn('slow');$(this).remove();$firstNode.eq(iRow).hide();});});}$(document).ready(function(){go();});function stop(){clearInterval(sn);}function go(){sn = setInterval('scroll_news()',2000);}</script><style type="text/css">body{ margin:0; padding:0;}#scroll-container{ width:240px; height:23px;line-height:23px;}#scroll-container li{list-style:none;display:none;font-size:12px;}li a{padding-left:10px; color:#F00;text-decoration:none;}li a:hover{text-decoration:underline;}</style></head><body><div id="scroll-container" onMouseOver="stop();" onMouseOut="go();"><li>▪<a href="#">一生这么一次</a></li><li>▪<a href="#">不再因为任性而不肯低头</a> </li><li>▪<a href="#">不再因为固执而轻言分手</a> </li><li>▪<a href="#">坚信一次</a> </li><li>▪<a href="#">一颗心需要坚定地去温暖另一颗心</a> </li><li>▪<a href="#">一直走</a> </li><li>▪<a href="#">就可以到白头</a> </li><li>▪<a href="#">就那样相守</a> </li><li>▪<a href="#">在来往的流年里</a> </li><li>▪<a href="#">岁月安好</a> </li><li>▪<a href="#">惟愿这一生</a> </li><li>▪<a href="#">执子之手</a> </li><li>▪<a href="#">与子偕老</a> </li></div></body></html>
0 0