js はシームレスなスクロールを実現し、IE や FF_javascript スキルと互換性があります
May 16, 2016 pm 06:49 PM
js
シームレスなスクロール
原理分析:
1. 最初にコンテナの高さまたは幅 (ul など) を設定し、overflow:hidden を設定します。
2. コンテナの高さを設定した後、コンテンツの高さを設定します。 40pxを超えると、オーバーフローした部分が非表示になり、scrollTop属性が使用可能になります。overflow:scrollを使用して、コンテナのscrollTop(上下にスクロール)属性の値を変更します。コンテンツを 1 ノード分上下に移動します (スクロールの原理)。4. スクロールの高さがスクロールするノードの高さ以上の場合、scrollTop=0 を設定して子ノード ツリーの最初のノードから最後までスクロールすると、中断のないループ スクロール効果が表示されます。
html ソース コード
コードをコピー コードは次のとおりです:
<! DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns ="http://www.w3.org/1999/xhtml">
<head>
<title>scroll</title> src=" divCycle.js" src="divCycle.js"></script>
<style><!--
li{ height:20px>
-> ;< /style><style bogus="1">li{ 高さ:20px;
</head>
<div> ;
<ul id="list" style="border:1px #ccc Solid; overflow:hidden; height:40px; width:100px; margin:0; padding:0; list-style-type:none; ">
1
2
3
4 ;
5
7
8 🎜><li>9</li>
</ul>
</div> javascript"> ;<!--
new simpleScroll("list",20,40,1);
// --></script>
</body>
< /html>
js ソース コード
コードをコピーします
<head>
<title>scroll</title> src=" divCycle.js" src="divCycle.js"></script>
<style><!--
li{ height:20px>
-> ;< /style><style bogus="1">li{ 高さ:20px;
</head>
<div> ;
<ul id="list" style="border:1px #ccc Solid; overflow:hidden; height:40px; width:100px; margin:0; padding:0; list-style-type:none; ">
</ul>
</div> javascript"> ;<!--
new simpleScroll("list",20,40,1);
// --></script>
</body>
< /html>
js ソース コード
コードをコピーします
コードは次のとおりです。
// JavaScript Document
/*****
@author leaves chen (leaves615@gmail.com)
@copyright 2009
*****/
var pause=false;
var scrollTimeId=null;
var container=null;
var lineHeight=null;
var speed=0;
var delay=0;
simpleScroll=function(container1,lineHeight1,speed1,delay1){
container=document.getElementById(container1);
lineHeight=lineHeight1;
speed=speed1;
delay=delay1;
//滚动效果
scrollexc=function(){
if(pause) return ;
container.scrollTop =2;
var lh=lineHeight||container.getElementsByTagName('li')[0].offsetHeight;
if(container.scrollTop%lh<=1){
clearInterval(scrollTimeId);
fire();
container.scrollTop=0;
setTimeout(start,delay*1000);
}
};
//开始滚动
start=function(){
var lh=lineHeight||container.getElementsByTagName('li')[0].offsetHeight;
if (container.scrollHeight - container.offsetHeight >= lh)
scrollTimeId = setInterval(scrollexc, speed);
};
//把子节点树中的第一个移动到最后
fire=function(){
container.appendChild(container.getElementsByTagName('li')[0]);
};
container.onmouseover=function(){pause=true;};
container.onmouseout=function(){pause=false;};
setTimeout(start,delay*1000);
};
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

人気の記事
2つのポイント博物館:バングルワシュタランドロケーションガイド
4週間前
By 尊渡假赌尊渡假赌尊渡假赌
スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか?
3週間前
By DDD
レポ:チームメイトを復活させる方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌
ハローキティアイランドアドベンチャー:巨大な種を手に入れる方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌

人気の記事
2つのポイント博物館:バングルワシュタランドロケーションガイド
4週間前
By 尊渡假赌尊渡假赌尊渡假赌
スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか?
3週間前
By DDD
レポ:チームメイトを復活させる方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌
ハローキティアイランドアドベンチャー:巨大な種を手に入れる方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌

ホットな記事タグ

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック
Gmailメールのログイン入り口はどこですか?
7121
9


Java チュートリアル
1534
14


Laravel チュートリアル
1256
25


PHP チュートリアル
1205
29


CakePHP チュートリアル
1153
46



株価分析に必須のツール: PHP と JS を使用してローソク足チャートを描画する手順を学びます

CSS を使用してシームレスなスクロール テキスト カルーセル効果を作成する方法

PHP および JS 開発のヒント: 株価ローソク足チャートの描画方法をマスターする
