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 相关文章推荐
不同的jQuery API来处理不同的浏览器事件
Dec 09 Javascript
JS验证邮箱格式是否正确的代码
Dec 05 Javascript
一个Action如何调用两个不同的方法
May 22 Javascript
Node.js中的模块机制学习笔记
Nov 04 Javascript
JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
Aug 05 Javascript
关于Vue.js 2.0的Vuex 2.0 你需要更新的知识库
Nov 30 Javascript
vue项目中添加单元测试的方法
Jul 21 Javascript
使用JavaScript破解web
Sep 28 Javascript
vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)
Mar 07 Javascript
JS中准确判断变量类型的方法
Jun 01 Javascript
JS实现前端动态分页码代码实例
Jun 02 Javascript
Vue proxyTable配置多个接口地址,解决跨域的问题
Sep 11 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
解决dede生成静态页和动态页转换的一些问题,及火车采集入库生成动态的办法
2007/03/29 PHP
PHP 第二节 数据类型之数值型
2012/04/28 PHP
(PHP实现)只使用++运算实现加法,减法,乘法,除法
2013/06/27 PHP
PHP加密3DES报错 Call to undefined function: mcrypt_module_open() 如何解决
2016/04/17 PHP
yii2中结合gridview如何使用modal弹窗实例代码详解
2016/06/12 PHP
点击隐藏页面左栏或右栏实现js代码
2013/04/01 Javascript
jquery滚动条插件jScrollPane的使用介绍
2013/11/08 Javascript
jQuery ajax serialize() 方法使用示例
2014/11/02 Javascript
jQuery中:input选择器用法实例
2015/01/03 Javascript
EasyUI实现第二层弹出框的方法
2015/03/01 Javascript
input file上传 图片预览功能实例代码
2016/10/25 Javascript
jQGrid Table操作列中点击【操作】按钮弹出按钮层的实现代码
2016/12/05 Javascript
JavaScript获取中英文混合字符串长度的方法示例
2017/02/04 Javascript
vue 2.0路由之路由嵌套示例详解
2017/05/08 Javascript
vue mint-ui tabbar变组件使用
2018/05/04 Javascript
JavaScript实现异步图像上传功能
2018/07/12 Javascript
webpack项目使用eslint建立代码规范实现
2019/05/16 Javascript
layui+jquery支持IE8的表格分页方法
2019/09/28 jQuery
使用p5.js实现动态GIF图片临摹重现
2019/10/23 Javascript
webgl实现物体描边效果的方法介绍
2019/11/27 Javascript
开发Node CLI构建微信小程序脚手架的示例
2020/03/27 Javascript
vue 解决mintui弹窗弹起来,底部页面滚动bug问题
2020/11/12 Javascript
[44:40]Serenity vs Pain 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python安装第三方库及常见问题处理方法汇总
2016/09/13 Python
python使用pandas实现数据分割实例代码
2018/01/25 Python
Python中实例化class的执行顺序示例详解
2018/10/14 Python
对Python3 pyc 文件的使用详解
2019/02/16 Python
Python如何实现强制数据类型转换
2019/11/22 Python
基于Python3读写INI配置文件过程解析
2020/07/23 Python
浅谈python 类方法/静态方法
2020/09/18 Python
教师推荐信范文
2013/11/24 职场文书
店铺转让协议书(2014版)
2014/09/23 职场文书
2014-2015学年工作总结
2014/11/27 职场文书
工作失职检讨书
2015/01/26 职场文书
颐和园导游词400字
2015/01/30 职场文书
民主评议党员个人总结
2015/02/13 职场文书