js列効果実装コード_javascriptスキル-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

js列効果実装コード_javascriptスキル

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 06:47 PM

また、インターネット上でいくつかの列分割効果を見てきました。また、jquery プラグイン jquery.splitter.js もありますが、それらは基本的に問題を解決できません。ページ上に iframe がある場合、分割線をドラッグするときiframe を超えるとマウスは動作しません。はい、この問題について議論するために投稿をオープンしました。この例では、小さなトリックを使用してこの問題を解決し、ドラッグをスムーズにします。

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

Splitter demo

<script> /* * splitter.js * author: sunxing007 * http://blog.csdn.net/sunxing007 * date: 08/26/2009 ************************************************************************************** The css script below is needed for the html page when using splitter.js, please save it as splitter.css, and modify it carefully. ************************************************************************************** #splitter_container{ width: 100%; height: 100%; border: solid #eee 1px; margin: 0px; padding: 0px; overflow: hidden; } #splitter_left_panel{ width: 300px; height: 100%; float: left; border: solid blue 0px; } #splitter_bar{ width: 8px; height: 100%; float: left; background-color: #ccc; cursor: col-resize; } #splitter_right_panel{ height: 100%; padding-top: 10px; } ************************************************************************************** How to use this splitter? ************************************************************************************** <!-- <html> <head> <title>Splitter demo <link href="splitter.css" type="text/css" rel="stylesheet" /> <script src="splitter.js"></script>

left panel

right panel

--> * ************************************************ ** *************
*/

/**これは、id * で指定された dom 要素を取得するために使用されるヘルパー関数です。*/

function $(id){return document.getElementById (id );}

/**スプリッターの主な機能 **/

