JS实现的自定义水平滚动字体插件完整实例


Posted in Javascript onJune 17, 2016

本文实例讲述了JS自定义水平滚动字体插件。分享给大家供大家参考,具体如下:

<script type="text/javascript">
  $(function(){
    var setting = {
      content : "  @@@@@浮动文字####  ",
      overStop : true,
      width:"100px",
      targetId:"huangbiao",
      //显示之后的回调函数
      onAfterShow : function(obj){
        obj.setting.width = "20px";
//        alert("dddd");
        //修改配置文件之后重新设置
//        obj.init();
        //删除动态添加的内容
//        obj.remove();
      }
    };
    var ooo = new fontMove(setting);
    //重新设置
//    ooo.setting.width = "20px;"
//    ooo.init();
  });
  /*
  原理说明:
  1、top父div 是隐藏滚动条的
  2、二级DIV(top 父div 的子 div )宽度是 8000%
  3、三级子div有两个,分别是div1(最左边) 和 div2(第二个左边) 且节点内容完全一样,分别都是向left浮动
  4、设置一个定时器,top div的滚动条向左滚动1px
  5、一旦top div滚动条的长度 大于或者等于 div2的滚动条的距离,就让top div的滚动条的距离为0
   */
  function fontMove(userSettingObj){
    var that = this;
    //用时间戳作为id值
    var timestamp = new Date().getTime();
    this.setting = {
      //滚动的文字内容
      content : "浮动文字",
      //滚动条显示的宽度
      width:"200px",
      //每30毫秒执行一次
      speed : 30,
      //鼠标悬浮是否停止,true是,false为不停,默认是true
      overStop : true,
      //滚动条的ID值
      objId : timestamp,
      //将空间存放的目标位置,如果为"",则默认是放在body标签的最后面
      targetId : "",
      onAfterShow:function(){
      }
    };
    //得到用户的配置文件
    this.setting = $.extend(this.setting,userSettingObj);
    //检查配置文件的参数
    this.checkParam = function(){
    }
    //扩展插件
    this.callback = function(myfun){
      if(typeof myfun == "function"){
        //this 代表callback ,因此需要使用 parent
        myfun.call(that);
      }
    }
    this.remove = function(){
      $("#"+that.setting.objId).remove();
    }
    this.init = function(){
      //所有想获取配置文件的方法是使用that.setting
      var domStr = '<div id="' + that.setting.objId + '" style="overflow:hidden;width:'+that.setting.width+'">'+
       '<div style="width:8000%;">'+
         '<div id="' + that.setting.objId + '_div1" style="float:left;">'+that.setting.content+
         '</div>'+
         '<div id="' + that.setting.objId + '_div2" style="float:left;">'+that.setting.content+'</div>'+
         '</div>'+
       '</div>'+
     '</div>';
      //判断是否指明了内容存放的位置
      if(""==that.setting.targetId){
        $("body").append(domStr);
      }else{
        $("#"+that.setting.targetId).html(domStr);
      }
      //内容容器div
      var thatDiv = document.getElementById(that.setting.objId);
      //左边第一个子div
      var sonDiv1 = document.getElementById(that.setting.objId + '_div1');
      //左边第二个子div
      var sonDiv2 = document.getElementById(that.setting.objId + '_div2');
      this.Marquee = function(){
        //利用定时器改变值
//        console.log("thatDiv.scrollLeft : " + thatDiv.scrollLeft);
//        //sonDiv1.offsetWidth 值固定不变
//        console.log("sonDiv1.offsetWidth : " + sonDiv1.offsetWidth);
//        //值永远为0,因为它没有滚动条
//        console.log("sonDiv1.scrollLeft : " + sonDiv1.scrollLeft);
//        //sonDiv2.offsetWidth 值固定不变
//        console.log("sonDiv2.offsetWidth : " + sonDiv2.offsetWidth);
//        //值永远为0,因为它没有滚动条
//        console.log("sonDiv2.scrollLeft : " + sonDiv2.scrollLeft);
        //top div滚动条的距离 是否 大于 第一个子div的水平距离,即是否大于内容的实际距离
        if(thatDiv.scrollLeft - sonDiv1.offsetWidth >= 0){
          //滚动条的长度重新清0,相当于又是从第一个div显示,然后向左滚动
          thatDiv.scrollLeft = thatDiv.scrollLeft - sonDiv1.offsetWidth;
        }
        else{
          thatDiv.scrollLeft++;
        }
      }
      var myvar=setInterval(that.Marquee,that.setting.speed);
      //鼠标悬浮,是否停止运动
      if(that.setting.overStop){
        thatDiv.onmouseover=function(){clearInterval(myvar);}
        thatDiv.onmouseout=function (){myvar=setInterval(Marquee,30);}
      }
      if(typeof that.setting.onAfterShow == "function"){
        that.setting.onAfterShow.call(that,that);
      }
    }
    //完成初始化
    this.init();
    //返回方法本身,这样可以获取所有配置this的参数
    return this;
  }
