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衣類リムーバー

Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

人気の記事

ホットツール

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

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

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

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

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

ホットトピック









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

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

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

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

この記事の視差スクロールと要素のアニメーション効果の実現に関する議論では、Shiseidoの公式ウェブサイト(https://www.shisido.co.co.jp/sb/wonderland/)と同様の達成方法について説明します。

Console.log出力の違いの根本原因に関する詳細な議論。この記事では、Console.log関数の出力結果の違いをコードの一部で分析し、その背後にある理由を説明します。 �...

JavaScriptを学ぶことは難しくありませんが、挑戦的です。 1)変数、データ型、関数などの基本概念を理解します。2)非同期プログラミングをマスターし、イベントループを通じて実装します。 3)DOM操作を使用し、非同期リクエストを処理することを約束します。 4)一般的な間違いを避け、デバッグテクニックを使用します。 5)パフォーマンスを最適化し、ベストプラクティスに従ってください。

JavaScriptはPowerPointで実行でき、外部JavaScriptファイルを呼び出したり、VBAを介してHTMLファイルを埋め込んだりすることで実装できます。 1. VBAを使用してJavaScriptファイルを呼び出すには、マクロを有効にし、VBAプログラミングの知識を持つ必要があります。 2。JavaScriptを含むHTMLファイルを埋め込みます。これは、シンプルで使いやすいが、セキュリティ制限の対象となります。利点には、拡張機能と柔軟性が含まれますが、欠点にはセキュリティ、互換性、複雑さが含まれます。実際には、セキュリティ、互換性、パフォーマンス、ユーザーエクスペリエンスに注意を払う必要があります。
