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 图片上传预览-兼容标准
Jun 01 Javascript
用Jquery选择器计算table中的某一列某一行的合计
Aug 13 Javascript
JavaScript中Function详解
Feb 27 Javascript
详解JavaScript函数
Dec 01 Javascript
EasyUI布局 高度自适应
Jun 04 Javascript
检查表单元素的值是否为空的实例代码
Jun 16 Javascript
jQuery事件绑定用法详解
Sep 08 Javascript
js插件实现图片滑动验证码
Sep 29 Javascript
js断点调试经验分享
Dec 08 Javascript
JavaScript实现简单随机点名器
Nov 21 Javascript
vue页面更新patch的实现示例
Mar 25 Javascript
详解vue高级特性
Jun 09 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
PHP内核探索:变量存储与类型使用说明
2014/01/30 PHP
PHP下载远程图片并保存到本地方法总结
2016/01/22 PHP
php+layui数据表格实现数据分页渲染代码
2019/10/26 PHP
静态的动态续篇之来点XML
2006/08/15 Javascript
写js时遇到的一些小问题
2010/12/06 Javascript
jquery实现网页查找功能示例分享
2014/02/12 Javascript
jQuery实现菜单感应鼠标滑动动画效果的方法
2015/02/28 Javascript
javascript实现五星评价代码(源码下载)
2015/08/11 Javascript
jquery实现select下拉框美化特效代码分享
2015/08/18 Javascript
谈谈jQuery Ajax用法详解
2015/11/27 Javascript
JavaScript的ExtJS框架中数面板TreePanel的使用实例解析
2016/05/21 Javascript
jquery分隔Url的param方法(推荐)
2016/05/25 Javascript
详解jquery validate实现表单验证 (正则表达式)
2017/01/18 Javascript
js中编码函数:escape,encodeURI与encodeURIComponent详解
2017/03/21 Javascript
webpack构建react多页面应用详解
2017/09/15 Javascript
vue登录路由验证的实现
2017/12/13 Javascript
vue将对象新增的属性添加到检测序列的方法
2018/02/24 Javascript
angularjs性能优化的方法
2018/09/05 Javascript
react 父子组件之间通讯props
2018/09/08 Javascript
JavaScript文档加载模式以及元素获取
2020/07/28 Javascript
Python实现的递归神经网络简单示例
2017/08/11 Python
Python修改文件往指定行插入内容的实例
2019/01/30 Python
解决django model修改添加字段报错的问题
2019/11/18 Python
基于Python批量生成指定尺寸缩略图代码实例
2019/11/20 Python
python构建指数平滑预测模型示例
2019/11/21 Python
python3+openCV 获取图片中文本区域的最小外接矩形实例
2020/06/02 Python
特色冷饮店创业计划书
2014/01/28 职场文书
学雷锋先进个人事迹
2014/05/26 职场文书
质监局领导班子践行群众路线整改方案
2014/10/26 职场文书
2014年销售内勤工作总结
2014/12/01 职场文书
酒店服务员岗位职责
2015/02/09 职场文书
2016年党员创先争优公开承诺书
2016/03/25 职场文书
Python自然语言处理之切分算法详解
2021/04/25 Python
MySQL中CURRENT_TIMESTAMP的使用方式
2021/11/27 MySQL
Java字符串逆序方法详情
2022/03/21 Java/Android
Golang 遍历二叉树
2022/04/19 Golang