热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

来自腾讯的一个不固定高度得消息的滚动特效

世锦赛第一场,打得还不错,希望不是昙花一现,要战,便战至消亡! 对刘伟真的无语了关键时刻不是失误就是浪投,男篮要想取得比

[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]

看关键的js code:
代码如下:

var $ = function (d){
typeof d == "string" &&(d = document.getElementById(d));
return $.fn.call(d);
};
$.fn = function (){
this.addEvent = function (sEventType,fnHandler){
if (this.addEventListener) {this.addEventListener(sEventType, fnHandler, false);}
else if (this.attachEvent) {this.attachEvent("on" + sEventType, fnHandler);}
else {this["on" + sEventType] = fnHandler;}
}
this.removeEvent = function (sEventType,fnHandler){
if (this.removeEventListener) {this.removeEventListener(sEventType, fnHandler, false);}
else if (this.detachEvent) {this.detachEvent("on" + sEventType, fnHandler);}
else { this["on" + sEventType] = null;}
}
return this;
};
var Class = {create: function() {return function() { this.initialize.apply(this, arguments); }}};
var Bind = function (obj,fun,arr){return function() {return fun.apply(obj,arr);}}
var Marquee = Class.create();
Marquee.prototype = {
initialize: function(id,name,out,speed) {
this.name = name;
this.box = $(id);
this.out = 3;//滚动间隔时间,单位秒
this.speed = speed;
this.d = 1;
this.box.style.position = "relative";
this.box.scrollTop = 0;
var _li = this.box.firstChild;
while(typeof(_li.tagName)=="undefined")_li = _li.nextSibling;
this.lis = this.box.getElementsByTagName(_li.tagName);
this.len = this.lis.length;
for(var i=0;ivar __li = document.createElement(_li.tagName);
__li.innerHTML = this.lis[i].innerHTML;
this.box.appendChild(__li);//cloneNode
if(this.lis[i].offsetTop>=this.box.offsetHeight)break;
}
this.Start();
this.box.addEvent("mouseover",Bind(this,function(){clearTimeout(this.timeout);},[]));
this.box.addEvent("mouseout",Bind(this,this.Start,[]));
},
Start:function (){
clearTimeout(this.timeout);
this.timeout = setTimeout(this.name+".Up()",this.out*1000)
},
Up:function(){
clearInterval(this.interval);
this.interval = setInterval(this.name+".Fun()",10);
},
Fun:function (){
this.box.scrollTop+=this.speed;
if(this.lis[this.d].offsetTop <= this.box.scrollTop){
clearInterval(this.interval);
this.box.scrollTop = this.lis[this.d].offsetTop;
this.Start();
this.d++;
}
if(this.d >= this.len + 1){
this.d = 1;
this.box.scrollTop = 0;
}
}
};
$(window).addEvent("load",function (){
marquee = new Marquee("msg_weibo","marquee",1,2);
});

实现思路与以前的文字滚动是一样的,都是先充满当前容器,再通过scrollTop++往上滚的,只不过他是每次滚动的距离不是固定的,是取当前滚动消息的高度。由于scrollTop(滚出当前可视区域的高度)和offsetTop(距离父节点顶部的距离,常用于取某元素在页面的坐标位置)的区别,所以通过 if(this.lis[this.d].offsetTop <= this.box.scrollTop)来判断是否滚动完上条消息,需要停顿下了。

我觉得亮点之处在于$的写法。通常Prototype里也就取下obj||document.getElementById('objId'),他这里除此外还帮obj绑定了一些方法。他的作用是不是类似于原型扩展String、Array等对象的方法呢。这个可以借鉴。
另外,他初始化时填充容器时用document.createElement->赋innerHTML->appendChild来做,我觉的不如直接cloneNode(true)->appendChild好,如不对,欢迎指正。

主要还是填下这个月的坑,哈哈。
推荐阅读
  • Docker的安全基准
    nsitionalENhttp:www.w3.orgTRxhtml1DTDxhtml1-transitional.dtd ... [详细]
  • Hadoop入门与核心组件详解
    本文详细介绍了Hadoop的基础知识及其核心组件,包括HDFS、MapReduce和YARN。通过本文,读者可以全面了解Hadoop的生态系统及应用场景。 ... [详细]
  • 本文探讨了在Linux系统上使用Docker时,通过volume将主机上的HTML5文件挂载到容器内部指定目录时遇到的403错误,并提供了解决方案和详细的操作步骤。 ... [详细]
  • 探讨如何真正掌握Java EE,包括所需技能、工具和实践经验。资深软件教学总监李刚分享了对毕业生简历中常见问题的看法,并提供了详尽的标准。 ... [详细]
  • 作为一名专业的Web前端工程师,掌握HTML和CSS的命名规范是至关重要的。良好的命名习惯不仅有助于提高代码的可读性和维护性,还能促进团队协作。本文将详细介绍Web前端开发中常用的HTML和CSS命名规范,并提供实用的建议。 ... [详细]
  • Startup 类配置服务和应用的请求管道。Startup类ASP.NETCore应用使用 Startup 类,按照约定命名为 Startup。 Startup 类:可选择性地包括 ... [详细]
  • 自己用过的一些比较有用的css3新属性【HTML】
    web前端|html教程自己用过的一些比较用的css3新属性web前端-html教程css3刚推出不久,虽然大多数的css3属性在很多流行的浏览器中不支持,但我个人觉得还是要尽量开 ... [详细]
  • 本文将深入探讨如何在不依赖第三方库的情况下,使用 React 处理表单输入和验证。我们将介绍一种高效且灵活的方法,涵盖表单提交、输入验证及错误处理等关键功能。 ... [详细]
  • Ralph的Kubernetes进阶之旅:集群架构与对象解析
    本文深入探讨了Kubernetes集群的架构和核心对象,详细介绍了Pod、Service、Volume等基本组件,以及更高层次的抽象如Deployment、StatefulSet等,帮助读者全面理解Kubernetes的工作原理。 ... [详细]
  • 本文详细探讨了Java中StringBuffer类在不同情况下的扩容规则,包括空参构造、带初始字符串和指定初始容量的构造方法。通过实例代码和理论分析,帮助读者更好地理解StringBuffer的内部工作原理。 ... [详细]
  • 本文探讨了领域驱动设计(DDD)的核心概念、应用场景及其实现方式,详细介绍了其在企业级软件开发中的优势和挑战。通过对比事务脚本与领域模型,展示了DDD如何提升系统的可维护性和扩展性。 ... [详细]
  • 深入了解 Windows 窗体中的 SplitContainer 控件
    SplitContainer 控件是 Windows 窗体中的一种复合控件,由两个可调整大小的面板和一个可移动的拆分条组成。本文将详细介绍其功能、属性以及如何通过编程方式创建复杂的用户界面。 ... [详细]
  • 实体映射最强工具类:MapStruct真香 ... [详细]
  • 深入解析 Apache Shiro 安全框架架构
    本文详细介绍了 Apache Shiro,一个强大且灵活的开源安全框架。Shiro 专注于简化身份验证、授权、会话管理和加密等复杂的安全操作,使开发者能够更轻松地保护应用程序。其核心目标是提供易于使用和理解的API,同时确保高度的安全性和灵活性。 ... [详细]
  • 本文探讨了在 ASP.NET MVC 5 中实现松耦合组件的方法。通过分离关注点,应用程序的各个组件可以更加独立且易于维护和测试。文中详细介绍了依赖项注入(DI)及其在实现松耦合中的作用。 ... [详细]
author-avatar
幸福的哈瑞宝
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有