首页
所有分类
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 Ajax文件上传(php)
Jun 16 Javascript
JavaScript读取中文cookie时的乱码问题的解决方法
Oct 14 Javascript
十分钟打造AutoComplete自动完成效果代码
Dec 26 Javascript
javascript 基础篇2 数据类型，语句，函数
Mar 14 Javascript
jQuery结合HTML5制作的爱心树表白动画
Feb 01 Javascript
JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】
May 10 Javascript
javascript 常用验证函数总结
Jun 28 Javascript
jquery实现简单的瀑布流布局
Dec 11 Javascript
关于vue利用postcss-pxtorem进行移动端适配的问题
Nov 20 Javascript
vue监听dom大小改变案例
Jul 29 Javascript
vue router返回到指定的路由的场景分析
Nov 10 Javascript
vue2实现provide inject传递响应式
May 21 Vue.js
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
reduce()(1) PIL(1) GCN(1) 裁剪图片(1) Flask(2) 鲲鹏(1) 信号同步(1) Python(3) 验证码(1) 进度条(1)
You might like
php防止sql注入简单分析
2015/03/18 PHP
两种php给图片加水印的实现代码
2020/04/18 PHP
在Laravel中使用GuzzleHttp调用第三方服务的API接口代码
2019/10/15 PHP
JavaScript Undefined，Null类型和NaN值区别
2008/10/22 Javascript
JavaScript中为什么null==0为false而null大于=0为true(个人研究)
2013/09/16 Javascript
js实现下拉框选择要显示图片的方法
2015/02/16 Javascript
JavaScript中连接操作Oracle数据库实例
2015/04/02 Javascript
js实现select二级联动下拉菜单
2020/04/17 Javascript
什么是JavaScript中的结果值?
2016/10/08 Javascript
jQuery手指滑动轮播效果
2016/12/22 Javascript
Bootstrap免费字体和图标网站(值得收藏)
2017/03/16 Javascript
JS 调试中常见的报错问题解决方法
2017/05/20 Javascript
JS实现留言板功能[楼层效果展示]
2017/12/27 Javascript
详解js的作用域、预解析机制
2018/02/05 Javascript
关于node-bindings无法在Electron中使用的解决办法
2018/12/18 Javascript
使用gulp构建前端自动化的方法示例
2018/12/25 Javascript
监控微信小程序中的慢HTTP请求过程详解
2019/07/05 Javascript
Vue数据驱动表单渲染,轻松搞定form表单
2019/07/19 Javascript
vue中利用three.js实现全景图的完整示例
2020/12/07 Vue.js
使用Python构建Hopfield网络的教程
2015/04/14 Python
Python实现简单的获取图片爬虫功能示例
2017/07/12 Python
python django使用haystack:全文检索的框架(实例讲解)
2017/09/27 Python
Python元字符的用法实例解析
2018/01/17 Python
Python 脚本获取ES 存储容量的实例
2018/12/27 Python
对Django url的几种使用方式详解
2019/08/06 Python
html5中监听canvas内部元素点击事件的三种方法
2019/04/28 HTML / CSS
Links of London官方网站：英国标志性的珠宝品牌
2017/04/09 全球购物
药剂学专业应届生自荐信
2013/09/29 职场文书
母亲七十大寿答谢词
2014/01/18 职场文书
小学生自我评价范文
2014/01/25 职场文书
倡议书的写法
2014/08/30 职场文书
2014领导班子“四风问题”对照检查材料思想汇报（执法局）
2014/09/21 职场文书
交警正风肃纪剖析材料
2014/10/29 职场文书
2015年政协委员工作总结
2015/05/20 职场文书
完美解决golang go get私有仓库的问题
2021/05/05 Golang
python ansible自动化运维工具执行流程
2021/06/24 Python