jsスクロールバーのスムーズな動きのサンプルコード_javascriptスキル-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

jsスクロールバーのスムーズな動きのサンプルコード_javascriptスキル

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:07 PM

この記事の例では、js スクロールバーのスムーズな動きに関連するコードを参考として共有します。具体的な内容は次のとおりです。

HTML ページ

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
  <title></title> 
  <script src="../Scripts/JavaScript9.js"></script> 
  <link href="../Content/StyleSheet9.css" rel="stylesheet" /> 
  <script src="../Scripts/cxc.js"></script> 
  <meta charset="utf-8" /> 
</head> 
<body> 
  <input type="button" id="bt" value="滑动滚动条" /> 
  <div id="back"> 
  </div> 
  <div id="container"> 
    <div id="main"> 
      <div class="d"> 
        <p>如果有人说自己得到了真理，对不起，请恕鄙人无法相信。原因就不多谈了，这种拿真理吹牛逼的行为</p> 
      </div>  
      <div class="d"> 
        <p>如果有人说自己得到了真理，对不起，请恕鄙人无法相信。原因就不多谈了，这种拿真理吹牛逼的行为</p> 
      </div>  
      <div class="d"> 
        <p>如果有人说自己得到了真理，对不起，请恕鄙人无法相信。原因就不多谈了，这种拿真理吹牛逼的行为</p> 
      </div>  
      <div class="d"> 
        <p>如果有人说自己得到了真理，对不起，请恕鄙人无法相信。原因就不多谈了，这种拿真理吹牛逼的行为</p> 
      </div>  
      <div class="d"> 
        <p>如果有人说自己得到了真理，对不起，请恕鄙人无法相信。原因就不多谈了，这种拿真理吹牛逼的行为</p> 
      </div> 
      <div class="d"> 
        <p>如果有人说自己得到了真理，对不起，请恕鄙人无法相信。原因就不多谈了，这种拿真理吹牛逼的行为</p> 
      </div> 
      <div class="d"> 
        <p>如果有人说自己得到了真理，对不起，请恕鄙人无法相信。原因就不多谈了，这种拿真理吹牛逼的行为</p> 
      </div> 
      <div class="d"> 
        <p>如果有人说自己得到了真理，对不起，请恕鄙人无法相信。原因就不多谈了，这种拿真理吹牛逼的行为</p> 
      </div>   
      <div class="d"> 
        <p>如果有人说自己得到了真理，对不起，请恕鄙人无法相信。原因就不多谈了，这种拿真理吹牛逼的行为</p> 
      </div> 
      <div class="d"> 
        <p>如果有人说自己得到了真理，对不起，请恕鄙人无法相信。原因就不多谈了，这种拿真理吹牛逼的行为</p> 
      </div> 
      <div class="d"> 
        <p>如果有人说自己得到了真理，对不起，请恕鄙人无法相信。原因就不多谈了，这种拿真理吹牛逼的行为</p> 
      </div> 
      <div class="d"> 
        <p>如果有人说自己得到了真理，对不起，请恕鄙人无法相信。原因就不多谈了，这种拿真理吹牛逼的行为</p> 
      </div>  
      <div class="d"> 
        <p>如果有人说自己得到了真理，对不起，请恕鄙人无法相信。原因就不多谈了，这种拿真理吹牛逼的行为</p> 
      </div> 
      <div class="d"> 
        <p>如果有人说自己得到了真理，对不起，请恕鄙人无法相信。原因就不多谈了，这种拿真理吹牛逼的行为</p> 
      </div> 
      <div class="d"> 
        <p>如果有人说自己得到了真理，对不起，请恕鄙人无法相信。原因就不多谈了，这种拿真理吹牛逼的行为</p> 
      </div> 
      <div class="d"> 
        <p>如果有人说自己得到了真理，对不起，请恕鄙人无法相信。原因就不多谈了，这种拿真理吹牛逼的行为</p> 
      </div>  
    </div> 
  </div> 
</body> 
</html>

ログイン後にコピー

js ページ

var body, back, container, main,bt; //dom 
 