</script>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript实现十六进制颜色值(HEX)和RGB格式相互转换
Jun 20 Javascript
图解JavaScript中的this关键字
May 28 Javascript
JS中如何实现点击a标签返回页面顶部的问题
Jan 19 Javascript
微信小程序 Nginx环境配置详细介绍
Feb 14 Javascript
Angular 4依赖注入学习教程之ValueProvider的使用(七)
Jun 04 Javascript
vue-router+nginx 非根路径配置方法
Jun 30 Javascript
Layui数据表格之获取表格中所有的数据方法
Aug 20 Javascript
elementUI select组件使用及注意事项详解
May 29 Javascript
vue实现下拉加载其实没那么复杂
Aug 13 Javascript
JavaScript数组排序功能简单实现
May 14 Javascript
js获取url页面id,也就是最后的数字文件名
Sep 25 Javascript
javascript对象3个属性特征
Nov 17 Javascript
基于JS实现导航条之调用网页助手小精灵的方法
Jun 17 #Javascript
基于JS实现导航条flash导航条
Jun 17 #Javascript
基于JS代码实现导航条弹出式悬浮菜单
Jun 17 #Javascript
Javascript中的数组常用方法解析
Jun 17 #Javascript
iframe中使用jquery进行查找的方法【案例分析】
Jun 17 #Javascript
JS检测页面中哪个HTML标签触发点击事件的方法
Jun 17 #Javascript
jquery.qtip提示信息插件用法简单实例
Jun 17 #Javascript
You might like
Zend studio for eclipse中使php可以调用mysql相关函数的设置方法
2008/10/13 PHP
利用ThinkPHP内置的ThinkAjax实现异步传输技术的实现方法
2011/12/19 PHP
php中一个有意思的日期逻辑处理
2012/03/25 PHP
基于php和mysql的简单的dao类实现crud操作功能
2014/01/27 PHP
php上传中文文件名乱码问题处理方案
2015/02/03 PHP
CentOS 7.2 下编译安装PHP7.0.10+MySQL5.7.14+Nginx1.10.1的方法详解(mini版本)
2016/09/01 PHP
php实现的二叉树遍历算法示例
2017/06/15 PHP
PHP设计模式(三)建造者模式Builder实例详解【创建型】
2020/05/02 PHP
一个js实现的所谓的滑动门
2007/05/23 Javascript
解析js原生方法创建表格效率测试
2013/07/08 Javascript
JS实现横向拉伸动感伸缩菜单效果代码
2015/09/04 Javascript
JS事件添加和移出的兼容写法示例
2016/06/20 Javascript
基于jQuery实现Accordion手风琴自定义插件
2020/10/13 Javascript
Bootstrap基本模板的使用和理解1
2016/12/14 Javascript
详解从angular-cli:1.0.0-beta.28.3升级到@angular/cli:1.0.0
2017/05/22 Javascript
angular2 ng build部署后base文件路径问题详细解答
2017/07/15 Javascript
react-native之ART绘图方法详解
2017/08/08 Javascript
JavaScript闭包和回调详解
2017/08/09 Javascript
浅谈react受控组件与非受控组件(小结)
2018/02/09 Javascript
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
2019/08/17 Javascript
Vuex实现数据增加和删除功能
2019/11/11 Javascript
在arcgis使用python脚本进行字段计算时是如何解决中文问题的
2015/10/18 Python
Python基于pygame实现图片代替鼠标移动效果
2015/11/11 Python
python中如何使用正则表达式的非贪婪模式示例
2017/10/09 Python
示例详解Python3 or Python2 两者之间的差异
2018/08/23 Python
python机器学习之KNN分类算法
2018/08/29 Python
基于python实现百度翻译功能
2019/05/09 Python
深入了解Python 方法之类方法 &amp; 静态方法
2020/08/17 Python
Lyle & Scott苏格兰金鹰官网:英国皇室御用品牌
2018/05/09 全球购物
驾驶员岗位职责
2014/01/29 职场文书
2014年消防工作实施方案
2014/02/20 职场文书
船舶工程技术专业求职信
2014/08/07 职场文书
校园广播稿精选
2014/10/01 职场文书
六年级作文之自救
2019/12/19 职场文书
【TED出品】天梯非主流开心游1700 划水骑士
2022/03/31 魔兽争霸
V Rising 服务器搭建图文教程
2022/06/16 Servers