纯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()把代??入?绦泻螅?怪蹦J较碌?i的高度height()?取?????。原因不明,非常不解..

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

Javascript 相关文章推荐
30个精美的jQuery幻灯片效果插件和教程
Aug 23 Javascript
Jquery实现点击切换图片并隐藏显示内容(2种方法实现)
Apr 11 Javascript
jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换
Jul 01 Javascript
js setTimeout opener的用法示例详解
Oct 23 Javascript
cookie中的path与domain属性详解
Dec 18 Javascript
基于jQuery实现自动轮播旋转木马特效
Nov 02 Javascript
关于Jquery中的bind(),on()绑定事件方式总结
Oct 26 Javascript
jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码)
Dec 22 Javascript
关于JS解构的5种有趣用法
Sep 05 Javascript
vue.js+ElementUI实现进度条提示密码强度效果
Jan 18 Javascript
JavaScript鼠标悬停事件用法解析
May 15 Javascript
Javascript call及apply应用场景及实例
Aug 26 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
You might like
Dedecms常用函数解析
2008/02/01 PHP
PHP更新购物车数量(表单部分/PHP处理部分)
2013/05/03 PHP
Zend studio文件注释模板设置方法
2013/09/29 PHP
php接口和抽象类使用示例详解
2014/03/02 PHP
分享微信扫码支付开发遇到问题及解决方案-附Ecshop微信支付插件
2015/08/23 PHP
PHP中一个有趣的preg_replace函数详解
2018/08/15 PHP
php中的buffer缓冲区用法分析
2019/05/31 PHP
jQuery源码分析-05异步队列 Deferred 使用介绍
2011/11/14 Javascript
利用javascript解决图片缩放及其优化的代码
2012/05/23 Javascript
jquery表单验证使用插件formValidator
2012/11/10 Javascript
js+div实现图片滚动效果代码
2014/02/10 Javascript
jQuery+ajax实现鼠标单击修改内容的思路
2014/06/29 Javascript
node.js中的fs.chmod方法使用说明
2014/12/18 Javascript
jQuery模仿单选按钮选中效果
2016/06/24 Javascript
javascript将中国数字格式转换成欧式数字格式的简单实例
2016/08/02 Javascript
微信小程序遇到修改数据后页面不渲染的问题解决
2017/03/09 Javascript
js清除浏览器缓存的几种方法
2017/03/15 Javascript
javascript如何用递归写一个简单的树形结构示例
2017/09/06 Javascript
详谈js的变量提升以及使用方法
2018/10/06 Javascript
JavaScript实现选项卡效果的分析及步骤
2019/04/16 Javascript
如何封装Vue Element的table表格组件
2021/02/06 Vue.js
python33 urllib2使用方法细节讲解
2013/12/03 Python
Android应用开发中Action bar编写的入门教程
2016/02/26 Python
Python 安装setuptools和pip工具操作方法(必看)
2017/05/22 Python
python和mysql交互操作实例详解【基于pymysql库】
2019/06/04 Python
python3实现raspberry pi(树莓派)4驱小车控制程序
2020/02/12 Python
pycharm激活码免费分享适用最新pycharm2020.2.3永久激活
2020/11/25 Python
美国打印机墨水和碳粉购物网站:QuikShip Toner
2018/08/29 全球购物
毕业生的求职信范文分享
2013/12/04 职场文书
元旦联欢会感言
2014/03/04 职场文书
2014学校领导四风对照检查材料思想汇报
2014/09/23 职场文书
2014报到证办理个人委托书
2014/10/08 职场文书
2015年学生会干事工作总结
2015/04/09 职场文书
GitHub上77.9K的Axios项目有哪些值得借鉴的地方详析
2021/06/15 Javascript
动画「半妖的夜叉姬」新BD特典图公开
2022/03/22 日漫
彻底卸载VMware虚拟机的超详细步骤记录
2022/07/15 Servers