ホームページ > 記事 > ウェブフロントエンド > 共通効果の実装: トップに戻る (フェードイン、フェードアウト、低速スクロールと組み合わせ)_JavaScript スキル
共通効果の実装: トップに戻る (フェードイン、フェードアウト、低速スクロールと組み合わせ)_JavaScript スキル
- WBOYオリジナル
- 2016-05-16 17:57:421266ブラウズ
パフォーマンスの観点では、オンスクロール イベントを継続的にトリガーし、コールバック関数を頻繁に呼び出すことによって引き起こされるパフォーマンスの問題を考慮します。コールバック関数は、一定期間キャッシュしてから実行できます。つまり、この期間中に onscroll イベントが複数回トリガーされた場合、コールバック関数は 1 回だけ実行されます。
コードをコピー コードは次のとおりです。
位置:固定;幅:100ピクセル; > カーソル:ポインタ; 背景色:#ccc; フィルタ: alpha(opacity=0);
.placeholder{ height:2000px;}
>
トップに戻る
script>
var tools = {
//この方法は、ms 以内に func を複数回実行することを避けるためのものです。
バッファ: function(func, ms, context){
var バッファ;
return function(){
if(buffer) return; >func.call(this)
buffer
},ms);
},
/*要素の透明度を設定します*/
opacity: function(elem, val){
var settings = argument.length > 1;
if("opacity" in elem.style){//elem. CSS クラスで
return 設定 ? elem.style["opacity"] = val : elem.style["opacity"];
}else{
if(elem.filters && elem.filters.alpha) {
戻り設定 ? elem.filters.alpha["不透明度"] = val*100 : elem.filters.alpha["不透明度"]/100
}
}
; >//ドキュメント オブジェクトのスクロールトップを取得または設定します
//function([val])
documentScrollTop: function(val){
var elem = document
return (val!==未定義) ?
elem.documentElement.scrollTop = elem.body.scrollTop = val :
Math.max(elem.documentElement.scrollTop, elem.body.scrollTop);
//アニメーション効果
var effect = {
//フェードイン
fadein: function (elem){
var val = 0;
var interval = 25; (function(){
val = 0.1;
if(val>1){
tool.opacity(elem, 1)
return;
}else {
tool.opacity (elem, val)
setTimeout(arguments.callee, interval);
}
},interval);
//フェードアウト
フェードアウト: function (elem) {
var val = 1;
var interval = 25;
setTimeout(function(){
val -= 0.1;
if(val ツール。 opacity(elem, 0)
return;
}else {
tool.opacity(elem,val)
setTimeout(arguments.callee, interval); interval);
},
// スクロールバーの動きを遅くします
move: function(scrollTop){
setTimeout(function(){
scrollTop = Math .floor((scrollTop *) 0.65));
tool.documentScrollTop(scrollTop);
setTimeout(arguments.callee, 25);
🎜>}
};
//メインプログラム
(function(){//gotop
varvisible = false;
var elem = document.getElementById( "gotop");
関数 onscroll(){
varscrollTop = tool.documentScrollTop();
if(scrollTop > 0){
if(!visible){
effect. >visible = true;
}
}else{
if(visible){
effect.fadeout(elem);
visible = false; >}
function onclick(){
varscrollTop = tool.documentScrollTop();
effect.move(scrollTop);
elem.onclick = onclick
ウィンドウ。 onscroll = tools.buffer(onscroll, 200, this);
/div>