jQueryで実装した数値範囲 range2dsliderプラグイン特殊効果選択 複数コードsharing_jquery
この記事の例では、jQuery によって実装された数値範囲 range2dslider 選択プラグイン効果について説明します。皆さんの参考に共有してください。詳細は以下の通りです。
これはシンプルな jquery プラグインです。このプラグインを使用すると、マウスをスライド (ドラッグ) して数値範囲選択の特殊効果コードを制御できます。
运行效果图： -------------------查看效果 下載源网----------- --------
ヒント: ブラウザが正常に動作しない場合は、閲覧モードを切り替えてみてください。
jQueryで実装した数値範囲選択の特殊効果コードは以下の通りです
<!doctype html>
<html lang="en">
<head>
<meta charset="gb2312">
<title>jQuery数值范围选取插件range2dslider </title>
<script type="text/javascript" src="jquery.js"></script>
<link rel="stylesheet" href="jquery.range2dslider.css">
<script type="text/javascript" src="jquery.range2dslider.js"></script>
<style>
body,html{
margin:0px;
padding:0px;
}
ul{
margin:0px 0px;
padding:10px 25px;
}
body>div{
margin:0px 20px;
padding:20px;
background:rgba(184, 184, 184, 0.1);
}
</style>
</head>
<body>
<div>
<h2>简单的二维滑块</h2>
<input id="slider">
<script>
window.onerror = function(msg, url, linenumber) {
alert('Error message: '+msg+'\nURL: '+url+'\nLine Number: '+linenumber);
return true;
}
$('#slider').range2DSlider({
grid:true,
axis:[[1,2,5,7,10],[2,5,10]],
projections:true,
showLegend:[1,1],
allowAxisMove:['both'],
printLabel:function( val ){
this.projections&&this.projections[0].find('.xdsoft_projection_value_x').text(val[1].toFixed(5));
return val[0].toFixed(5);
}
})
.range2DSlider('value',[[0,1],[3,0],[6,6]]);
$('#slider')
.range2DSlider();
</script>
<h2>水平滑块</h2>
<input id="slider1">
<script>
$('#slider1').range2DSlider({
template:'horizontal',
value:[[5,0],[7,0]],
onlyGridPoint:true,
round:true,
axis:[[-3,-2,-1,0,1,2,3,4,5,6,7,8,9,10]]
});
</script>
<h2>垂直滑块</h2>
<input class="slider2">
<input class="slider2">
<input class="slider2">
<input class="slider2">
<input class="slider2">
<input class="slider2">
<div style="clear:both;float:none;"></div>
<script>
$('.slider2').range2DSlider({
template:'vertical',
value:[[0,5]],
showRanges:[[0,1]],
style:'float:left;margin-left:25px;',
axis:[[0,1],[0,10]],
round:true,
printLabel:function( val ){
return val[1]+' yo';
}
});
</script>
<h2>平滑滑块(x)</h2>
<input class="slider3">
<script>
var values = [];
var ranges = [];
var cities = [
'Abuja',
'Accra',
'Adamstown',
'Addis',
'Algiers',
'Alofi',
'Amman',
'Amsterdam',
'Andorra',
'Ankara',
'Antananarivo',
'Apia',
'Ashgabat',
'Asmara',
'Astana',
'Asuncion',
'Athens',
'Avarua',
'Baghdad',
'Baku',
'Bamako',
'Bandar',
'Bangkok',
'Bangui',
'Banjul',
'Basseterre',
'Beijing',
'Beirut',
'Belgrade',
'Belmopan'
];
for(var i = -10,k=0;i<=10;i++,k++ ){
values.push([i,Math.sin(i),cities[i+10]]);
if( i<10 )
ranges.push([k,k+1]);
}
$('.slider3').range2DSlider({
x:'right',
y:'top',
showLegend:[0,0],
showRanges:ranges,
axis:[[-10,10],[-1.5,1.5]],
allowAxisMove:['y'],
printLabel:function( val ){
return val[1].toFixed(2)+'<br>'+val[2];
}
}).range2DSlider('value',values);
</script>
<h2>自定义风格滑块</h2>
<input id="slider4">
<style>
.xdsoft_custom .xdsoft_range2dslider_runner{
border-radius:1px;
margin:0px 0px -4px -8px !important;
background:rgba(0,0,127,0.5);
border:1px outset #ddd;
}
.xdsoft_custom .xdsoft_range2dslider_box{
min-height:8px;
background:rgba(127,127,127,0.5);
border-radius:1px;
border-style:solid;
}
.xdsoft_custom .xdsoft_slider_label{
background: red;
color: #fff;
bottom: 22px !important;
}
.xdsoft_custom .xdsoft_slider_label.xdsoft_slider_label_top:after{
border-top-color:red;
}
</style>
<script>
$('#slider4').range2DSlider({
grid:false,
height:0,
className:'xdsoft_custom',
showLegend:[1,0],
axis:[[0,0.1]],
tooltip:['top'],
alwShowTooltip:[true],
allowAxisMove:['x'],
printLabel:function( val ){
return val[0].toFixed(3);
}
}).range2DSlider('value',[[0.05,0]]);
</script>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
</div>
</body>
</html>
上記はjQueryで実装した数値範囲選択の特殊効果コードです。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7338
9
1627
14
1352
46
1265
25
1210
29
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
カスタムGoogle検索APIセットアップチュートリアル
Mar 04, 2025 am 01:06 AM
このチュートリアルでは、カスタムGoogle検索APIをブログまたはWebサイトに統合する方法を示し、標準のWordPressテーマ検索関数よりも洗練された検索エクスペリエンスを提供します。 驚くほど簡単です！検索をyに制限することができます
独自のAjax Webアプリケーションを構築します
Mar 09, 2025 am 12:11 AM
それで、あなたはここで、Ajaxと呼ばれるこのことについてすべてを学ぶ準備ができています。しかし、それは正確には何ですか？ Ajaxという用語は、動的でインタラクティブなWebコンテンツを作成するために使用されるテクノロジーのゆるいグループ化を指します。 Ajaxという用語は、もともとJesse Jによって造られました
例JSONファイルの例
Mar 03, 2025 am 12:35 AM
この記事シリーズは、2017年半ばに最新の情報と新鮮な例で書き直されました。 このJSONの例では、JSON形式を使用してファイルに単純な値を保存する方法について説明します。 キー価値ペア表記を使用して、あらゆる種類を保存できます
8見事なjQueryページレイアウトプラグイン
Mar 06, 2025 am 12:48 AM
楽なWebページレイアウトのためにjQueryを活用する：8本質的なプラグイン jQueryは、Webページのレイアウトを大幅に簡素化します。 この記事では、プロセスを合理化する8つの強力なjQueryプラグイン、特に手動のウェブサイトの作成に役立ちます
＆＃x27; this＆＃x27; JavaScriptで？
Mar 04, 2025 am 01:15 AM
コアポイント これは通常、メソッドを「所有」するオブジェクトを指しますが、関数がどのように呼び出されるかに依存します。 現在のオブジェクトがない場合、これはグローバルオブジェクトを指します。 Webブラウザでは、ウィンドウで表されます。 関数を呼び出すと、これはグローバルオブジェクトを維持しますが、オブジェクトコンストラクターまたはそのメソッドを呼び出すとき、これはオブジェクトのインスタンスを指します。 call（）、apply（）、bind（）などのメソッドを使用して、このコンテキストを変更できます。これらのメソッドは、与えられたこの値とパラメーターを使用して関数を呼び出します。 JavaScriptは優れたプログラミング言語です。数年前、この文はそうでした
ソースビューアーでjQueryの知識を向上させます
Mar 05, 2025 am 12:54 AM
jQueryは素晴らしいJavaScriptフレームワークです。ただし、他のライブラリと同様に、何が起こっているのかを発見するためにフードの下に入る必要がある場合があります。おそらく、バグをトレースしているか、jQueryが特定のUIをどのように達成するかに興味があるからです
モバイル開発用のモバイルチートシート10個
Mar 05, 2025 am 12:43 AM
この投稿は、Android、BlackBerry、およびiPhoneアプリ開発用の有用なチートシート、リファレンスガイド、クイックレシピ、コードスニペットをコンパイルします。 開発者がいないべきではありません！ タッチジェスチャーリファレンスガイド（PDF） Desigの貴重なリソース
