首頁 web前端 js教程 来自腾讯的一个不固定高度得消息的滚动特效_javascript技巧

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

May 16, 2016 pm 06:20 PM
訊息


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

主要还是填下这个月的坑,哈哈。
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

如何在iOS 17上的iMessage中向右滑動并快速回复 如何在iOS 17上的iMessage中向右滑動并快速回复 Sep 20, 2023 am 10:45 AM

如何在iPhone上使用滑動在iMessages中回覆注意:滑動回應功能僅適用於iOS17中的iMessage對話,不適用於「訊息」應用程式中的常規SMS對話。在iPhone上開啟「訊息」應用程式。然後,前往iMessage對話,只需在您要回覆的iMessage上向右滑動即可。完成此操作後,所選的iMessage將成為焦點,而所有其他訊息將在背景中模糊不清。您將看到一個文字框,用於鍵入回復以及“+”圖標,用於訪問iMessage應用程序,如“簽到”、“位置”、“貼紙”、“照片”等。只需輸入您的訊息,

訊息已發出但被對方拒收是什麼意思 訊息已發出但被對方拒收是什麼意思 Mar 07, 2024 pm 03:59 PM

訊息已發出但被對方拒絕是所發送的訊息已經成功地從設備發送出去,但由於某種原因,對方並沒有接收到這條訊息。更具體地說,這通常是因為對方已經設定了某些權限或採取了某些操作,導致你的訊息無法被正常接收。

iOS 17:如何在訊息中使用表情符號作為貼紙 iOS 17:如何在訊息中使用表情符號作為貼紙 Sep 18, 2023 pm 05:13 PM

在iOS17中,Apple在其訊息應用程式中添加了幾項新功能,以使與其他Apple用戶的交流更具創意和樂趣。其中一個功能是能夠使用表情符號作為貼紙。貼紙已經在訊息應用程式中存在多年了,但到目前為止,它們並沒有太大變化。這是因為在iOS17中,Apple將所有標準表情符號視為貼紙,讓它們以與實際貼紙相同的方式使用。這本質上意味著您不再局限於在對話中插入它們。現在,您也可以將它們拖曳到訊息氣泡上的任何位置。您甚至可以將它們堆疊在一起,以創建小表情符號場景。以下步驟向您展示了它在iOS17中的工作方式

訊息已發出但被對方拒絕了是封鎖還是刪除 訊息已發出但被對方拒絕了是封鎖還是刪除 Mar 12, 2024 pm 02:41 PM

1.被加入黑名單:訊息已發出但被對方拒收了一般是被拉黑了,這時你將無法向對方發送訊息,對方也無法收到你的訊息。 2.網路問題:如果接收方的網路狀況不佳,或有網路故障,就可能導致訊息無法成功接收。此時,可以嘗試等待網路恢復正常後再次發送訊息。 3.對方設定了免打擾:如果接收方在微信中設定了免打擾功能,那麼在一定時間內,發送方的訊息將不會被提醒或顯示。

小米14Pro怎麼設定來訊息亮屏? 小米14Pro怎麼設定來訊息亮屏? Mar 18, 2024 pm 12:07 PM

小米14Pro是一款性能配置非常出色的旗艦機型,自從正式發布以來就擁有很高的銷量,小米14Pro的很多小功能是會被大家忽視的,比如說是設置來消息亮屏,功能雖小,但是十分實用的,在使用手機的過程中大家會遇到各種問題,那麼小米14Pro怎麼設定來訊息亮屏呢?小米14Pro怎麼設定來訊息亮屏?步驟一:開啟手機的「設定」應用程式。步驟二:向下滑動直到找到「鎖定螢幕和密碼」選項,並點擊進入。步驟三:在「鎖定畫面和密碼」選單中,找到並點選「接收通知時亮屏」選項。步驟四:在「接收通知時亮屏」頁面中,打開開關以啟

如何在iPhone上編輯訊息 如何在iPhone上編輯訊息 Dec 18, 2023 pm 02:13 PM

iPhone上的原生「訊息」應用程式可讓您輕鬆編輯已傳送的文字。這樣,您可以糾正您的錯誤、標點符號,甚至是自動更正可能已應用於您的文字的錯誤短語/單字。在這篇文章中,我們將了解如何在iPhone上編輯訊息。如何在iPhone上編輯訊息必需:運行iOS16或更高版本的iPhone。您只能在「訊息」應用程式上編輯iMessage文本,並且只能在發送原始文字後的15分鐘內編輯。不支援非iMessage資訊文本,因此無法檢索或編輯它們。在iPhone上啟動訊息應用程式。在「訊息」中,選擇要從中編輯訊息的對話

Vivox100s發布日期確定!最新消息搶先知 Vivox100s發布日期確定!最新消息搶先知 Mar 22, 2024 pm 02:18 PM

Vivox100s發布日期確定!最新消息搶先知近日,科技界掀起了一股關於Vivox100s的熱潮,這款備受期待的產品終於確定了發布日期,讓眾多消費者和科技愛好者為之興奮不已。據悉,Vivox100s將在本月底正式發布,屆時將帶來哪些驚喜,備受關注的新品到底有何亮點,讓我們一同揭開這個科技謎團。 Vivox100s作為Vivox系列的最新力作,自曝光以來就備受關

如何使用 FaceTime 留言 iPhone 影片訊息 如何使用 FaceTime 留言 iPhone 影片訊息 Oct 26, 2023 pm 11:25 PM

隨著iOS17的發布,Apple為其行動作業系統增加了豐富的新功能,特性和增強功能。其中之一是如果有人錯過您的電話,現在可以離開FaceTimeiPhone視訊訊息和音訊。留言後,您的朋友和家人甚至可以在他們的AppleWatch上播放您的訊息,讓您更方便地保持聯繫。在FaceTime通話中留下視訊訊息的第一步是發起通話。如果另一端的人沒有接聽電話,螢幕上會出現一個錄製影片的選項。點擊此選項後,倒數計時從5到1開始,之後您可以開始錄製訊息。該介面是用戶友好的,具有“再次呼叫”按鈕和“錄製影片”按鈕

See all articles