首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

纯javascript实现四方向文本无缝滚动效果

Posted in Javascript onJune 16, 2015

实现一个文本无缝滚动的效果：

<!DOCTYPE html>  
<!--[if lt IE 7 ]> <html lang="zh-CN" class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html lang="zh-CN" class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="zh-CN" class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="zh-CN" class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="zh-CN"> <!--<![endif]-->
<head>
<title>文字滚动</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

<style type="text/css">
*{margin:0;padding:0;}
body{padding:20px;}
 .textbox{border:1px solid #ddd;width:auto;overflow: hidden;}
 .textbox ul{list-style: none;position: relative;}
 .textbox ul li{padding:5px 0;}
</style>
</head>
<body class="home-page">

  <div id="textbox" class="textbox">
    <ul>
      <li>汽车 | 运动B级车降3万5 </li>
      <li>家居 | 这么厉害的装修 女人真的要坐不住了</li>
      <li>教育 | 各省前三报考华工重奖10万元/人</li>
      <li>汽车 | 运动B级车降3万5 平行进口车加价11万</li>
      <li>健康 | 滥用激素酿苦果 14岁男孩10年不长个儿</li>
      <li>数码 | 最新手机报价 说好的宽带降费提速呢？</li>
      <li>汽车 | 平行进口车加价11万</li>
      <li>汽车 | 运动B级车降3万5</li>
      <li>汽车 | 平行进口车加价11万</li>
      <li>运动 | 恒大亚冠生死战 猜比分赢正版球衣</li>
    </ul>
    <a href="#" class="btnPrev">向左</a>
    <a href="#" class="btnNext">向右</a>
  </div>
  <br>
  <br>
  <div id="textbox2" class="textbox">
    <ul>
      <li>汽车 | 运动B级车降3万5 </li>
      <li>家居 | 这么厉害的装修 女人真的要坐不住了</li>
      <li>教育 | 各省前三报考华工重奖10万元/人</li>
      <li>汽车 | 运动B级车降3万5 平行进口车加价11万</li>
      <li>健康 | 滥用激素酿苦果 14岁男孩10年不长个儿</li>
      <li>数码 | 最新手机报价 说好的宽带降费提速呢？</li>
      <li>汽车 | 平行进口车加价11万</li>
      <li>汽车 | 运动B级车降3万5</li>
      <li>汽车 | 平行进口车加价11万</li>
      <li>运动 | 恒大亚冠生死战 猜比分赢正版球衣</li>
    </ul>
    <a href="#" class="btnPrev">向上</a>
    <a href="#" class="btnNext">向下</a>
  </div>
  <script type="text/javascript" src="script/jquery-1.11.1.min.js"></script>
  <script type="text/javascript">

    //四方向无缝滚动
    scroll('#textbox',{vis:2,btnHidden:false,dir:'prev',type:'h'});
    scroll('#textbox2',{vis:3,btnHidden:false,dir:'prev',type:'v'});

    function scroll(container,options){
      var box = $(container);
      var boxUl = box.find('ul').eq(0);
      var LiHeight = 0; //不包含克隆li列表高度
      var cloneLiHeight = 0; //包含克隆li列表高度
      var LiWidth = 0; //不包含克隆li列表宽度
      var cloneLiWidth = 0; //包含克隆li列表宽度
      var Lis = boxUl.children();
      var btnPrev = box.find('.btnPrev');
      var btnNext = box.find('.btnNext');

      //默认参数
      var defult= {
        vis : 2, //显示个数
        autoPlay:true, //自动播放
        speed :50, //滚动速度
        dir:'prev', //滚动方向
        btnHidden:false, //按钮是否隐藏
        type:'v' // 水平或者垂直方向

      };
      var opt = $.extend({},defult,options);


      //构建DOM结构
      var lastClone=0; //最后克隆元素
      var lastCloneHeight=0;//最后克隆元素高度
      var allCloneHeight=0;//全部克隆元素总高度
      var lastCloneWidth=0;
      var allCloneWidth=0;
      var visHeight=0; //可视高度
      var visWidth=0;
      var boxUl_wrap;

      if(opt.type === "v"){ //垂直方向
        Lis.each(function(){
          $(this).height($(this).height());
          LiHeight += $(this).outerHeight(true);
        });
        lastClone= boxUl.children(':last').clone().addClass('clone').prependTo(boxUl);
        lastCloneHeight = lastClone.outerHeight(true);
        allCloneHeight = lastClone.outerHeight(true);

        for(var i = 0; i < opt.vis ; i++){
          Lis.eq(i).clone().addClass('clone').appendTo(boxUl);
          allCloneHeight += Lis.eq(i).outerHeight(true);
        }

        visHeight = allCloneHeight - lastCloneHeight;
        cloneLiHeight = LiHeight + allCloneHeight;
        
        boxUl_wrap = $('<div></div>').css({'width':'100%','height':visHeight,'overflow':'hidden','position':'relative'}).attr('id','ulWrap');
        boxUl.css({'height':cloneLiHeight,'top':-lastCloneHeight}).wrap(boxUl_wrap);

      }else if(opt.type ==="h"){ //水平方向
        Lis.css({'whiteSpace':'nowrap','float':'left','paddingRight':'10px'});
        Lis.each(function(){
          $(this).width($(this).width());
          LiWidth += $(this).outerWidth(true);
        });

        lastClone= boxUl.children(':last').clone().addClass('clone').prependTo(boxUl);
        lastCloneWidth= lastClone.outerWidth(true);
        allCloneWidth = lastClone.outerWidth(true);

        for(var j = 0; j < opt.vis ; j++){
          Lis.eq(j).clone().addClass('clone').appendTo(boxUl);
          allCloneWidth += Lis.eq(j).outerWidth(true);
        }
        visHeight = Lis.eq(0).outerHeight(true);
        visWidth = allCloneWidth - lastCloneWidth;
        cloneLiWidth = LiWidth + allCloneWidth;
        
        boxUl_wrap = $('<div></div>').css({'width':visWidth,'height':visHeight,'overflow':'hidden','position':'relative'}).attr('id','ulWrap');
        boxUl.css({'width':cloneLiWidth,'left':-lastCloneWidth}).wrap(boxUl_wrap);
        box.css({'width':visWidth});
      }


      //添加事件处理
      var timer = null;
      var scrollTop = function(){
        clearInterval(timer);
          timer = setInterval(function(){
            var tmp = parseInt(boxUl.css('top').replace('px',""));
            tmp--;
            boxUl.animate({'top':tmp},0,function(){
              if(tmp <= -(LiHeight + lastCloneHeight)){
                boxUl.css('top',-lastCloneHeight);
              }
            });
          },opt.speed);
      };

      var scrollDown = function(){
        clearInterval(timer);
          timer = setInterval(function(){
            var tmp = parseInt(boxUl.css('top').replace('px',""));
            tmp++;
            boxUl.animate({'top':tmp},0,function(){
              if(tmp >= 0){
                boxUl.css('top',-(LiHeight));
              }
            });
          },opt.speed);
      };

      var scrollLeft = function(){
        clearInterval(timer);
          timer = setInterval(function(){
            var tmp = parseInt(boxUl.css('left').replace('px',""));
            tmp--;
            boxUl.animate({'left':tmp},0,function(){
              if(tmp <= -(LiWidth + lastCloneWidth)){
                boxUl.css('left',-(lastCloneWidth));
              }
            });
          },opt.speed);
      };
      
      var scrollRight = function(){
        clearInterval(timer);
          timer = setInterval(function(){
            var tmp = parseInt(boxUl.css('left').replace('px',""));
            tmp++;
            boxUl.animate({'left':tmp},0,function(){
              if(tmp >= 0){
                boxUl.css('left',-(LiWidth));
              }
            });
          },opt.speed);
      };

      var scrollType = function(type,dir){
        if(Lis.length >= opt.vis){ //显示个数不能多于列表个数，否则不显示效果
          var sdir = typeof dir!=="undefined" ? dir : opt.dir;
          switch(type){
            case "v":
              if(sdir == "prev"){scrollTop();}else{scrollDown();}
              break;
            case "h":
              if(sdir == "prev"){scrollLeft();}else{scrollRight();}
          }
        }
      };


      if(opt.autoPlay){
        scrollType(opt.type);
      }

      //添加事件处理
      box.find('#ulWrap').hover(function(){
        clearInterval(timer);
      },function(){
        scrollType(opt.type);
      });

      //按钮是否隐藏
      if(!opt.btnHidden){

        btnPrev.unbind('mouseover');
        btnNext.unbind('mouseover');

        btnPrev.mouseover(function(){
          scrollType(opt.type,"prev");
        });
        btnNext.mouseover(function(){
          scrollType(opt.type,"next");
        });
      }else{
        btnPrev.hide();
        btnNext.hide();
      }

    }
  </script>
</body>
</html>

一些???：

本地?y??]???，但是 通?document.write()把代??入?绦泻螅?怪蹦Ｊ较碌?i的高度height()?取?????。原因不明,非常不解..

