jquery实现多行滚动代码，可以向左或向上滚动

最新推荐文章于 2022-01-27 13:35:41 发布

blatar

最新推荐文章于 2022-01-27 13:35:41 发布

阅读量2.4k

点赞数

分类专栏： JavaScript 文章标签： jquery 公告 function border xhtml callback

本文链接：https://blog.csdn.net/blatar/article/details/8063737

版权

JavaScript 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

html 文件

gundong-0.1.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=utf-8" />
<title>多行滚动jQuery循环新闻列表代码</title>
<style type="text/css">
ul,li{margin:0;padding:0}
img{border:0px;}

a{text-decoration:none;border:0px;}

/* 横向滚动 */
#scrollDiv2{border:#ccc 1px solid;}
#scrollDiv3{border:#ccc 1px solid;}



</style>
<script src="../jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="wordscroll-0.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
	
		$.wordScroll({
					 objId:"scrollDiv2"
					 });
		$.wordScroll({
					 objId:"scrollDiv3",
					 isHorizontal:true
					 });
});

</script>
</head>

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

js文件

wordscroll-0.1.js

/**
* 多行文字滚动，可以实现向左和向上两种滚动
* 
**/
$.extend({
        wordScroll:function(opt,callback){
   //alert("suc");
    this.defaults = {
     objId:"",
     width:300,  // 每行的宽度
     height:100, // div的高度
     liHeight:25,  // 每行高度
     lines:2,  // 每次滚动的行数
     speed:1000,  // 动作时间
     interval:2000,  // 滚动间隔
     picTimer:0,  // 间隔句柄，不需要设置，只是作为标识使用
     isHorizontal:false  // 是否横向滚动
    }
    
                //参数初始化
    var opts = $.extend(this.defaults,opt);
    
    // 纵向横向通用
    $("#"+opts.objId).css({
           width:opts.width,
           height:opts.height,
           "min-height":opts.liHeight,
           "line-height":opts.liHeight+"px",
           overflow:"hidden"
           });
    
    $("#"+opts.objId+" li").css({
           height:opts.liHeight
           });
                if(opts.lines==0) 
     opts.lines=1;
    
    // 横向滚动
    if(opts.isHorizontal){
     
     $("#"+opts.objId).css({
            width:opts.width*opts.lines + "px"
            });
     
     $("#"+opts.objId+" li").css({
            "display":"block",
            "float":"left",
            "width":opts.width + "px"
            });
     
     $("#"+opts.objId+" ul").css({
            width:$("#"+opts.objId).find("li").size()*opts.width + "px"
     });
     // 横向使用，不够一屏则不滚动
     if($("#"+opts.objId).find("li").size()<=opts.lines)
      return;
     var scrollWidth = 0 - opts.lines*opts.width;
     
    }else{
    
     //如果不够一屏内容 则不滚动
     if($("#"+opts.objId).find("li").size()<=parseInt($("#"+opts.objId).height()/opts.liHeight,10))
      return;
     var upHeight=0-opts.lines*opts.liHeight;
    }
    
    
    // 横向滚动
    function scrollLeft(){
      $("#"+opts.objId).find("ul:first").animate({
        marginLeft:scrollWidth
      },opts.speed,function(){
        for(i=1;i<=opts.lines;i++){
         $("#"+opts.objId).find("li:first").appendTo($("#"+opts.objId).find("ul:first"));
        }
        $("#"+opts.objId).find("ul:first").css({marginLeft:0});
      });
    };
    // 纵向滚动
    function scrollUp(){
      $("#"+opts.objId).find("ul:first").animate({
        marginTop:upHeight
      },opts.speed,function(){
        for(i=1;i<=opts.lines;i++){
          $("#"+opts.objId).find("li:first").appendTo($("#"+opts.objId).find("ul:first"));
        }
        $("#"+opts.objId).find("ul:first").css({marginTop:0});
      });
    };
    
    //鼠标滑上焦点图时停止自动播放，滑出时开始自动播放
    $("#"+opts.objId).hover(function() {
     clearInterval(opts.picTimer);
    },function() {
     opts.picTimer = setInterval(function() {
      // 判断执行横向或纵向滚动
      if(opts.isHorizontal)
       scrollLeft();
      else
       scrollUp();
     },opts.interval); // 自动播放的间隔，单位：毫秒
    }).trigger("mouseleave");
    }        
})

blatar

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jquery实现多行滚动代码，可以向左或向上滚动

html 文件gundong-0.1.html多行滚动jQuery循环新闻列表代码ul,li{margin:0;padding:0}img{border:0px;}a{text-decoration:none;border:0px;}/* 横向滚动 */#scrollDiv2{border:#ccc 1px solid;}#scrollD
复制链接

扫一扫