首页
所有分类
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 相关文章推荐
jquery tab标签页的制作
May 10 Javascript
Jquery封装tab自动切换效果的具体实现
Jul 13 Javascript
sails框架的学习指南
Dec 22 Javascript
jQuery大于号(&gt;)选择器的作用解释
Jan 13 Javascript
js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)
Mar 09 Javascript
深入浅析JSON.parse()、JSON.stringify()和eval()的作用详解
Apr 03 Javascript
购物车前端开发（jQuery和bootstrap3）
Aug 27 Javascript
JS中append字符串包含onclick无效传递参数失败的解决方案
Dec 26 Javascript
jquery Banner轮播选项卡
Dec 26 Javascript
jQuery实现的简单前端搜索功能示例
Oct 28 jQuery
如何给element添加一个抽屉组件的方法步骤
Jul 14 Javascript
原生js代码能实现call和bind吗
Jul 31 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
KVM(1) 本地化存储(1) Set接口(1) Vue(10) persistedstate(1) vuex(1) 自定义组件(1) click(1) Storage(1) HashSet集合(1)
You might like
PHP如何编写易读的代码
2007/07/10 PHP
Zend framework处理一个http请求的流程分析
2010/02/08 PHP
php程序的国际化实现方法（利用gettext）
2011/08/14 PHP
ci检测是ajax还是页面post提交数据的方法
2014/11/10 PHP
PHP中error_log()函数的使用方法
2015/01/20 PHP
简单了解WordPress开发中update_option()函数的用法
2016/01/11 PHP
php简单截取字符串代码示例
2016/10/19 PHP
使用jQuery清空file文件域的解决方案
2013/04/12 Javascript
jquery动态增加text元素以及删除文本内容实例代码
2013/07/01 Javascript
js获取滚动距离的方法
2015/05/30 Javascript
JS非Alert实现网页右下角“未读信息”效果弹窗
2015/09/26 Javascript
JavaScript知识点总结(十)之this关键字
2016/05/31 Javascript
AngularJS压缩JS技巧分析
2016/11/08 Javascript
jquery仿微信聊天界面
2017/05/06 jQuery
vue中将网页打印成pdf实例代码
2017/06/15 Javascript
在一般处理程序（ashx）中弹出js提示语
2017/08/16 Javascript
vscode下的vue文件格式化问题
2018/11/28 Javascript
JS获取今天是本月第几周、本月共几周、本月有多少天、是今年的第几周、是今年的第几天的示例代码
2018/12/05 Javascript
深入浅析nuxt.js基于ssh的vue通用框架
2019/05/21 Javascript
JavaScript 防盗链的原理以及破解方法
2020/12/29 Javascript
使用python装饰器验证配置文件示例
2014/02/24 Python
python使用三角迭代计算圆周率PI的方法
2015/03/20 Python
Python 装饰器实现DRY(不重复代码)原则
2018/03/05 Python
在python带权重的列表中随机取值的方法
2019/01/23 Python
PYQT5实现控制台显示功能的方法
2019/06/25 Python
使用Puppeteer爬取微信文章的实现
2020/02/11 Python
Matplotlib中rcParams使用方法
2021/01/05 Python
如何强制垃圾回收
2015/10/06 面试题
大学生职业生涯规划方案
2014/01/03 职场文书
写给女朋友的道歉信
2014/01/08 职场文书
简历上的自我评价
2014/02/03 职场文书
法制宣传月活动方案
2014/05/11 职场文书
使用python向MongoDB插入时间字段的操作
2021/05/18 Python
分析SQL窗口函数之聚合窗口函数
2022/04/21 Oracle
从原生JavaScript到React深入理解
2022/07/23 Javascript
基于Python实现nc批量转tif格式
2022/08/14 Python