ホームページ >ウェブフロントエンド >jsチュートリアル >タオバオのホームページでボタンをクリックするとゆっくりとトップに戻る効果をネイティブjsで実現_javascriptスキル
タオバオのホームページでボタンをクリックするとゆっくりとトップに戻る効果をネイティブjsで実現_javascriptスキル
- WBOYオリジナル
- 2016-05-16 16:53:101794ブラウズ
タオバオのホームページの「トップに戻る」ボタンは次のようになります。ボタン上にマウスを置くと、ボタンは一定の距離まで引き下げられるまで表示されず、ボタンの背景が灰色になり、アイコンがテキストに変わります。ボタンをクリックしてゆっくりとトップに戻ります
まず、そのような効果を実現するにはどのようなイベントを追加する必要があるかを分析してみましょう。マウスがボタンの内外に移動すると、ボタンの動作が変化するため、マウスオーバー イベントとマウスアウト イベントをボタンに追加する必要があります。スクロール バーの変更をリッスンするには、ウィンドウにスクロール イベントを追加し、ボタンをクリックして先頭に戻り、ボタンにクリック イベントを追加する必要があります。イベント ハンドラーを 3 つの関数 moveIn、moveOut、goTop にカプセル化します。
HTML/CSS コードは次のとおりです
コードをコピーします コードは次のとおりです。
head
メインコンテンツ、高さは 2000px
コードをコピーします コードは次のとおりです:
.container {幅: 980px; マージン: 0 自動; 高さ: 自動; 背景: #aaa;} .content { 高さ: 1px 青一色;
#btn {
位置: 固定;
下: 50 ピクセル;
高さ: 55 ピクセル; png ) no-repeat 0 -110px; } //任意の背景画像を見つけることができます
font-size: 12px;
text-align: center; text- indent: -9999em;
cursor: pointer;
display: none;
以下は完全な js コードです
コードをコピー
#btn {
位置: 固定;
下: 50 ピクセル;
高さ: 55 ピクセル; png ) no-repeat 0 -110px; } //任意の背景画像を見つけることができます
font-size: 12px;
text-align: center; text- indent: -9999em;
cursor: pointer;
display: none;
以下は完全な js コードです
コードをコピー
コードは次のとおりです:
window.addEventListener("load",function() { var btn = document.getElementById( "btn"); btn.addEventListener("mouseover", moveIn, false); function moveIn(); >btn.style.color = "#ffffff"; // 変更されたインライン スタイルが最も優先されます。
btn.style.backgroundImage = "none"; 🎜> btn.style.backgroundColor = "#FF4401"; }
function moveOut() {
btn.style.textIndent = "-9999em";
btn.style.backgroundImage = "; (icons .png)";
}
function goTop(acceleration, time) { //パラメータを変更してトップに戻る速度を調整します
acceleration =加速度 || 0.1;
time = time | 10;
varspeed = 1加速度;
function getScrollTop() { //スクロールバーの垂直距離を取得します
return document.body. scrollTop;
}
function setScrollTop(value) { //スクロール バーの垂直距離を設定するための重要な点は、スクロール バーの垂直距離を短い間隔で継続的に変更することです。スクロール効果
document.body.scrollTop = 値;
window.onscroll = function() {
varscrollTop(); 🎜>if (scrollTop > 100) { //スクロールバーがウィンドウ上部からどのくらい離れているかを判断して表示します。ここでは 100px です。
btn.style.display = "block"
} else; {
btn.style.display = "none ";
}
};
btn.onclick = function () {
var timer = setInterval(function() {
setScrollTop) (Math.floor(getScrollTop() /speed)) ; //このコード行が重要です。スクロール バーの垂直距離を取得し、それを速度で割って、スクロール バーまでの垂直距離を設定します。 >if (getScrollTop() == 0)
clearInterval(timer);
}
goTop(0.2, 8); false);
もちろん、他の実装メソッドもあります。他のメソッドのキー コードは以下に示されています。
コードをコピー
コードは次のとおりです。
btn.onclick = function() {
clearInterval(timer);
var timer = setInterval(function() {
var now =scrollTop; //スクロールバーの垂直距離
speed = (now == 0); 🎜>clearInterval(timer);
document.documentElement.scrollTop = 現在の速度; //
document.body.scrollTop = 現在の速度; 15) ; function moveOut() {
btn.style.textIndent = "-9999em";
btn.style.backgroundImage = "; (icons .png)";
}
function goTop(acceleration, time) { //パラメータを変更してトップに戻る速度を調整します
acceleration =加速度 || 0.1;
time = time | 10;
varspeed = 1加速度;
function getScrollTop() { //スクロールバーの垂直距離を取得します
return document.body. scrollTop;
}
function setScrollTop(value) { //スクロール バーの垂直距離を設定するための重要な点は、スクロール バーの垂直距離を短い間隔で継続的に変更することです。スクロール効果
document.body.scrollTop = 値;
window.onscroll = function() {
varscrollTop(); 🎜>if (scrollTop > 100) { //スクロールバーがウィンドウ上部からどのくらい離れているかを判断して表示します。ここでは 100px です。
btn.style.display = "block"
} else; {
btn.style.display = "none ";
}
};
btn.onclick = function () {
var timer = setInterval(function() {
setScrollTop) (Math.floor(getScrollTop() /speed)) ; //このコード行が重要です。スクロール バーの垂直距離を取得し、それを速度で割って、スクロール バーまでの垂直距離を設定します。 >if (getScrollTop() == 0)
clearInterval(timer);
}
goTop(0.2, 8); false);
もちろん、他の実装メソッドもあります。他のメソッドのキー コードは以下に示されています。
コードをコピー
コードは次のとおりです。
btn.onclick = function() {
clearInterval(timer);
var timer = setInterval(function() {
var now =scrollTop; //スクロールバーの垂直距離
speed = (now == 0); 🎜>clearInterval(timer);
document.documentElement.scrollTop = 現在の速度; //
}
ここでのコードは主にインターネット上の他のリソースを参照しており、私自身の理解を少し追加しています。もちろん、JavaScript が最初にサポートした window.scrollTo() など、他の実装メソッドもあります。 jQ を使って実装するとコード量が非常に少なくなります。w3cplus を参照してください
個人的には、データ型、クロージャ、継承などを理解するなど、最初にネイティブ JavaScript をよく学習する必要があると思います。 、スコープ、DOM、CSS、イベント、処理、Ajax など。他のフレームワークに慣れると、学習がはるかに簡単になります。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。