明天的明天 永远的永远 未知的一切 我与你一起承担 ??

是非成败转头空 青山依旧在 几度夕阳红 。。。
  博客园  :: 首页  :: 管理

Jquery：单行滚动、批量多行滚动、文字图片翻屏滚动效果的实现

Posted on 2009-11-07 11:17  且行且思  阅读(1565)  评论(0)  编辑  收藏  举报

一单行滚动

<!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">
<head>
<meta http-equiv="Content-Type" c />
<title>无标题文档</title>
<style type="text/css">
ul,li{margin:0;padding:0}
#scrollDiv{width:300px;height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden}
#scrollDiv li{height:25px;padding-left:10px;}
</style>
<script src="http://www.cssrain.cn/demo/JQuery+API/jquery-1[1].2.1.pack.js" type="text/javascript"></script>
<script type="text/javascript">
function AutoScroll(obj){
$(obj).find("ul:first").animate({
marginTop:"-25px"
},500,function(){
$(this).css({marginTop:"0px"}).find("li:first").appendTo(this);
});
}
$(document).ready(function(){
setInterval('AutoScroll("#scrollDiv")',1000)
});
</script>
</head>

<body>
<div id="scrollDiv">
<ul>
<li>这是公告标题的第一行</li>
<li>这是公告标题的第二行</li>
<li>这是公告标题的第三行</li>
<li>这是公告标题的第四行</li>
<li>这是公告标题的第五行</li>
<li>这是公告标题的第六行</li>
<li>这是公告标题的第七行</li>
<li>这是公告标题的第八行</li>
</ul>
</div>
</body>
</html>

二,多行滚动

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
ul,li{margin:0;padding:0}
#scrollDiv{width:300px;height:100px;min-height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden}
#scrollDiv li{height:25px;padding-left:10px;}
</style>
<script src="http://www.cssrain.cn/demo/JQuery+API/jquery-1[1].2.1.pack.js" type="text/javascript"></script>
<script type="text/javascript">
//滚动插件
(function($){
$.fn.extend({
Scroll:function(opt,callback){
//参数初始化
if(!opt) var opt={};
var _this=this.eq(0).find("ul:first");
var        lineH=_this.find("li:first").height(), //获取行高
line=opt.line?parseInt(opt.line,10):parseInt(this.height()/lineH,10), //每次滚动的行数，默认为一屏，即父容器高度
speed=opt.speed?parseInt(opt.speed,10):500, //卷动速度，数值越大，速度越慢（毫秒）
timer=opt.timer?parseInt(opt.timer,10):3000; //滚动的时间间隔（毫秒）
if(line==0) line=1;
var upHeight=0-line*lineH;
//滚动函数
scrollUp=function(){
_this.animate({
marginTop:upHeight
},speed,function(){
for(i=1;i<=line;i++){
_this.find("li:first").appendTo(_this);
}
_this.css({marginTop:0});
});
}
//鼠标事件绑定
_this.hover(function(){
clearInterval(timerID);
},function(){
timerID=setInterval("scrollUp()",timer);
}).mouseout();
}      
})
})(jQuery);

$(document).ready(function(){
$("#scrollDiv").Scroll({line:4,speed:500,timer:1000});
});
</script>
</head>

<body>
<p>多行滚动演示：</p>
<div id="scrollDiv">
<ul>
<li>这是公告标题的第一行</li>
<li>这是公告标题的第二行</li>
<li>这是公告标题的第三行</li>
<li>这是公告标题的第四行</li>
<li>这是公告标题的第五行</li>
<li>这是公告标题的第六行</li>
<li>这是公告标题的第七行</li>
<li>这是公告标题的第八行</li>
</ul>
</div>
</body>
</html>

三可控制向前向后的多行滚动

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
ul,li{margin:0;padding:0}
#scrollDiv{width:300px;height:100px;min-height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden}
#scrollDiv li{height:25px;padding-left:10px;}
</style>
<script src="http://www.cssrain.cn/demo/JQuery+API/jquery-1[1].2.1.pack.js" type="text/javascript"></script>
<script type="text/javascript">
(function($){
$.fn.extend({
Scroll:function(opt,callback){
//参数初始化
if(!opt) var opt={};
var _btnUp = $("#"+ opt.up);//Shawphy:向上按钮
var _btnDown = $("#"+ opt.down);//Shawphy:向下按钮
var timerID;
var _this=this.eq(0).find("ul:first");
var     lineH=_this.find("li:first").height(), //获取行高
line=opt.line?parseInt(opt.line,10):parseInt(this.height()/lineH,10), //每次滚动的行数，默认为一屏，即父容器高度
speed=opt.speed?parseInt(opt.speed,10):500; //卷动速度，数值越大，速度越慢（毫秒）
timer=opt.timer //?parseInt(opt.timer,10):3000; //滚动的时间间隔（毫秒）
if(line==0) line=1;
var upHeight=0-line*lineH;
//滚动函数
var scrollUp=function(){
_btnUp.unbind("click",scrollUp); //Shawphy:取消向上按钮的函数绑定
_this.animate({
marginTop:upHeight
},speed,function(){
for(i=1;i<=line;i++){
_this.find("li:first").appendTo(_this);
}
_this.css({marginTop:0});
_btnUp.bind("click",scrollUp); //Shawphy:绑定向上按钮的点击事件
});

}
//Shawphy:向下翻页函数
var scrollDown=function(){
_btnDown.unbind("click",scrollDown);
for(i=1;i<=line;i++){
_this.find("li:last").show().prependTo(_this);
}
_this.css({marginTop:upHeight});
_this.animate({
marginTop:0
},speed,function(){
_btnDown.bind("click",scrollDown);
});
}
//Shawphy:自动播放
var autoPlay = function(){
if(timer)timerID = window.setInterval(scrollUp,timer);
};
var autoStop = function(){
if(timer)window.clearInterval(timerID);
};
//鼠标事件绑定
_this.hover(autoStop,autoPlay).mouseout();
_btnUp.css("cursor","pointer").click( scrollUp ).hover(autoStop,autoPlay);//Shawphy:向上向下鼠标事件绑定
_btnDown.css("cursor","pointer").click( scrollDown ).hover(autoStop,autoPlay);

}     
})
})(jQuery);

$(document).ready(function(){
$("#scrollDiv").Scroll({line:4,speed:500,timer:1000,up:"btn1",down:"btn2"});
});
</script>
</head>

<body>
<p>多行滚动演示：</p>
<div id="scrollDiv">
<ul>
<li>这是公告标题的第一行</li>
<li>这是公告标题的第二行</li>
<li>这是公告标题的第三行</li>
<li>这是公告标题的第四行</li>
<li>这是公告标题的第五行</li>
<li>这是公告标题的第六行</li>
<li>这是公告标题的第七行</li>
<li>这是公告标题的第八行</li>
</ul>
</div>

<span id="btn1">向前</span>&nbsp;&nbsp;<span id="btn2">向后</span>

</body>
</html>

 

 

//---------------------------------------------------------------

单行jQuery循环滚动新闻公告代码

<!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">
<head>
<meta http-equiv="Content-Type" c />
<title>jQuery循环滚动新闻列表</title>
<style type="text/css">
ul,li{margin:0;padding:0}
#scrollDiv{width:300px;height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden}
#scrollDiv li{height:25px;padding-left:10px;}
</style>
<script src="http://www.lanrentuku.com/css/jquery-1[1].2.1.pack.js" type="text/javascript"></script>
<script type="text/javascript">
function AutoScroll(obj){
        $(obj).find("ul:first").animate({
                marginTop:"-25px"
        },500,function(){
                $(this).css({marginTop:"0px"}).find("li:first").appendTo(this);
        });
}
$(document).ready(function(){
setInterval('AutoScroll("#scrollDiv")',1000)
});
</script>
</head>

<body>
<div id="scrollDiv">
  <ul>
    <li>这是公告标题的第一行</li>
    <li>这是公告标题的第二行</li>
    <li>这是公告标题的第三行</li>
    <li>这是公告标题的第四行</li>
    <li>这是公告标题的第五行</li>
    <li>这是公告标题的第六行</li>
    <li>这是公告标题的第七行</li>
    <li>这是公告标题的第八行</li>
  </ul>
</div>
</body>
</html>

 

 

//****************************CCTV滚动新闻栏

 

代码
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta name="verify-v1" content="WooRWklylXSrhOuttEoPAtJs3OX3AvlwSRNqjPcANCA=" >
    <title>中国中央电视台 CCTV.com</title>

    <script type="text/javascript" src="js/jquery.js"></script>

<style type="text/css">
.flop{height:29px;line-height:29px;overflow:hidden;position:relative;font-size:14px;border-top:1px solid #ccc;background:#dadada;}
.flop #f1_flop_btms{padding:10px 10px 0 0;float:right;}
.flop #f1_flop_btms a{width:7px;height:4px;margin-bottom:2px;display:block;overflow:hidden;background:url(sprite2.png) -179px -177px;}
.flop #f1_flop_btms .next{background-position:-179px -181px;}
.flop ul{width:698px;position:absolute;left:10px;top:0;}
.flop ul li{height:29px;}
</style>
    <script type="text/javascript" language="javascript" >
    

//翻牌效果
    function moduleFontFlop(_fontId){

        this.emId           = _fontId + "_flop";
        this.btmId           = _fontId + "_flop_btms";
        this.btmPrev        = jQuery("#" + this.btmId + " .prev")||{};
        this.btmNext        = jQuery("#" + this.btmId + " .next")||{};
        var local            = 0;
        var msgList            = jQuery("#" + this.emId);
        var msgList_li        = jQuery("#" + this.emId + " li");
        var msgList_li_h    = jQuery(msgList_li[local]).height();
        var timer             = null;
        
        this.inits    = function(){
            try{
                with(this.btmPrev){
                    bind("mouseover",function(){funPause();});
                    bind("mouseout",function(){funPlay();});
                    bind("click",function(){funPause();funPrev();funPlay();});
                }
                with(this.btmNext){
                    bind("mouseover",function(){funPause();});
                    bind("mouseout",function(){funPlay();});
                    bind("click",function(){funPause();funNext();funPlay();});
                }
                with(msgList){
                    prepend("<li>"+jQuery(msgList_li[msgList_li.length-1]).html()+"</li>"); 
                    append("<li>"+jQuery(msgList_li[0]).html()+"</li>");
                    bind("mouseover",function(){funPause();});
                    bind("mouseout",function(){funPlay();});
                }
                msgList     = jQuery("#" + this.emId);
                msgList_li    = jQuery("#" + this.emId + " li");
                msgList.css({top:-msgList_li_h});
                
                local = 1;
                funPlay();
            }catch(ex){}
        }
        
        function funPlay(){
            clearInterval(timer);
            timer = setInterval(funGo,4000);
        }
        
        function funPause(){
            clearInterval(timer);
        }
        
        function funNext(){
            funShow(0);
        }
        
        function funPrev(){
            funShow(1);
        }
        
        function funGo(){
            funShow(0);
        }
        
        function funShow(key){
            funPause();
            
            if(key==1){
                msgList.animate({top:parseInt(msgList.css("top"))+msgList_li_h}, 200, "linear",function(){
                    local -= 1;
                    if(local==0){msgList.css({top:-(msgList_li_h*(msgList_li.length-2))});local = msgList_li.length-2;}
                });
                
            }else{
                msgList.animate({top:parseInt(msgList.css("top"))-msgList_li_h}, 200, "linear",function(){
                    local += 1;
                    if(local==msgList_li.length-1){msgList.css({top:-msgList_li_h});local = 1;}
                });
                
            }
            funPlay();
        }
        
        function funGoLocal(key){
            local = local + key;
            if( local > msgList.length-1 ){
                local=0;
            }else if(local<0){
                local=msgList.length-1;
            }
        }
    }

    
    //初始化
    function initsHtml(){
        if (confirm("恢复初始？")){
            (new modulCustom('c1')).initsWeb();
        }
    }
    
    //页面加载完成后执行的效果
    jQuery(function(){
        (new moduleFontFlop('f1')).inits();
//        (new modulSreachCCTV('CCTVSearch')).inits();    
        mixScroll("#brand-show");
    });


    //品牌的滚动 S    
var jq=jQuery;
function mixScroll(rid, b){
var inprogress = false,
    live_div = jq(rid);
if(!live_div.length)return;

var items = live_div.find("li"),
    btnPrev = live_div.find(">a.btn-prev"),
    btnNext = live_div.find(">a.btn-next"),
    p_item = live_div.find("ul"),
    p_itemP0 = p_item[0].parentNode,
    p_itemP = jq(p_itemP0),
    itemNum = items.length,
    lastItem = items[itemNum-1],
    leftMax = lastItem.offsetLeft + lastItem.offsetWidth,
    leftMin = 0,
    areaWidth = p_itemP0.offsetWidth;

items.clone(true).appendTo(p_item);

if(!items.length || leftMax <= areaWidth){
  return;
}

btnPrev.click(function(ev){
  leftCur = p_itemP0.scrollLeft;
  if(leftCur<=leftMin){
    return false;
  }
  var leftTarget = Math.max(leftMin, leftCur - areaWidth);
  p_itemP.stop();
  p_itemP.animate({"scrollLeft": leftTarget},
                  {"duration": 400,
                    "easing": "swing"}
                  );
  return false;
});
btnNext.click(function(ev){
  leftCur = p_itemP0.scrollLeft;
  if(leftCur>=leftMax){
    return false;
  }
  var leftTarget = Math.min(leftMax, leftCur + areaWidth);
  p_itemP.stop();
  p_itemP.animate({"scrollLeft": leftTarget},
                  {"duration": 400,
                    "easing": "swing"}
                  );
  return false;
});

function autoScroll(r){
  if(inprogress){
    return;
  }
  if(r===true){
    p_itemP0.scrollLeft = leftMin;
  }
  inprogress = true;
  p_itemP.stop();
  p_itemP.animate({"scrollLeft": leftMax},
             {"duration": (leftMax - p_itemP0.scrollLeft) * 18,
              "easing": "linear",
              'complete': function(){
                      inprogress = false;
                      setTimeout(function(){autoScroll(true);}, 0);
                  }
             });
}

live_div.hover(function(e){
  p_itemP.stop();
  inprogress = false;
},autoScroll);

autoScroll(true);

}
//品牌的滚动 E    
</script>
</head>
<body>

                <!-- HEADER_BEGIN　总编室+内容推荐-->
                    <div class="flop">
<span id="f1_flop_btms"><a href="javascript:void(0)" class="prev"></a><a href="javascript:void(0)" class="next"></a></span>
    <ul id="f1_flop">
        <li><a href=/01/index.shtml target=_blank>&#8226;感动中国2009年人物评选</a> <a href="/snrw/01/index.shtml" target=_blank>&#8226;2009三农人物推介</a> <a href=http://news.cntv.cn/special/amjcdtx/shouye/index.shtml target=_blank>&#8226;爱民警察大推选</a> <a href=http://space.tv.cctv.com/article/ARTI1262157776279834 target=_blank>&#8226;网上书画摄影大赛征稿</a> <a href=http://sports.cctv.com/nba/index.shtml target=_blank>&#8226;NBA09-10赛季</a></li><li><a href=http://guoqing.cctv.com/ target=_blank><font color=#eb0101>&#8226;新中国成立60周年网络电视台</font></a> <a href=http://www.2010expotv.com/ target=_blank><font color=#eb0101>&#8226;2010上海世博会网络电视台</font></a> <a href=http://60nian.cctv.com/ target=_blank><font color=#eb0101>&#8226;数字展馆：辉煌60年&nbsp;</font></a> <a href=http://zuguo.cctv.com/ target=_blank><font color=#eb0101>我的祖国&nbsp;</font></a> <a href=http://museum.cctv.com/special/fuxingzhilu/1/index.shtml target=_blank><font color=#eb0101>复兴之路</font></a></li>
    </ul>
</div><!--remian-->
                <!-- HEADER_END　总编室+内容推荐-->
            

</body>
</html>