以上所述就是本文的全部内容了，希望大家能够喜欢。

纯javascript实现四方向文本无缝滚动效果

- Author -

hebedich

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript 面向对象全新理练之继承与多态
Dec 03 Javascript
JavaScript中的面向对象介绍
Jun 30 Javascript
jquery制作居中遮罩层效果分享
Feb 21 Javascript
jQuery $.extend()用法总结
Jun 15 Javascript
用JavaScript判断CSS浏览器类型前缀的两种方法
Oct 08 Javascript
CascadeView级联组件实现思路详解(分离思想和单链表)
Apr 12 Javascript
最简单的tab切换实例代码
May 13 Javascript
JS判断浏览器是否安装flash插件的简单方法
Sep 13 Javascript
JavaScript实现向select下拉框中添加和删除元素的方法
Mar 07 Javascript
Jquery把获取到的input值转换成json
May 15 jQuery
Javascript防止图片拉伸的自适应处理方法
Dec 26 Javascript
利用PHP实现递归删除链表元素的方法示例
Oct 23 Javascript
Bootstrap基础学习
Jun 16 #Javascript
简述JavaScript的正则表达式中test()方法的使用
Jun 16 #Javascript
常用DOM整理
Jun 16 #Javascript
AngularJS学习笔记之ng-options指令
Jun 16 #Javascript
在JavaScript的正则表达式中使用exec()方法
Jun 16 #Javascript
JavaScript正则表达式之multiline属性的应用
Jun 16 #Javascript
AngularJS学习笔记之基本指令(init、repeat)
Jun 16 #Javascript
scss(1) 事件调度器(1) sched(1) vue-router-link(1) 项目打包(2) vue-cli3.x(1) 监听(2) okenizer(1) re模块(2) watch(1)
You might like
二招解决php乱码问题
2012/03/25 PHP
PHP 类相关函数的使用详解
2013/05/10 PHP
php将session放入memcached的设置方法
2014/02/14 PHP
PHP错误Parse error: syntax error, unexpected end of file in test.php on line 12解决方法
2014/06/23 PHP
thinkPHP模板中for循环与switch语句用法示例
2016/11/30 PHP
PHP使用Nginx实现反向代理
2017/09/20 PHP
php上传图片并给图片打上透明水印的代码
2010/06/07 Javascript
JSONP之我见
2015/03/24 Javascript
js实现类似jquery里animate动画效果的方法
2015/04/10 Javascript
jQuery判断一个元素是否可见的方法
2015/06/05 Javascript
jQuery实现响应鼠标滚动的动感菜单效果
2015/09/21 Javascript
jquery实现手风琴效果
2015/11/20 Javascript
jQuery插件实现适用于移动端的地址选择器
2016/02/18 Javascript
BootStrap中的table实现数据填充与分页应用小结
2016/05/26 Javascript
Node.js检测端口(port)是否被占用的简单示例
2016/09/29 Javascript
js设置文字颜色的方法示例
2016/12/30 Javascript
Koa2微信公众号开发之本地开发调试环境搭建
2018/05/16 Javascript
详解vue配置后台接口方式
2019/03/29 Javascript
[41:52]2018DOTA2亚洲邀请赛3月29日 小组赛A组 TNC VS OpTic
2018/03/30 DOTA
[32:17]完美世界DOTA2联赛循环赛LBZS vs Forest第二场 10月30日
2020/10/31 DOTA
Python基本数据类型详细介绍
2014/03/11 Python
Python实现获取操作系统版本信息方法
2015/04/08 Python
深入理解Python分布式爬虫原理
2017/11/23 Python
python 实现对文件夹内的文件排序编号
2018/04/12 Python
对Python发送带header的http请求方法详解
2019/01/02 Python
[机器视觉]使用python自动识别验证码详解
2019/05/16 Python
Python实现二叉树前序、中序、后序及层次遍历示例代码
2019/05/18 Python
将pytorch转成longtensor的简单方法
2020/02/18 Python
Python count函数使用方法实例解析
2020/03/23 Python
浅谈keras中的后端backend及其相关函数(K.prod,K.cast)
2020/06/29 Python
鞋子女王塔玛拉·梅隆同名奢侈品牌：Tamara Mellon
2017/11/22 全球购物
SK-II神仙水美国官网：SK-II美国
2020/02/25 全球购物
煤矿开采专业求职信
2014/07/08 职场文书
严以用权学习心得体会
2016/01/12 职场文书
2016大学生暑期三下乡心得体会
2016/01/23 职场文书
golang内置函数len的小技巧
2021/07/25 Golang