window.onload = function () { 
  domload(); 
  dominit(); 
  events(); 
}; 
var domload = function () { 
  body = document.body; 
  back = $("back"); 
  container = $("container"); 
  main = $("main"); 
  bt = $("bt"); 
}; 
var dominit = function () { 
  setH(back, screenH); 
  setH(container, screenH); 
  setH(main, screenW); 
}; 
var events = function () { 
  AddEvent(bt, EventsType[0], function () { 
    var speed = 10; 
    var min = 0,max = 449; 
    var scrolldown = function () { 
      min += speed; 
      if (min < max) { 
        container.scrollTop = min; 
        setTimeout(scrolldown, 4); 
      } 
    }; 
    setTimeout(scrolldown, 100); 
  }); 
};

ログイン後にコピー

CSS ページ

* { 
  margin:0px; 
  padding:0px; 
} 
#back { 
  position: absolute; 
  width: 100%; 
  top: 0px; 
  left: 0px; 
  z-index: 1; 
  background-image: url('../Images/psbg/bg7.png'); 
} 
#container{ 
  position:absolute; 
  width:100%; 
  top:0px; 
  left:0px; 
  z-index:100; 
  overflow:auto; 
} 
#main{ 
  position:absolute; 
  width:100%; 
  top:0px; 
  left:0px; 
} 
.d{ 
  margin-top:50px; 
} 
#bt{ 
  position:absolute; 
  top:0; 
  right:50px; 
  z-index:200; 
}

ログイン後にコピー

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7549

CakePHP チュートリアル

1382

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

独自のJavaScriptライブラリを作成および公開するにはどうすればよいですか？ Mar 18, 2025 pm 03:12 PM

記事では、JavaScriptライブラリの作成、公開、および維持について説明し、計画、開発、テスト、ドキュメント、およびプロモーション戦略に焦点を当てています。

ブラウザでのパフォーマンスのためにJavaScriptコードを最適化するにはどうすればよいですか？ Mar 18, 2025 pm 03:14 PM

この記事では、ブラウザでJavaScriptのパフォーマンスを最適化するための戦略について説明し、実行時間の短縮、ページの負荷速度への影響を最小限に抑えることに焦点を当てています。

フロントエンドのサーマルペーパーレシートのために文字化けしたコード印刷に遭遇した場合はどうすればよいですか？ Apr 04, 2025 pm 02:42 PM

フロントエンドのサーマルペーパーチケット印刷のためのよくある質問とソリューションフロントエンド開発におけるチケット印刷は、一般的な要件です。しかし、多くの開発者が実装しています...

ブラウザ開発者ツールを使用してJavaScriptコードを効果的にデバッグするにはどうすればよいですか？ Mar 18, 2025 pm 03:16 PM

この記事では、ブラウザ開発者ツールを使用した効果的なJavaScriptデバッグについて説明し、ブレークポイントの設定、コンソールの使用、パフォーマンスの分析に焦点を当てています。

誰がより多くのPythonまたはJavaScriptを支払われますか？ Apr 04, 2025 am 12:09 AM

スキルや業界のニーズに応じて、PythonおよびJavaScript開発者には絶対的な給与はありません。 1. Pythonは、データサイエンスと機械学習でさらに支払われる場合があります。 2。JavaScriptは、フロントエンドとフルスタックの開発に大きな需要があり、その給与もかなりです。 3。影響要因には、経験、地理的位置、会社の規模、特定のスキルが含まれます。

ソースマップを使用して、マイナイドJavaScriptコードをデバッグするにはどうすればよいですか？ Mar 18, 2025 pm 03:17 PM

この記事では、ソースマップを使用して、元のコードにマッピングすることにより、Minified JavaScriptをデバッグする方法について説明します。ソースマップの有効化、ブレークポイントの設定、Chrome DevtoolsやWebpackなどのツールの使用について説明します。

JavaScriptを使用して、同じIDを持つArray要素を1つのオブジェクトにマージする方法は？ Apr 04, 2025 pm 05:09 PM

同じIDを持つ配列要素をJavaScriptの1つのオブジェクトにマージする方法は？データを処理するとき、私たちはしばしば同じIDを持つ必要性に遭遇します...

javascriptの分解：それが何をするのか、なぜそれが重要なのか Apr 09, 2025 am 12:07 AM

JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1）イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2）動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3）非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。

See all articles

jsスクロールバーのスムーズな動きのサンプルコード_javascriptスキル

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック