欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

來自騰訊的一個不固定高度得消息的滾動特效

 更新時間:2010年09月01日 00:44:29   作者:  
8月最后1天,趕緊補篇博客。貼個最近看到的騰訊的特效,寫的還可以。先看效果。

[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]

看關鍵的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;i<this.lis.length;i++){
var __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);
});

實現(xiàn)思路與以前的文字滾動是一樣的,都是先充滿當前容器,再通過scrollTop++往上滾的,只不過他是每次滾動的距離不是固定的,是取當前滾動消息的高度。由于scrollTop(滾出當前可視區(qū)域的高度)和offsetTop(距離父節(jié)點頂部的距離,常用于取某元素在頁面的坐標位置)的區(qū)別,所以通過 if(this.lis[this.d].offsetTop <= this.box.scrollTop)來判斷是否滾動完上條消息,需要停頓下了。

我覺得亮點之處在于$的寫法。通常Prototype里也就取下obj||document.getElementById('objId'),他這里除此外還幫obj綁定了一些方法。他的作用是不是類似于原型擴展String、Array等對象的方法呢。這個可以借鑒。
另外,他初始化時填充容器時用document.createElement->賦innerHTML->appendChild來做,我覺的不如直接cloneNode(true)->appendChild好,如不對,歡迎指正。

主要還是填下這個月的坑,哈哈。

相關文章

  • Bootstrap4一次重大更新 幾乎涉及每行代碼

    Bootstrap4一次重大更新 幾乎涉及每行代碼

    Bootstrap 4是一次重大更新,幾乎涉及每行代碼,這篇文章為大家分享了Bootstrap 4.0重大更新及亮點詳細解讀,感興趣的小伙伴們可以參考一下
    2016-05-05
  • JS HTML5拖拽上傳圖片預覽

    JS HTML5拖拽上傳圖片預覽

    這篇文章主要為大家詳細介紹了JS HTML5拖拽上傳圖片預覽的相關資料,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-07-07
  • 微信小程序實現(xiàn)星級評價

    微信小程序實現(xiàn)星級評價

    這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)星級評價,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2019-11-11
  • 移動端效果之IndexList詳解

    移動端效果之IndexList詳解

    這篇文章主要為大家詳細介紹了移動端效果之IndexList,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-10-10
  • 詳解Bootstrap創(chuàng)建表單的三種格式(一)

    詳解Bootstrap創(chuàng)建表單的三種格式(一)

    在本章中,我們將學習如何使用 Bootstrap 創(chuàng)建表單。Bootstrap 通過一些簡單的 HTML 標簽和擴展的類即可創(chuàng)建出不同樣式的表單,對bootstrap 表單相關知識感興趣的朋友一起學習吧
    2016-01-01
  • js中通過getElementsByName訪問name集合對象的方法

    js中通過getElementsByName訪問name集合對象的方法

    下面小編就為大家?guī)硪黄猨s中通過getElementsByName訪問name集合對象的方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-10-10
  • js相冊效果代碼(點擊創(chuàng)建即可)

    js相冊效果代碼(點擊創(chuàng)建即可)

    利用js 書寫的相冊代碼,點擊創(chuàng)建即可看到效果,感興趣的朋友可以參考下哈,希望對你學習jquery有所幫助
    2013-04-04
  • SublimeText自帶格式化代碼功能之reindent

    SublimeText自帶格式化代碼功能之reindent

    這篇文章主要介紹了SublimeText自帶格式化代碼功能之reindent的相關資料,需要的朋友可以參考下
    2015-12-12
  • JavaScript之Getters和Setters 平臺支持等詳細介紹

    JavaScript之Getters和Setters 平臺支持等詳細介紹

    現(xiàn)在,JavaScript的Getters和Setters使用非常廣泛,它和每個JavaScript開發(fā)者的切身利益息息相關,我們先來快速了解什么是Getters和Setters,以及它們?yōu)槭裁春苡杏?然后,我們來看看現(xiàn)在都有哪些平臺支持Gettets和Setters
    2012-12-12
  • javascript 按回車鍵相應按鈕提交事件

    javascript 按回車鍵相應按鈕提交事件

    在表單提交前經常遇到表單驗證問題而常用的方法有以下兩種.
    2009-11-11

最新評論