var Splitter = {
コンテナ: null,
lPanel: null,
rPanel: null,
bar: null,
movingBar: null,
//左パネルの初期幅、最大幅、最小幅
lPanelInitWidth: '250px',
lPanelMaxWidth: '500px',
lPanelMinWidth: '200px ',
rPanelInitWidth: '800px',
rPanelMaxWidth: '999px',
rPanelMinWidth: '500px',
//ドラッグされたときの仕切りの色
barActiveColor: '# 0080ff',
//左パネルに最大/最小幅が設定されているかどうか
isWidthLimit: true,
init: function(config){
if(!config.id ){
alert( 'スプリッターを初期化できません。');
return;
if($(config.id)){
this.container = $(config.id );
if( !($('splitter_left_panel')&&$('splitter_right_panel')&&$('splitter_bar'))){
alert('スプリッターを初期化できません。'); ;
}
else{
this.lPanel = $('splitter_left_panel');
this.rPanel = $('splitter_right_panel'); );
}
}

if(config.lPanelMaxWidth){
this.lPanelMaxWidth = config.lPanelMaxWidth;
if(config.lPanelMinWidth); >this.lPanelMinWidth = config.lPanelMinWidth;
}
if(config.rPanelMaxWidth){
this.rPanelMaxWidth = config.rPanelMaxWidth;
>this.rPanelMinWidth = config.rPanelMinWidth;
}
if(config.lPanelInitWidth){
this.lPanelInitWidth = config.lPanelInitWidth;
>this.rPanelInitWidth = config.rPanelInitWidth;
}
if(config.barActiveColor){
this.barActiveColor = config.barActiveColor;
//alert(typeof(config.isWidthLimit) ));
if (config.isWidthLimit!=unknown){
this.isWidthLimit = config.isWidthLimit;
var マスク = document.createElement('div'); .body.appendChild(mask) ;
with(mask.style){
position = 'absolute';
top = '0px'; 900;
幅 = '100%';
表示 = '#ccc'; =10)';
}
//background-color:red;filter:alpha(opacity=60)
Splitter.mask = マスク
this.bar.onmousedown = Splitter.start;
},
start: function(){
var o = Splitter.container;
o.lastMouseX =event.x;
Splitter.mask.style.display = ''; 🎜>var moveBar = document.createElement('div');
with(movingBar.style){
position = 'absolute'; Splitter.bar.offsetLeft 'px ';
top = '0px';
height = '100%';
zIndex = 999;
cursor = 'col-resize';
movingBar.dx = 0;
Splitter.onmousemove = Splitter.move ;
document.onmouseup = Splitter.end;
},
move: function(){
var o = Splitter.container;
var dx = events.x - o.lastMouseX;
Splitter.movingBar.dx = Splitter.movingBar.dx;
var left = parseInt(Splitter.movingBar.style.left) = left; o.lastMouseX = イベント.x ;
},
end: function(){
document.onmousemove = null;
Splitter.mask.style.display = 'none';
var dx = Splitter.movingBar(Splitter.movingBar);
var w = parseInt(Splitter.lPanel.currentStyle.width); 🎜>if(Splitter.isWidthLimit ){
var _width = (w > parseInt(Splitter.lPanelMaxWidth) ? Splitter.lPanelMaxWidth : (w Splitter.lPanelMinWidth : w) );
w = _width;

}
}; ;
" "width =" 100％ "src =" http://www.jb51.net "＆gt;＆lt;/iframe＆gt;
;/div＆gt;
スプリッターの使用方法.js:

ページ上にコンテナとして div が必要です (id=splitter_container): ドラッグ可能な効果はこのコンテナ内で実行されます
には 3 つの div が必要です左の列 (id=splitter_left_panel)、分割線 (id=splitter_bar)、右の列 (id=splitter_right_panel) を表すコンテナ
>
#splitter_container{
width: 100% ;
高さ: 100%;
ボーダー: 0px;
オーバーフロー: 非表示; >#splitter_left_panel{
幅: 300px;
高さ: 100%;
ボーダー: 青 0px>}< ;br> 🎜>幅: 8px;
浮動小数点: 左;
カーソル:
} #splitter_right_panel{
高さ: 100%;
パディングトップ: 10px;

スプリッターをトリガーするためのハンドラーを本体に追加します:

onload="Splitter.init({id: 'splitter_Container', isWidthLimit: true});"
Splitter の init メソッドはjson オブジェクトを設定パラメータとして使用します。コンテナ ID が必要です。
次のような追加パラメータも設定できます。
isWidthLimit : オプションの値 true、false、次のいずれかを設定します。左パネルの幅を制限します。
lPanelMaxWidth: 左パネルの最大幅、例: 500px;
lPanelMinWidth: 左パネルの最小幅、例: 100px ;

barActiveColor: 分割線をドラッグしたときの色: 'red'、'#0080ff';

その他の Web 開発関連のコンテンツは blog.csdn.net/sunxing007

声明

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

JavaScriptの文字列文字を交換しますMar 11, 2025 am 12:07 AM

JavaScript文字列置換法とFAQの詳細な説明この記事では、javaScriptの文字列文字を置き換える2つの方法について説明します：内部JavaScriptコードとWebページの内部HTML。 JavaScriptコード内の文字列を交換します最も直接的な方法は、置換（）メソッドを使用することです。 str = str.replace（ "find"、 "置換"）; この方法は、最初の一致のみを置き換えます。すべての一致を置き換えるには、正規表現を使用して、グローバルフラグGを追加します。 str = str.replace（/fi

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

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

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

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

jQueryマトリックス効果Mar 10, 2025 am 12:52 AM

マトリックスの映画効果をあなたのページにもたらしましょう！これは、有名な映画「The Matrix」に基づいたクールなJQueryプラグインです。プラグインは、映画の古典的な緑色のキャラクター効果をシミュレートし、画像を選択するだけで、プラグインはそれを数値文字で満たされたマトリックススタイルの画像に変換します。来て、それを試してみてください、それはとても面白いです！それがどのように機能するかプラグインは画像をキャンバスにロードし、ピクセルと色の値を読み取ります。 data = ctx.getimagedata（x、y、settings.greasize、settings.greasize）.data プラグインは、写真の長方形の領域を巧みに読み取り、jQueryを使用して各領域の平均色を計算します。次に、使用します

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

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

シンプルなjQueryスライダーを構築する方法Mar 11, 2025 am 12:19 AM

この記事では、jQueryライブラリを使用してシンプルな画像カルーセルを作成するように導きます。 jQuery上に構築されたBXSLiderライブラリを使用し、カルーセルをセットアップするために多くの構成オプションを提供します。今日、絵のカルーセルはウェブサイトで必須の機能になっています - 1つの写真は千の言葉よりも優れています！画像カルーセルを使用することを決定した後、次の質問はそれを作成する方法です。まず、高品質の高解像度の写真を収集する必要があります。次に、HTMLとJavaScriptコードを使用して画像カルーセルを作成する必要があります。ウェブ上には、さまざまな方法でカルーセルを作成するのに役立つ多くのライブラリがあります。オープンソースBXSLiderライブラリを使用します。 BXSLiderライブラリはレスポンシブデザインをサポートしているため、このライブラリで構築されたカルーセルは任意のものに適合させることができます

JavaScriptによる構造マークアップの強化Mar 10, 2025 am 12:18 AM

キーポイントJavaScriptを使用した構造的なタグ付けの強化は、ファイルサイズを削減しながら、Webページコンテンツのアクセシビリティと保守性を大幅に向上させることができます。 JavaScriptを効果的に使用して、Cite属性を使用して参照リンクを自動的にブロック参照に挿入するなど、HTML要素に機能を動的に追加できます。 JavaScriptを構造化されたタグと統合することで、ページの更新を必要としないタブパネルなどの動的なユーザーインターフェイスを作成できます。 JavaScriptの強化がWebページの基本的な機能を妨げないようにすることが重要です。高度なJavaScriptテクノロジーを使用できます（