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

來自騰訊的一個(gè)不固定高度得消息的滾動(dòng)特效

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

[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;//滾動(dòng)間隔時(shí)間,單位秒
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);
});

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

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

主要還是填下這個(gè)月的坑,哈哈。

相關(guān)文章

  • JavaScript打字小游戲代碼

    JavaScript打字小游戲代碼

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

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

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

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

    在JavaScript中,map()和forEach()是兩個(gè)常用的數(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)換等操作,希望對(duì)大家有所幫助
    2023-05-05
  • js 彈出新頁面避免被瀏覽器、ad攔截的一種新方法

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

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

    JavaScript 加號(hào)(+)運(yùn)算符號(hào)

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

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

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

    JS重要知識(shí)點(diǎn)小結(jié)

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

    js彈出div并顯示遮罩層

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

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

    因?yàn)橥ǔ_x擇器需要遍歷整個(gè)元素樹,所以當(dāng)多次選擇會(huì)比較耗時(shí),忽然想到是否能利用setTimeout將多次選擇操作歸并到一起
    2011-01-01

最新評(píng)論

徐闻县| 竹北市| 明光市| 武穴市| 元江| 枣强县| 新乡县| 黄浦区| 简阳市| 潼南县| 韶关市| 巴彦淖尔市| 正宁县| 阿拉善右旗| 成安县| 揭阳市| 西畴县| 余庆县| 莆田市| 交口县| 惠州市| 洪雅县| 贵南县| 建阳市| 威海市| 唐山市| 黄骅市| 大石桥市| 中方县| 镇远县| 鹿泉市| 昌乐县| 伊宁市| 博乐市| 南宁市| 丰台区| 化德县| 保亭| 扎赉特旗| 车险| 嘉善县|