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 相关文章推荐
[Web]防止用户复制页面内容和另存页面的方法
Feb 06 Javascript
JS代码同步文本框内容的实例方法
Jul 12 Javascript
JavaScript调用后台的三种方法实例
Oct 17 Javascript
Javascript aop(面向切面编程)之around(环绕)分析
May 01 Javascript
HTML5 实现的一个俄罗斯方块实例代码
Sep 19 Javascript
js document.getElementsByClassName的使用介绍与自定义函数
Nov 25 Javascript
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
Oct 12 Javascript
React SSR样式及SEO的实践
Oct 22 Javascript
详解vue-video-player使用心得(兼容m3u8)
Aug 23 Javascript
JS实现星星海特效
Dec 24 Javascript
node创建Vue项目步骤详解
Mar 06 Javascript
解决vue addRoutes不生效问题
Aug 04 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 Directory 函数的详解
2013/03/07 PHP
PHP中通过fopen()函数访问远程文件示例
2014/11/18 PHP
php程序员应具有的7种能力小结
2014/11/27 PHP
PHP开发APP端微信支付功能
2017/02/17 PHP
PHP如何实现订单的延时处理详解
2017/12/30 PHP
js压缩工具 yuicompressor 使用教程
2010/03/31 Javascript
一个js的tab切换效果代码[代码分离]
2010/04/11 Javascript
xss文件页面内容读取(解决)
2010/11/28 Javascript
基于JQuery的抓取博客园首页RSS的代码
2011/12/01 Javascript
js如何获取file控件的完整路径具体实现代码
2013/05/15 Javascript
jQuery.extend()、jQuery.fn.extend()扩展方法示例详解
2014/05/08 Javascript
JavaScript设计模式之策略模式实例
2014/10/10 Javascript
浅谈javascript中createElement事件
2014/12/05 Javascript
jQuery中attr()方法用法实例
2015/01/05 Javascript
jQuery实现跨域iframe接口方法调用
2015/03/14 Javascript
原生js的数组除重复简单实例
2016/05/24 Javascript
基于JQuery实现的跑马灯效果(文字无缝向上翻动)
2016/12/02 Javascript
BootStrap3中模态对话框的使用
2017/01/06 Javascript
js实现动态显示时间效果
2017/03/06 Javascript
详解IOS微信上Vue单页面应用JSSDK签名失败解决方案
2018/11/14 Javascript
VUE组件中的 Drawer 抽屉实现代码
2019/08/06 Javascript
Python re模块介绍
2014/11/30 Python
python中日期和时间格式化输出的方法小结
2015/03/19 Python
Python字符串格式化的方法(两种)
2017/09/19 Python
python 实现Flask中返回图片流给前端展示
2020/01/09 Python
CSS3的Flexbox布局的简明入门指南
2016/04/08 HTML / CSS
委托公证书范本
2014/04/03 职场文书
公司寄语大全
2014/04/10 职场文书
计算机网络专业自荐信
2014/07/04 职场文书
明星员工获奖感言
2014/08/14 职场文书
小学生毕业评语
2014/12/26 职场文书
售票员岗位职责
2015/02/15 职场文书
求职信格式范文
2015/03/19 职场文书
2015教师年度工作总结范文
2015/04/07 职场文书
Python类方法总结讲解
2021/07/26 Python
SQL Server表分区删除详情
2021/10/16 SQL Server