六狼论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

新浪微博账号登陆

只需一步,快速开始

搜索
查看: 102|回复: 0

滚动显示

[复制链接]

升级  6%

15

主题

15

主题

15

主题

秀才

Rank: 2

积分
59
 楼主| 发表于 2013-2-7 19:19:43 | 显示全部楼层 |阅读模式
此例子也是根据人家修改的 呵呵
公共的css
<style type="text/css">ul,li{margin:0;padding:0}#scrollDiv{width:800px;height:100px;line-height:25px;border:#ccc 1px solid;overflow:hidden}#scrollDiv li{height:25px;padding-left:10px;}</style>
公共的html
<div id="scrollDiv"><ul id="scroll-container" style="margin-top: 0px;">    <li>1 clone()克隆匹配的DOM元素并且选中这些克隆的副.</li>    <li>2 appendTo()把所有匹配的元素追加到另一个、指定的元素元素集合中。</li>    <li>3 eq()减少匹配对象到一个单独得dom元素.</li>    <li>4 fadeIn()通过不透明度的变化来实现所有匹配元素的淡出效果,并在动画完成后可选地触发一个回调函数.</li>    <li>5 fadeOut()能过不透明度的变化来实现所有匹配元素的淡出效果,并在动画完成后可选地触发一个回调函数.</li>    <li>6 parent()取得一个包含着所有匹配元素的唯一父元素的元素集合。 可以通过一个可选的表达式进行筛选.</li>       <li>7 show()以优雅的动画显示所有匹配的元素,并在显示完成后可选地触发一个回调函数.</li>    </ul></div>

1.淡入淡出
jQuery(function ($) {//对于横向的时候 如果出现多个时候会使用$('#scroll-container li').each(function(index,domEl){if(index >=4)$(domEl).hide() ;});setInterval('scroll_news()',2000);});    function scroll_news(){var $firstNode = $('#scroll-container li');                       $firstNode.eq(0).fadeOut('slow',function(){   $(this).clone().appendTo($(this).parent()).hide();$(this).remove();$firstNode.eq(4).fadeIn('slow');});    }
2.滑动
var runTime ;jQuery(function ($) {runTime = setInterval('scroll_news()',2000);$("#scrollDiv").mouseover(function(){ clearInterval(runTime);}); $("#scrollDiv").mouseout(function(){ runTime = setInterval('scroll_news()',2000);}); });function scroll_news(){    $("#scrollDiv").find("ul:first").animate({marginTop:"-25px"},1000,function(){$(this).css({marginTop:"0px"}).find("li:first").appendTo(this);        });    }
您需要登录后才可以回帖 登录 | 立即注册 新浪微博账号登陆

本版积分规则

快速回复 返回顶部 返回列表