最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

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

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

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

看關(guān)鍵的js code:
復(fù)制代碼 代碼如下:

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

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

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

相關(guān)文章

  • JavaScript打字小游戲代碼

    JavaScript打字小游戲代碼

    上半年自學(xué)了JavaScript,然后就做了個打字小游戲玩玩
    2011-12-12
  • 對于js垃圾回收機(jī)制的理解

    對于js垃圾回收機(jī)制的理解

    下面小編就為大家?guī)硪黄獙τ趈s垃圾回收機(jī)制的理解。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-09-09
  • 詳解JavaScript中map()和forEach()的異同

    詳解JavaScript中map()和forEach()的異同

    在JavaScript中,map()和forEach()是兩個常用的數(shù)組方法,它們都用于遍歷數(shù)組,但在某些方面有一些關(guān)鍵的區(qū)別,本文將詳細(xì)討論這兩種方法的異同,以幫助您更好地理解它們的用法和適用場景,需要的朋友可以參考下
    2024-02-02
  • 22種JavaScript中數(shù)組常用API總結(jié)

    22種JavaScript中數(shù)組常用API總結(jié)

    在前端開發(fā)中,數(shù)組是一種常見且重要的數(shù)據(jù)結(jié)構(gòu),本文主要介紹了前端中數(shù)組常用的API,包括添加、刪除、截取、合并、轉(zhuǎn)換等操作,希望對大家有所幫助
    2023-05-05
  • js 彈出新頁面避免被瀏覽器、ad攔截的一種新方法

    js 彈出新頁面避免被瀏覽器、ad攔截的一種新方法

    本文為大家介紹了使用js彈出新頁面同時避免被瀏覽器、ad攔截等,具體的實現(xiàn)方法如下,大家不妨參考參考
    2014-04-04
  • JavaScript 加號(+)運算符號

    JavaScript 加號(+)運算符號

    在一些框架中看到了類似這樣的寫法:+new Date();感覺有些怪,查閱了相關(guān)資料和一些網(wǎng)友的幫助.對此用法解釋如下,希望對大家有所幫助,不合適的地方請大家指正!
    2009-12-12
  • 小程序接入騰訊位置服務(wù)的詳細(xì)流程

    小程序接入騰訊位置服務(wù)的詳細(xì)流程

    這篇文章主要介紹了小程序接入騰訊位置服務(wù)的詳細(xì)流程,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-03-03
  • JS重要知識點小結(jié)

    JS重要知識點小結(jié)

    這里列出了一些JS重要知識點(不全面,但自己感覺很重要)。徹底理解并掌握這些知識點,對于每個想要深入學(xué)習(xí)JS的朋友應(yīng)該都是必須的
    2011-11-11
  • js彈出div并顯示遮罩層

    js彈出div并顯示遮罩層

    彈出div顯示遮罩層的效果,想必大家都有見到過吧,下面有個示例,大家可以參考下
    2014-02-02
  • 選擇器的朋友可以試試這個思路 延遲執(zhí)行歸并選擇操作

    選擇器的朋友可以試試這個思路 延遲執(zhí)行歸并選擇操作

    因為通常選擇器需要遍歷整個元素樹,所以當(dāng)多次選擇會比較耗時,忽然想到是否能利用setTimeout將多次選擇操作歸并到一起
    2011-01-01

最新評論

九寨沟县| 同德县| 阜南县| 晋江市| 普陀区| 渝北区| 伊吾县| 桐庐县| 阜城县| 博客| 玉环县| 黄浦区| 五台县| 台中市| 廊坊市| 思南县| 稷山县| 南陵县| 金昌市| 汤原县| 钟山县| 易门县| 兴安盟| 嘉鱼县| 安新县| 深州市| 全州县| 瑞丽市| 慈利县| 原平市| 石阡县| 明星| 彭泽县| 错那县| 杭州市| 衡东县| 山丹县| 油尖旺区| 罗江县| 永登县| 那坡县|