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操作xml
Nov 04 Javascript
javascript对数组的常用操作代码 数组方法总汇
Jan 27 Javascript
javascript实现控制的多级下拉菜单
Jul 05 Javascript
js中实现字符串和数组的相互转化详解
Jan 24 Javascript
ui组件之input多选下拉实现方法(带有搜索功能)
Jul 14 Javascript
JS实现六位字符密码输入器功能
Aug 19 Javascript
jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示问题分析
Oct 30 Javascript
canvas绘制一个常用的emoji表情
Mar 30 Javascript
JavaScript 自定义事件之我见
Sep 25 Javascript
Vue列表渲染的示例代码
Nov 01 Javascript
React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析
Jan 06 Javascript
HTML+JS实现“代码雨”效果源码(黑客帝国文字下落效果)
Mar 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
libmysql.dll与php.ini是否真的要拷贝到c:\windows目录下呢
2010/03/15 PHP
PHP代码优化之成员变量获取速度对比
2014/02/28 PHP
原生js实现给指定元素的后面追加内容
2013/04/10 Javascript
Js 代码中,ajax请求地址后加随机数防止浏览器缓存的原因
2013/05/07 Javascript
javascript特殊用法示例介绍
2013/11/29 Javascript
JavaScript中用toString()方法返回时间为字符串
2015/06/12 Javascript
JQuery给select添加/删除节点的实现代码
2016/04/26 Javascript
静态页面html中跳转传值的JS处理技巧
2016/06/22 Javascript
Bootstrap Validator 表单验证
2016/07/25 Javascript
利用浮层使select不可选的实现方法
2016/12/03 Javascript
使用BootStrap实现标签切换原理解析
2017/03/14 Javascript
如何在JavaScript中谨慎使用代码注释
2019/06/21 Javascript
three.js利用卷积法如何实现物体描边效果
2019/11/27 Javascript
Vue2.0 ES6语法降级ES5的操作
2020/10/30 Javascript
微信小程序onShareTimeline()实现分享朋友圈
2021/01/07 Javascript
[43:32]Winstrike vs VGJ.S 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
python修改操作系统时间的方法
2015/05/18 Python
实例讲解Python爬取网页数据
2018/07/08 Python
Python定时任务随机时间执行的实现方法
2019/08/14 Python
python颜色随机生成器的实例代码
2020/01/10 Python
django 多数据库及分库实现方式
2020/04/01 Python
python 写一个水果忍者游戏
2021/01/13 Python
html5手机键盘弹出收起的处理
2020/01/20 HTML / CSS
美国内衣第一品牌:Hanes(恒适)
2016/07/29 全球购物
中国宠物用品商城:E宠商城
2016/08/27 全球购物
编写strcpy函数
2014/06/24 面试题
环境科学专业个人求职信
2013/09/26 职场文书
大学生年度自我鉴定
2013/10/31 职场文书
求职信模版
2013/11/30 职场文书
法定代表人授权委托书
2014/09/19 职场文书
五年级学生评语大全
2014/12/26 职场文书
大学生求职意向书
2015/05/11 职场文书
经费申请报告
2015/05/15 职场文书
投资申请报告
2015/05/19 职场文书
go mod 安装依赖 unkown revision问题的解决方案
2021/05/06 Golang
「魔导具师妲莉亚永不妥协~从今天开始的自由职人生活~」1、2卷发售宣传CM公开
2022/03/21 日漫