本文实例讲述了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查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年09月27日
2024年09月27日
- 纯音入心系列纯音乐《中央民族乐团-古筝传奇》1CD[MP3][253.1MB]
- 江玲.1989-这样你才爱我,是吗?【新作有声】【WAV+CUE】
- 郭美美.2010-我是郭美美【华纳】【WAV+CUE】
- 黄心懋1991-轻忧郁【滚石】【WAV+CUE】
- 群星.2000-大地金曲世纪回顾2CD【大地】【WAV+CUE】
- 王菲.1996-浮躁(2024环球MQA-UHQCD限量版)【环球】【WAV+CUE】
- 群星.2022-传家电视剧原声带【东阳欢娱】【FLAC分轨】
- 《摇滚教父 伍佰黄金精选 2CD》 [WAV+CUE][1GB]
- 《凤凰传奇 我从草原来》[WAV/分轨][400MB]
- 《叶倩文 真心真意过一生》[WAV+CUE][400MB]
- 潘越云.1985-世间女子(滚石25周年经典复刻版)【滚石】【WAV+CUE】
- 陈柏宇.2009-CANT.BE.HALF【SONY】【WAV+CUE】
- 李明依.1989-小女生【滚石】【WAV+CUE】
- 《李荣浩 新时代创作新人王》[WAV分轨][310MB]
- 《黑鸭子与马头琴 史上最动听草原音乐》[WAV+CUE][320MB]