これは、私が中国の新年に書いたJSスクロールプラグインのソースコードです。私は結果の結果に満足していません。私はJSを深く統合して学習するために戻りました。このプラグインには、以下の不十分な側面があります。
コンテンツの過度の効果については、QQクライアントの最近のセッションリストでScrollbarを参照できます。そのスクロールは非常に滑らかで、簡単に言えば、アニメーションのトランジション効果がありません。
完全な互換性ではなく、IE6と7の下のスタイルにはまだ少し欠陥があります。
スクロールバーは、マウスが吊り下げられたときにのみ表示され、除去後に隠された効果が書かれていないなど、スタイルは不完全です。
内部構造は混乱しており、コンテンツ構造を調整する必要があります。
スクロールバーの写真は結局アーティストではなく、自分で写真をカットするのはとても嫌です...
全体的に、視聴することはまだ可能ですが、まだアニメーションが不足しています。このプラグインを書いたとき、プラグインが比較的基本的な機能を使用していることに気付いたので、これらの機能をカプセル化する必要があると思いました。私は最近JSを詳細に勉強しています。手元の本を読んだ後、この基本的な機能プラグインを書き始める必要があります。もちろん、アニメーションエンジンは不可欠です。これ以上ADOがなければ、ソースコードはここにあります(注:このプラグインの完全なバージョンには写真があります。記事の最後にある添付ファイルに完全なプラグインをダウンロードしてください):
CSS
コードコピーは次のとおりです。
.lf_scroll、.lf_scroll li {padding:0;マージン:0;リストスタイル:なし;フォント:14px/24px "Helvetica Neue"、Helvetica、arial、 'Microsoft yahei'、Sans-Serif;アウトライン:なし; }
.lf_scroll {cursor:pointer;幅:10px;位置:絶対;右:0;上:0;フィルター:アルファ(不透明度= 50); -moz-opacity:0.5; -khtml-opacity:0.5;不透明度:0.5; }
.lf_scrollfocus {filter:alpha(ofacity = 100); -moz-opacity:1; -khtml-opacity:1;不透明:1; }
.lfs_top、.lfs_center、.lfs_bottom {background:url( 'scrollbar.gif');幅:10px;高さ:10px; }
.lfs_top {background-position:1px 0px; }
.lfs_center {background-position:center 0;高さ:100px; }
.lfs_bottom {background -position:-22px 0; }
/*開発者config*/
.rolldiv {height:100%;幅:100%;オーバーフロー:隠し;位置:相対; }
JavaScript
コードコピーは次のとおりです。
/*
*このプラグインはシミュレーションWebページスクロールバーで定義されています。DOMイベントのバインディング後に挿入してください
*
*コメントバージョン:1.0.0
*著者:linkfly
* SINA:あなたのために半世紀に焦点を当てる| cnblogs:http://www.cnblogs.com/silin6/ |メール:[email protected]
*日付:2014-02-05 02:38:35
*
*
* MITおよびGPLライセンスの下でライセンスされているデュアル:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
*/
(関数(ウィンドウ、未定義){
//構成パラメーター情報
var config = {
オート:本当、
高さ:「自動」、
幅:「自動」
};
var linkflyscroll = function(dom、options){
/// <summary>
/// 1:シミュレートされたスクロールバーオブジェクトを生成します。[このオブジェクトが機能した後に指定されたオブジェクトにイベントをバインドしてください。
/// 1.1 -linkflyscroll(dom) - 指定されたdomでscrollbarオブジェクトを生成します
/// 1.2 -linkflyscroll(dom、options) - スクロールバーオブジェクトを生成し、オブジェクトを構成するための作業モデルをカスタマイズできる一連のパラメーターを提供します。
/// </summary>
/// <param name = "dom" type = "文字列または要素">
/// js domオブジェクトに渡す、または型文字列のオブジェクトID
/// </param>
/// <param name = "options" type = "json">
///次のオプションを使用して、このオブジェクトの作業モデルをカスタマイズします。
/// [オプション] Auto(boolean):コンテンツがコンテナの高さに達しない場合、スクロールバーは自動的に隠されますか?デフォルトはtrueです(はい)
/// [オプション]高さ(intまたは文字列):デフォルトのユニットはpxで、int and stringです。値が自動の場合、CSSの高さはデフォルトで使用されます。
/// [optional] width(intまたはstring):デフォルトのユニットはpxで、int and stringです。値がAUTOの場合、CSSの幅はデフォルトで使用されます。
/// </param>
/// <returns type = "linkflyscroll"/>
if(typeof(dom)=== 'string'){
dom = document.getElementById(dom);
}
//指定されておらず、有効なDOMが見つかりません
// linkflyscroll( "")、linkflyscroll(null)、linkflyscroll(未定義)
if(!dom ||!dom.nodetype)
これを返します。
//コンテナオブジェクトを作成します
var scrollobj = document.createelement( 'div');
//コンテンツオブジェクトは深くクローン化されており、イベントが含まれていないため、イベントをDOMオブジェクトにバインドできるようになるまで、LinkFlyScrollオブジェクトが機能し終了するまで待機する必要があります。
var cloneobj = dom.cloneNode(true);
scrollobj.classname = 'rolldiv';
scrollobj.appendchild(cloneobj);
//ページ上の現在のオブジェクトを交換します
dom.parentnode.replacechild(scrollobj、dom);
新しいlinkflyscroll.prototype.init(scrollobj、options?options:{})を返します。
};
linkflyscroll.prototype.init = function(dom、options){
/// <summary>
/// 1:このオブジェクトは実際のオブジェクトです。特別な作業方法は、linkflyscrollの静的コールとインスタンス化された呼び出しがある可能性があるためです
/// 1.1 -init(dom、options) - 指定されたdomでscrollbarオブジェクトを生成します
/// </summary>
/// <param name = "dom" type = "element">
/// domオブジェクト
/// </param>
/// <param name = "options" type = "json">
///次のオプションを使用して、このオブジェクトの作業モデルをカスタマイズします。
/// [オプション] Auto(boolean):コンテンツがコンテナの高さに達しない場合、スクロールバーは自動的に隠されますか?デフォルトはtrueです(はい)
/// [オプション]高さ(intまたは文字列):デフォルトのユニットはpxで、int and stringです。値が自動の場合、CSSの高さはデフォルトで使用されます。
/// [optional] width(intまたはstring):デフォルトのユニットはpxで、int and stringです。値がAUTOの場合、CSSの幅はデフォルトで使用されます。
/// </param>
/// <returns type = "linkflyscroll"/>
/*
*このオブジェクトには、次のプロパティが含まれています。
* isdrag:スクロールバーがドラッグされています
* StartTop :(動作)スクロールバーのスクロール位置を開始します
*エンドトップ:(動作)スクロールバーエンドスクロール位置
* Toplimit:スクロールバーの上限位置
* bottomlimit:スクロールバーの下部にある制限位置
*コンテキスト:コンテンツDOM
* Scrollradix:カーディナリティをスクロールします
*ターゲット:コンテナDOM
*/
//現在のこのオブジェクトは、このポインターが環境で頻繁に変化するのを防ぐため(たとえば、イベントを結合するとき)、現在のオブジェクトを保存します。
var currscroll = this;
// domelement
if(dom.nodetype){
//コンテナとコンテンツDOMを保存します
currscroll.target = dom;
currscroll.context = dom.firstchild;
//構成パラメーターをマージします
currscroll.options = tool.extend(config、options);
if(currscroll.options.width!== 'auto'){
dom.style.width = tool.convertvalue(currcroll.options.width);
}
if(currscroll.options.height!== 'auto'){
dom.style.height = tool.convertValue(currscroll.options.height);
}
//有効なdomを見つけます
while(currscroll.context.nodetype!= 1){
currscroll.context = currscroll.context.nextsibling;
}
// Scrollbar domを作成します
currscroll.scrollul = document.createelement( 'ul');
currscroll.scrollul.classname = 'lf_scroll';
currscroll.scrollul.appendChild(tool.setClass( 'li'、 'lfs_top'));
currscroll.scrollul.appendChild(tool.setClass( 'li'、 'lfs_center'));
Currscroll.scrollul.AppendChild(tool.setClass( 'li'、 'lfs_bottom'));
currscroll.context.style.position = 'relative';
//ロケーションデータを読むことができる前にページに表示
dom.appendChild(currscroll.scrollul);
this.change();
tool.addscrollevent(currscroll.context、function(e){
//マウスホイールイベントをバインドし、3pxスクロールユニット
if(e.wheel> 0){//スクロールホイールは上にスクロールします
var currtop = currscroll.endtop- = 3;
currscroll.scrollevent.call(currscroll、currtop);
} else {//スクロールホイールは下にスクロールします
var currtop = currscroll.endtop += 3;
currscroll.scrollevent.call(currscroll、currtop);
}
});
// todoをドラッグするときに禁止されたテキストが選択されます
//マウスの下のイベントをクリックすると、左クリックかどうかを判断する必要があります。現在、右クリックはTODOのスクロールも実現します。
tool.addevent(currscroll.scrollul、 'mousedown'、function(e){
Mousedown.call(currscroll、e);
});
//イベントを追加して、ユーザーエクスペリエンスを向上させるために身体に監視を実装する
tool.addevent(document.body、 'mousemove'、function(e){
if(currscroll.isdrag){
//現在のマウスの位置を取得します
var position = tool.getMousePos(e);
//現在のスクロールバートップの位置
var currtop =(currscroll.endtop + position.y -currscroll.starttop);
//呼び出しは、この作業オブジェクトを正確にこのポインターポイントにすることです
currscroll.scrollevent.call(currscroll、currtop);
}
falseを返します。
});
//マウスリリースイベントを追加し、リリースイベントを正確にキャプチャするためにボディを聞いてください
tool.addevent(document.body、 'mouseup'、function(){
mouseup.call(currscroll、[]);
});
var mousedown = function(e){
/// <summary>
/// 1:マウスプレスイベント
/// 1.1-マウスタウン(e) - スクロールバープレスでのムースタウンイベント
/// </summary>
/// <param name = "e" type = "event">
///イベントオブジェクト
/// </param>
/// <returns type = "linkflyscroll"/>
currscroll.isdrag = true;
//現在のマウスY位置を取得します
currscroll.starttop = tool.getMousePos(e).y;
tool.addclass(currscroll.scrollul、 'lf_scrollfocus');
falseを返します。
};
var mouseup = function(){
/// <summary>
/// 1:マウスリリースイベント
/// 1.1 -mouseup() - mouseup() - scrollbarでのスクロールバーイベントのリリース
/// </summary>
/// <returns type = "linkflyscroll"/>
currscroll.isdrag = false;
currscroll.endtop = currscroll.scrollul.style.top? parseint(currscroll.scrollul.style.top):0;
tool.RemoveClass(currscroll.scrollul、 'lf_scrollfocus');
falseを返します。
};
currscroll.scrollevent = function(currtop){
/// <summary>
/// 1:スクロールイベント(コア)、スクロールする必要がある座標を渡すだけです(スクロールバートップ)
/// 1.1 -Scrollevent(Currtop) - コアスクロールイベント
/// </summary>
/// <param name = "currtop" type = "int">
///スクロールバーの上部の最上位は、コンテナの前のレイヤーからのものです
/// </param>
/// <returns type = "void"/>
if(currtop <= currscroll.toplimit || currtop <0){//上限
currtop = currscroll.toplimit;
} else if(currtop> = currscroll.bottomlimit){// bottom lime
currtop = currscroll.bottomlimit;
}
//スクロールバーのオフセット効果
currscroll.scrollul.style.top = currtop + 'px';
var temptop = parseint(currscroll.context.style.top?currscroll.context.style.top:0);
//デバッグコード
// document.getElementById( 'PosionInfo')。innerhtml = 'currtop:' + currtop + 'スクロールカーディナリティ:' + currscroll.scrollradix + 'bottomlimit:' + currscroll.bottomlimit + 'endtop:' + curroll.endtop + 'startopt currtop + "offsettop:" + currscroll.scrollul.offsettop + "compute:" +(currtop * currscroll.scrollradix * -1) + 'px';
//テキストコード
//コンテンツスクロール:現在のスクロールバートップ*カーディナリティは負の数を取得します
currscroll.context.style.top = currtop * currscroll.scrollradix * -1 + 'px';
};
Currscrollを返します。
};
};
linkflyscroll.prototype.init.prototype.change = function(){
/// <summary>
/// 1:スクロールバーのコンテンツの関数を変更します
/// 1.1 -change() - この関数は、このスクロールバーオブジェクトを更新するデータを表します。場合によっては、コンテンツのデータは絶えず変化しています。この関数を呼び出して、データを現在のScrollbarオブジェクトに更新できます。
/// </summary>
/// <returns type = "linkflyscroll"/>
/*
* LinkFlyScrollに含まれるプロパティは、主にこの関数で初期化または再定義されています。
* isdrag:スクロールバーがドラッグされています
* StartTop :(動作)スクロールバーのスクロール位置を開始します
*エンドトップ:(動作)スクロールバーエンドスクロール位置
* Toplimit:スクロールバーの上限位置
* bottomlimit:スクロールバーの下部にある制限位置
*コンテキスト:コンテンツDOM
* Scrollradix:カーディナリティをスクロールします
*ターゲット:コンテナDOM
*/
//一連のデータをリセットまたは読み取ります
var currscroll = this;
currscroll.isdrag = false、
currscroll.starttop = 0、
currscroll.endtop =(currscroll.scrollul.style.top?parseint(currcroll.scrollul.style.top):0)、
currscroll.toplimit = currscroll.target.scrolltop、
currscroll.bottomlimit = currscroll.target.clientheight、
currscroll.scrollradix = 10;
//スクロールバーの高さを取得:コンテンツの高さ*(コンテナの高さ/コンテンツの高さ=コンテンツの割合としてのコンテナ)
var scrollpx = currscroll.target.clientheight *(currscroll.target.clientheight / currscroll.context.offseTheigh);
//バーの高さをスクロールします
currscroll.scrollul.childnodes [1] .style.height = scrollpx + 'px';
if(currscroll.context.clientheight <= currscroll.target.clientheight && currscroll.options.auto){
currscroll.scrollul.style.display = 'none';
} それ以外 {
currscroll.scrollul.style.display = 'block';
//スクロールバーが表示されたら、最大位置データを修正します
currscroll.bottomlimit - = currscroll.scrollul.offseTheight;
}
//スクロールバーのスクロールカーディナリティを設定します(スクロールバーはスクロール1pxコンテンツスクロールピクセルをスクロールしません):(コンテンツの高さ - コンテナの高さ(現在のコンテナは1つの画面用に表示されているため))/スクロールバートップ(スクロールバーは空白でスクロールできます)
currscroll.scrollradix =(currscroll.context.offsetheight -currscroll.target.clientheight) / currscroll.bottomlimit;
Currscrollを返します。
};
linkflyscroll.prototype.init.prototype.roll = function(value){
/// <summary>
/// 1:スクロールバーオフセットメソッド
/// 1.1-ロール(値) - スクロールバースクロール方法
/// </summary>
/// <param name = "value" type = "int">
///スクロールターゲットの割合
/// </param>
/// <returns type = "linkflyscroll"/>
var currscroll = this;
if(typeof(value)!== 'number'){
Currscrollを返します。
}
var currtop =(currscroll.bottomlimit -currscroll.toplimit) * value / 100;
currscroll.scrollevent(currtop);
currscroll.endtop = currtop;
Currscrollを返します。
};
/*
*ツール
*/
var tool = {
SetClass:function(element、className){
/// <summary>
/// 1:要素ノードのクラス属性を設定します
/// 1.1 -setClass(element、className) - 要素ノードのクラス属性を設定します。そのようなノードがない場合は、ノードを作成し、変更されたノードオブジェクトを返します
/// </summary>
/// <param name = "要素" type = "要素または文字列">
///文字列を渡してノードを作成し、それ以外の場合はノードを変更します
/// </param>
/// <param name = "classname" type = "string">
///クラス名
/// </param>
/// <returns type = "要素"/>
if(typeof element === 'string'){
要素= document.createelement(element);
}
element.className = className;
返品要素。
}、
hasclass:function(element、className){
/// <summary>
/// 1:要素にクラスがあるかどうかを判断します
/// 1.1 -hasclass(element、classname) - 要素にクラスがあるかどうかを判断します。
/// </summary>
/// <param name = "要素" type = "要素または文字列">
///ノードオブジェクト
/// </param>
/// <param name = "classname" type = "string">
///クラス名
/// </param>
/// <returns type = "要素"/>
if(!element || element.nodetype!== 1)//例外を通過させ、外部で処理が実行されない場合
trueを返します。
var ElementClassName = element.className;
if(elementclassname.length <1){
falseを返します。
}
if(elementClassName == className || elementClassName.match(new regexp( "(^| // s)" + className + "(// s | $)")){
trueを返します。
}
falseを返します。
}、
addclass:function(element、classname){
/// <summary>
/// 1:[追加]要素のクラス
/// 1.1 -AddClass(element、className) - 要素に追加して、変更されたクラスを返します
/// </summary>
/// <param name = "要素" type = "要素または文字列">
///ノードオブジェクト
/// </param>
/// <param name = "classname" type = "string">
///クラス名
/// </param>
/// <returns type = "要素"/>
if(!tool.hasclass(element、classname)){
if(element.classname.length <1){
element.className = className;
} それ以外 {
element.className + = '' + className;
}
}
返品要素。
}、
removeclass:function(element、classname){
/// <summary>
/// 1:要素のクラスを削除します
/// 1.1 -AddClass(Element、ClassName) - 要素のクラスを削除し、変更されたクラスを返します
/// </summary>
/// <param name = "要素" type = "要素または文字列">
///ノードオブジェクト
/// </param>
/// <param name = "classname" type = "string">
///クラス名
/// </param>
/// <returns type = "要素"/>
if(tool.hasclass(element、classname))){
var reg = new regexp( "(^| // s)" + className + "(// s | $)");
element.classname = element.classname.replace(reg、 '');
}
返品要素。
}、
css:function(element、key){
/// <summary>
/// 1:要素CSSによって指定された属性値を取得します
/// 1.1 -CSS(要素、className) - 要素CSSによって指定された属性値を取得します
/// </summary>
/// <param name = "要素" type = "要素または文字列">
///ノードオブジェクト
/// </param>
/// <param name = "key" type = "string">
///取得するCSS属性
/// </param>
/// <returns type = "string"/>
return element.currentstyle? element.CurrentStyle [key]:document.defaultView.getComputedStyle(element、false)[key];
}、
AddEvent:function(element、type、fn){
/// <summary>
/// 1:要素にイベントを追加します
/// 1.1-CSS(要素、タイプ、FN) - イベントを要素に追加します。このポイントは、関数のイベントソースに
/// </summary>
/// <param name = "要素" type = "要素または文字列">
///ノードオブジェクト
/// </param>
/// <param name = "type" type = "string">
///文字なしでイベント名を追加します
/// </param>
/// <param name = "fn" type = "function">
///イベントオブジェクト
/// </param>
/// <returns type = "void"/>
if(element.attachevent){
要素['e' + type + fn] = fn;
要素[type + fn] = function(){element ['e' + type + fn](window.event); }
element.Attachevent( 'on' + type、element [type + fn]);
} else if(element.addeventlistener){
Element.AddeventListener(Type、FN、False);
}
}、
// removeEvent:function(element、type、fn){
// /// <summary>
// /// 1:要素のイベントを削除すると、この関数は使用されていません
// /// 1.1 -RemoveEvent(要素、タイプ、FN) - 要素のイベントを削除
// /// </summary>
// /// <param name = "element" type = "要素または文字列">
// ///ノードオブジェクト
// /// </param>
// /// <param name = "type" type = "string">
// ///削除されたイベント名
// /// </param>
// /// <param name = "key" type = "string">
// ///削除されたイベントの関数名
// /// </param>
// /// <returns type = "void"/>
// if(element.detachevent){
// element.detachevent( 'on' + type、element [type + fn]);
//要素[type + fn] = null;
//} else if(element.removeeventlistener){
// element.RemoveEventListener(Type、FN、False);
//}
//}、
addscrollevent:function(element、fn){
/// <summary>
/// 1:Scrolleventイベントを追加します
/// 1.1 -Addscrollevent(Element、FN)-Scrolleventイベントを要素に追加します(特別イベント、要素のマウスホイールスクロールイベント)
/// </summary>
/// <param name = "要素" type = "要素または文字列">
///要素ノード
/// </param>
/// <param name = "fn" type = "function">
///イベントメソッド
/// </param>
/// <returns type = "void"/>
var bindscrollfn = function(e){
e = e || window.event;
//スクロールホイールのスクロール方向を判断:Firefoxは他のブラウザとは異なります
e.wheel =(e.wheeldelta?e.wheeldelta:-e.detail)> 0? 1:-1; //イベントによって反転したマウスホイールを判断し、1は上向き、-1は下向きです
//ブラウザのデフォルト動作をブロックします
if(e.preventdefault){// ff
E.PreventDefault();
} それ以外 {
e.ReturnValue = false; // IE
}
fn.call(element、e);
}
if(document.addeventlistener){
// ff
Element.AddeventListener( 'dommouseScroll'、bindscrollfn、false);
// w3c
Element.AddeventListener( 'MouseWheel'、BindScrollfn、false);
} else // ie
{
element.attachevent( 'onmousewheel'、bindscrollfn);
}
}、
GetEvent:function(){
/// <summary>
/// 1:イベントオブジェクトを取得します
/// 1.1 -getEvent() - 互換性がIEとFFを処理しながら、パラメーターなしでイベントオブジェクトを取得します
/// </summary>
/// <returns type = "event"/>
if(document.all){
window.eventを返します。
}
func = getevent.caller;
while(func!= null){
var arg0 = func.arguments [0];
if(arg0){
if((arg0.constructor == event || arg0.constructor == mousevent)||(typeof(arg0)== "object" && arg0.preventdefault && arg0.stoppropagation){
arg0を返します。
}
}
func = func.caller;
}
nullを返します。
}、
getMousePos:function(ev){
/// <summary>
/// 1:現在のマウス座標を取得します
/// 1.1 -getMousePos(ev) - 現在のマウス座標、互換性処理、および返されたオブジェクト形式を取得します。{x:マウスx座標、y:マウスy座標}
/// </summary>
/// <param name = "ev" type = "event">
///イベントイベントオブジェクト
/// </param>
/// <returns type = "json"/>
if(!ev){
ev = currscroll.getevent();
}
if(ev.pagex || ev.pagey){
戻る {
X:ev.pagex、
Y:ev.pagey
};
}
if(document.documentelement && document.documentelement.scrolltop){
戻る {
X:ev.clientx + document.documentlement.scrollleft -document.documentelement.clientleft、
y:ev.clienty + document.documentlement.scrolltop -document.documentelement.clienttop
};
}
else if(document.body){
戻る {
X:ev.clientx + document.body.scrollleft -document.body.clientleft、
y:ev.clienty + document.body.scrolltop -document.body.clienttop
};
}
}、
拡張:function(oldobj、newobj){
/// <summary>
/// 1:2つのオブジェクトをマージします
/// 1.1-拡張(oldobj、newobj) - 2つのオブジェクトをマージし、マージされたオブジェクトを戻り、クローンに実装するため、2つのオブジェクトに影響を与えないようにします
/// </summary>
/// <param name = "oldobj" type = "object">
///ベースオブジェクトとして使用されるオブジェクトAは、新しいオブジェクトの同じ名前の属性をベースオブジェクトに上書きします
/// </param>
/// <param name = "newobj" type = "object">
///オブジェクトBはマージされます
/// </param>
/// <returns type = "object"/>
var tempobj = tool.clone(oldobj);
for(newobjのvarキー){
if(newobj.hasownproperty(key)&&!tempobj.hasownproperty(key)){
tempobj [key] = newobj [key];
}
}
tempobjを返します。
}、
クローン:function(obj){
/// <summary>
/// 1:オブジェクトのクローニング
/// 1.1-クローン(OBJ) - オブジェクトをクローンし、クローン化された新しいオブジェクトを返します。オブジェクトのプロトタイプは、クローンされたオブジェクトです
/// </summary>
/// <param name = "obj" type = "object">
///クローンするオブジェクト
/// </param>
/// <returns type = "object"/>
関数clone(){}
clone.prototype = obj;
var newobj = new clone();
for(newobjのvarキー){
if(typeof newobj [key] == "object"){
newobj [key] = tool.clone(newobj [key]);
}
}
Newobjを返します。
}、
convertValue:function(value){
/// <summary>
/// 1:値を有効な値に変換します
/// 1.1- convertvalue(value) - JSONによって構成されたCSS値を有効な値に変換してください。値の値が「自動」ではないことを確認してください
/// </summary>
/// <param name = "value" type = "object">
///変換される値
/// </param>
/// <returns type = "object"/>
var reg =/^/d+$/g;
if(typeof(value)=== 'number' || reg.test(value)){
return値 + 'px';
} それ以外
返品値。
}
};
//ウィンドウに登録します
window.linkflyscroll = linkflyscroll;
// window.so namespaceに登録します
if(!window.so){
window.so = {};
}
window.so.scroll = window.linkflyscroll;
})(ウィンドウ);
コードの例
コードコピーは次のとおりです。
<!doctype html public " - // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title> </title>
<link href = "linkflyscroll/linkflyrollcss.css" rel = "styleSheet" type = "text/css"/>
<script src = "linkflyscroll/linkflyscroll-1.0.0.js" type = "text/javascript"> </script>
<script type = "text/javascript">
window.onload = function(){
var config = {
自動:true、//コンテンツがコンテナの高さに達しない場合、スクロールバーは自動的に非表示になりますか
高さ: '100'、//スクロールバーオブジェクトの作業高さ(この高さを超えるとスクロールバーが表示されます)、Autoはオブジェクトの現在の高さを取得します
幅: 'auto' // Scrollbarオブジェクトの動作幅
};
var scrollobj = so.scroll( 'obj'、config);
// scrollobj.change(); // scrollbarコンテンツが変更されたら、scrollbarディスプレイを更新する必要があります。
// scrollobj.roll(value); // scrollbarを特定のポイントに配置すると、値はscrollbarオブジェクトに対する割合です
};
</script>
</head>
<body>
<div id = "obj">
<div>
現在、企業管理の分野で新しい「ファッションスタイル」が出現しており、一部の巨大企業は自分自身のために「スリム」し、よりスマートでアジャイルなビジネスに変身しています。 Oracleソフトウェアは、コンサルタントとサードパーティのサプライヤーに顧客の主なメンテナンスコストをますます変えていることが理解されています。
「中国では、Oracleのビジネスの90%がこれらのパートナーを通じて実施されています。さらに、Oracleの収益をさらに確保するために、CEOのEllisonはハワイの小さな島も購入しました」とCraig Guarente氏は述べています。
グローバルバイスプレジデントとして、グレンテはオラクルの戦略を非常に認識しています。 Guarenteは16年間の実務経験があり、契約管理、ソフトウェアライセンス管理、ソフトウェア監査で豊富な経験を持っています。 2011年にOracleを去った後、彼はPalisadeに参加しました。彼の主なビジネスは、Oracleの顧客がソフトウェア契約、監査介入、ライセンス「最適化」を提供するのを支援することです。
グアレンテは、パリセードのビジネスが非常に急速に発展していると言いました。サードパーティの組織として、Palisadeは顧客が市場に近づき、ユーザーのニーズをより正確に理解できるため、顧客が大量注文を獲得するのを支援します。
一般的に、コンサルティング会社は、顧客が実際のニーズとソフトウェア自体が提供できる価値を整理するのに役立ちます。 Guarenteは、実際の運用を通じて詳細な説明をしました。たとえば、「新しいデータセンターを構築し、新しい災害復旧計画を立ち上げたい場合、またはクラウドに入りたい場合、サードパーティの会社は最初に計画マップを開発し、最終的にユーザーの最終目標を達成するために実装します。自動負荷リポジトリ(AWR)レポートを介してデータベースの問題を診断しますが、これはOracleデータベースパッケージのライセンスが必要です。」
近年、ソフトウェア監査の波が上昇すると、多くの企業がソフトウェア資産管理ツールをインストールして、使用しているソフトウェア、長続きする可能性、および企業の何人の人々を使用しているかを判断しています。しかし、上級管理職のアナリストであるHegedus氏は次のように述べています。「ユーザーがソフトウェアのルールを理解するのに役立つためには、エンタープライズルール、特にOracleの製品アプリケーションを正確に理解できるものはありません。」
では、Oracleのソフトウェアアプリケーションにパッチを当てるにはどうすればよいですか? Oracleのマーク・ハード社長は先週、企業アプリケーションの開始時には、サードパーティの機関がサービスサポーターとして定義されるべきであるため、企業は製品の知的財産権を購入するだけでなく、将来無料のパッチ修理やその他のサポートを取得できると述べました。さらに、企業はコンサルタントを効果的に利用して、エンタープライズが使用するソフトウェアと契約に含まれるべきソフトウェアを理解する際に、コスト管理の最初のステップをサポートする必要があります。あなたの予測と推測のプロセスに従って、ソフトウェアサプライヤーを盲目的に離れ、ソフトウェアを購入しないでください。
</div>
</div>
</body>
</html>
上記はこの記事の内容全体であり、説明は非常に詳細です。気に入っていただければ幸いです。