この記事では主に、純粋な JavaScript を使用した制御可能な 4 方向のテキストのシームレスなスクロールのコードを紹介します。必要な友人は非常に効果的です。
シームレスなテキストスクロール効果を実現します:
<!DOCTYPE html>
<!--[if lt IE 7 ]> <html lang="zh-CN" class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html lang="zh-CN" class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="zh-CN" class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="zh-CN" class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="zh-CN"> <!--<![endif]-->
<head>
<title>文字滚动</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style type="text/css">
*{margin:0;padding:0;}
body{padding:20px;}
.textbox{border:1px solid #ddd;width:auto;overflow: hidden;}
.textbox ul{list-style: none;position: relative;}
.textbox ul li{padding:5px 0;}
</style>
</head>
<body class="home-page">
<p id="textbox" class="textbox">
<ul>
<li>汽车 | 运动B级车降3万5 </li>
<li>家居 | 这么厉害的装修 女人真的要坐不住了</li>
<li>教育 | 各省前三报考华工重奖10万元/人</li>
<li>汽车 | 运动B级车降3万5 平行进口车加价11万</li>
<li>健康 | 滥用激素酿苦果 14岁男孩10年不长个儿</li>
<li>数码 | 最新手机报价 说好的宽带降费提速呢？</li>
<li>汽车 | 平行进口车加价11万</li>
<li>汽车 | 运动B级车降3万5</li>
<li>汽车 | 平行进口车加价11万</li>
<li>运动 | 恒大亚冠生死战 猜比分赢正版球衣</li>
</ul>
<a href="#" class="btnPrev">向左</a>
<a href="#" class="btnNext">向右</a>
</p>
<br>
<br>
<p id="textbox2" class="textbox">
<ul>
<li>汽车 | 运动B级车降3万5 </li>
<li>家居 | 这么厉害的装修 女人真的要坐不住了</li>
<li>教育 | 各省前三报考华工重奖10万元/人</li>
<li>汽车 | 运动B级车降3万5 平行进口车加价11万</li>
<li>健康 | 滥用激素酿苦果 14岁男孩10年不长个儿</li>
<li>数码 | 最新手机报价 说好的宽带降费提速呢？</li>
<li>汽车 | 平行进口车加价11万</li>
<li>汽车 | 运动B级车降3万5</li>
<li>汽车 | 平行进口车加价11万</li>
<li>运动 | 恒大亚冠生死战 猜比分赢正版球衣</li>
</ul>
<a href="#" class="btnPrev">向上</a>
<a href="#" class="btnNext">向下</a>
</p>
<script type="text/javascript" src="script/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
//四方向无缝滚动
scroll('#textbox',{vis:2,btnHidden:false,dir:'prev',type:'h'});
scroll('#textbox2',{vis:3,btnHidden:false,dir:'prev',type:'v'});
function scroll(container,options){
var box = $(container);
var boxUl = box.find('ul').eq(0);
var LiHeight = 0; //不包含克隆li列表高度
var cloneLiHeight = 0; //包含克隆li列表高度
var LiWidth = 0; //不包含克隆li列表宽度
var cloneLiWidth = 0; //包含克隆li列表宽度
var Lis = boxUl.children();
var btnPrev = box.find('.btnPrev');
var btnNext = box.find('.btnNext');
//默认参数
var defult= {
vis : 2, //显示个数
autoPlay:true, //自动播放
speed :50, //滚动速度
dir:'prev', //滚动方向
btnHidden:false, //按钮是否隐藏
type:'v' // 水平或者垂直方向
};
var opt = $.extend({},defult,options);
//构建DOM结构
var lastClone=0; //最后克隆元素
var lastCloneHeight=0;//最后克隆元素高度
var allCloneHeight=0;//全部克隆元素总高度
var lastCloneWidth=0;
var allCloneWidth=0;
var visHeight=0; //可视高度
var visWidth=0;
var boxUl_wrap;
if(opt.type === "v"){ //垂直方向
Lis.each(function(){
$(this).height($(this).height());
LiHeight += $(this).outerHeight(true);
});
lastClone= boxUl.children(':last').clone().addClass('clone').prependTo(boxUl);
lastCloneHeight = lastClone.outerHeight(true);
allCloneHeight = lastClone.outerHeight(true);
for(var i = 0; i < opt.vis ; i++){
Lis.eq(i).clone().addClass('clone').appendTo(boxUl);
allCloneHeight += Lis.eq(i).outerHeight(true);
}
visHeight = allCloneHeight - lastCloneHeight;
cloneLiHeight = LiHeight + allCloneHeight;
boxUl_wrap = $('<p></p>').css({'width':'100%','height':visHeight,'overflow':'hidden','position':'relative'}).attr('id','ulWrap');
boxUl.css({'height':cloneLiHeight,'top':-lastCloneHeight}).wrap(boxUl_wrap);
}else if(opt.type ==="h"){ //水平方向
Lis.css({'whiteSpace':'nowrap','float':'left','paddingRight':'10px'});
Lis.each(function(){
$(this).width($(this).width());
LiWidth += $(this).outerWidth(true);
});
lastClone= boxUl.children(':last').clone().addClass('clone').prependTo(boxUl);
lastCloneWidth= lastClone.outerWidth(true);
allCloneWidth = lastClone.outerWidth(true);
for(var j = 0; j < opt.vis ; j++){
Lis.eq(j).clone().addClass('clone').appendTo(boxUl);
allCloneWidth += Lis.eq(j).outerWidth(true);
}
visHeight = Lis.eq(0).outerHeight(true);
visWidth = allCloneWidth - lastCloneWidth;
cloneLiWidth = LiWidth + allCloneWidth;
boxUl_wrap = $('<p></p>').css({'width':visWidth,'height':visHeight,'overflow':'hidden','position':'relative'}).attr('id','ulWrap');
boxUl.css({'width':cloneLiWidth,'left':-lastCloneWidth}).wrap(boxUl_wrap);
box.css({'width':visWidth});
}
//添加事件处理
var timer = null;
var scrollTop = function(){
clearInterval(timer);
timer = setInterval(function(){
var tmp = parseInt(boxUl.css('top').replace('px',""));
tmp--;
boxUl.animate({'top':tmp},0,function(){
if(tmp <= -(LiHeight + lastCloneHeight)){
boxUl.css('top',-lastCloneHeight);
}
});
},opt.speed);
};
var scrollDown = function(){
clearInterval(timer);
timer = setInterval(function(){
var tmp = parseInt(boxUl.css('top').replace('px',""));
tmp++;
boxUl.animate({'top':tmp},0,function(){
if(tmp >= 0){
boxUl.css('top',-(LiHeight));
}
});
},opt.speed);
};
var scrollLeft = function(){
clearInterval(timer);
timer = setInterval(function(){
var tmp = parseInt(boxUl.css('left').replace('px',""));
tmp--;
boxUl.animate({'left':tmp},0,function(){
if(tmp <= -(LiWidth + lastCloneWidth)){
boxUl.css('left',-(lastCloneWidth));
}
});
},opt.speed);
};
var scrollRight = function(){
clearInterval(timer);
timer = setInterval(function(){
var tmp = parseInt(boxUl.css('left').replace('px',""));
tmp++;
boxUl.animate({'left':tmp},0,function(){
if(tmp >= 0){
boxUl.css('left',-(LiWidth));
}
});
},opt.speed);
};
var scrollType = function(type,dir){
if(Lis.length >= opt.vis){ //显示个数不能多于列表个数，否则不显示效果
var sdir = typeof dir!=="undefined" ? dir : opt.dir;
switch(type){
case "v":
if(sdir == "prev"){scrollTop();}else{scrollDown();}
break;
case "h":
if(sdir == "prev"){scrollLeft();}else{scrollRight();}
}
}
};
if(opt.autoPlay){
scrollType(opt.type);
}
//添加事件处理
box.find('#ulWrap').hover(function(){
clearInterval(timer);
},function(){
scrollType(opt.type);
});
//按钮是否隐藏
if(!opt.btnHidden){
btnPrev.unbind('mouseover');
btnNext.unbind('mouseover');
btnPrev.mouseover(function(){
scrollType(opt.type,"prev");
});
btnNext.mouseover(function(){
scrollType(opt.type,"next");
});
}else{
btnPrev.hide();
btnNext.hide();
}
}
</script>
</body>
</html>
いくつかの問題:
ローカルテストでは問題ありませんが、ドキュメントを通して.write() がコードを入力して実行すると、垂直モードで li の height() を取得する際に問題が発生します。理由は不明で非常に不可解です。
以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。
その他の関連チュートリアルについては、JavaScript 基本チュートリアル
を参照してください。
JavaScript in Action：実際の例とプロジェクトApr 19, 2025 am 12:13 AM現実世界でのJavaScriptのアプリケーションには、フロントエンドとバックエンドの開発が含まれます。 1）DOM操作とイベント処理を含むTODOリストアプリケーションを構築して、フロントエンドアプリケーションを表示します。 2）node.jsを介してRestfulapiを構築し、バックエンドアプリケーションをデモンストレーションします。
JavaScriptとWeb：コア機能とユースケースApr 18, 2025 am 12:19 AMWeb開発におけるJavaScriptの主な用途には、クライアントの相互作用、フォーム検証、非同期通信が含まれます。 1）DOM操作による動的なコンテンツの更新とユーザーインタラクション。 2）ユーザーエクスペリエンスを改善するためにデータを提出する前に、クライアントの検証が実行されます。 3）サーバーとのリフレッシュレス通信は、AJAXテクノロジーを通じて達成されます。
JavaScriptエンジンの理解：実装の詳細Apr 17, 2025 am 12:05 AMJavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1）エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2）実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3）ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。
Python vs. JavaScript：学習曲線と使いやすさApr 16, 2025 am 12:12 AMPythonは、スムーズな学習曲線と簡潔な構文を備えた初心者により適しています。 JavaScriptは、急な学習曲線と柔軟な構文を備えたフロントエンド開発に適しています。 1。Python構文は直感的で、データサイエンスやバックエンド開発に適しています。 2。JavaScriptは柔軟で、フロントエンドおよびサーバー側のプログラミングで広く使用されています。
Python vs. JavaScript：コミュニティ、ライブラリ、リソースApr 15, 2025 am 12:16 AMPythonとJavaScriptには、コミュニティ、ライブラリ、リソースの観点から、独自の利点と短所があります。 1）Pythonコミュニティはフレンドリーで初心者に適していますが、フロントエンドの開発リソースはJavaScriptほど豊富ではありません。 2）Pythonはデータサイエンスおよび機械学習ライブラリで強力ですが、JavaScriptはフロントエンド開発ライブラリとフレームワークで優れています。 3）どちらも豊富な学習リソースを持っていますが、Pythonは公式文書から始めるのに適していますが、JavaScriptはMDNWebDocsにより優れています。選択は、プロジェクトのニーズと個人的な関心に基づいている必要があります。
C/CからJavaScriptへ：すべてがどのように機能するかApr 14, 2025 am 12:05 AMC/CからJavaScriptへのシフトには、動的なタイピング、ゴミ収集、非同期プログラミングへの適応が必要です。 1）C/Cは、手動メモリ管理を必要とする静的に型付けられた言語であり、JavaScriptは動的に型付けされ、ごみ収集が自動的に処理されます。 2）C/Cはマシンコードにコンパイルする必要がありますが、JavaScriptは解釈言語です。 3）JavaScriptは、閉鎖、プロトタイプチェーン、約束などの概念を導入します。これにより、柔軟性と非同期プログラミング機能が向上します。
JavaScriptエンジン：実装の比較Apr 13, 2025 am 12:05 AMさまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析：ソースコードを語彙ユニットに変換します。 2。文法分析：抽象的な構文ツリーを生成します。 3。最適化とコンパイル：JITコンパイラを介してマシンコードを生成します。 4。実行：マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。
ブラウザを超えて：現実世界のJavaScriptApr 12, 2025 am 12:06 AM現実世界におけるJavaScriptのアプリケーションには、サーバー側のプログラミング、モバイルアプリケーション開発、モノのインターネット制御が含まれます。 2。モバイルアプリケーションの開発は、ReactNativeを通じて実行され、クロスプラットフォームの展開をサポートします。 3.ハードウェアの相互作用に適したJohnny-Fiveライブラリを介したIoTデバイス制御に使用されます。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
SublimeText3 中国語版
中国語版、とても使いやすい
MinGW - Minimalist GNU for Windows
このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。
ドリームウィーバー CS6
ビジュアル Web 開発ツール
mPDF
mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
