js または css_javascript スキルを使用してスクロール広告を実装するためのいくつかのオプション-jsチュートリアル-php.cn

js または css_javascript スキルを使用してスクロール広告を実装するためのいくつかのオプション

WBOY

リリース： 2016-05-16 18:35:47

オリジナル

1274 人が閲覧しました

js のスクロールイベントをトリガーすると、最初は FF でこんな感じだったとは思いましたが、IE6 と IE7 の両方でこれほどの効果があるとは予想外でした。
そこで、次のような魔法のコードを見つけました: CSS のみを使用してスクロール効果を実現~~
#fixed{position:fixed;}

scrolling < ;/div>

これだけでスクロールが完了します。しかし、これはまだ終わりではありません。これは Firefox と IE7 のみをサポートします。IE6 も使用できると言いましたが、IE6 の実装は少し複雑です。 >コードをコピー

コードは次のとおりです:

これが何を意味するのかよくわかりません。 CSS にも見えますが、スクリプトと考えるべきです。 ?もしかしたら誰かが知っていて、みんなに教えて共有できるかもしれません。
私のタイトルはスクロールを実現する N 個の方法に関するものなので、これら 2 つだけではないはずです。 CSS を記述する方法は他にもあるようなので、すべてを列挙することはしません。主に、より一般的に使用されている JS 実装方法について説明したいと思います。これもオンラインで見つけました。欠点は、Web ページが十分に上位にない場合、実際には、Baidu メッセージでも発生することです。さらに詳しく説明します:

コードをコピー

コードは次のとおりです: lastScrollY=0; 関数 heartBeat(){ var diffY; if (document.documentElement && document.documentElement.scrollTop)

diffY = document.documentElement.scrollTop; 🎜>else if (document.body)

diffY = document.body.scrollTop 
else 
{} 
percent=.1*(diffY-lastScrollY); 
if(percent>0); )percent=Math.ceil(percent); 
elsepercent=Math.floor(percent); 
document.getElementById("lovexin12").style.top=parseInt(document.getElementById("lovexin12") style.top) パーセント "px"; 🎜>window.setInterval("heartBeat()",1); 

興味がある場合は、上部を下部に対する相対値に変更すると、より良くなります。 
最近jsライブラリを調べていて、特に興味があるjqueryがとても良いので、jqueryを使ってスクロールを実装する別のコードを投稿します。上記のものよりもはるかに良い感じです。 。ただし、必要がなければ使用しても構いません。結局のところ、jquery のコードは数十 KB です。 

コードをコピー

 コードは次のとおりです:

$(document).ready (function( ){

if($.browser.msie && $.browser.version == 6) {
FollowDiv.follow();

} }); >FollowDiv = { フォロー : function(){ $('#cssrain').css('position','absolute'); $(window).scroll(function(){ var f_top = $(window).scrollTop() $(window).height() - $("#cssrain").height() - parseFloat($("#cssrain").css("borderTopWidth") ) - parseFloat ($("#cssrain").css("borderBottomWidth")); $('#cssrain').css( 'top' ,

});

 } 

わかりました、その話はやめましょう! ！分からないことがあれば聞けば議論が進みますよ～！皆さん、私の QQ グループへの参加を歓迎します。一緒に学び、進歩しましょう。グループ番号: 5678537。