English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
leonaScroll-1.1最新版
leonaScroll-1.1.js
欢迎使用leonaScroll-1.1.js、使用中にさらに多くの問題が発見された場合は、ご指正をお待ちしております！
更新：1.1バージョン
1、前の初期バージョンでのバグ（例えば、ユーザーのテキスト内容に自動適応できない、CSSファイルが複雑など）が修正されました
2、ユーザーはプラグインを使用するために単一のメソッドを呼び出すだけで十分で、元のclassクラス名に従ってスクロールテキストエリアや外層要素を追加や定義する必要はありません。これにより、より自由な使用が可能になります
3、スクロールバーの幅、上下微調整ボタンの高さ、スクロールテキストエリアの設定が追加されました
4、テキスト内容がオーバーフローしない場合にスクロールバーを表示するかどうかのオプション設定が追加されました。設定しない場合はデフォルトで表示されません
5、スクロールテキスト幅のオプション設定が追加されました。設定しない場合は自動的に最適な幅に適応されます
使用方法：
1、HTMLを構築し、jQueryフレームワークとmousewheelプラグイン、leonaScrollを参照してください-1.1.jsプラグイン
2、$("")..LeonaScroll({speed,scroll_text,sWidth,updownH})を使用してプラグインを呼び出す
3、属性説明：
speed 滚动速度，必须
scroll_text 滚动文本内容class，必须
sWidth 滚动条宽度，必须
updownH 上下微调按钮高度，必须
scrollbar 文本内容未超出时是否显示滚动条，显示为false，不显示为true，可选，默认为true
text_width 滚动文本宽度，可选
leonaScroll-1.0仅供学习参考使用，该版本为本人学习时思路版，尚有不足，新版本修复了很多问题，但仍然存在着二次调用问题。不过已经有了解决方案，只是本人比较懒，没有修复，等待1.2版本修复吧！哈哈！
当然如果有人使用后遇到bug或者不方便的地方，欢迎提出，以便本人继续改进。
学习之余写的小插件，如有什么不足之处，还望见谅。
最后感谢在本插件开发过程中，帮助和解答过我疑问的朋友。尤其感谢Delevin先生的大力解惑！
废话不说了，附js代码和下载地址
一、Html+Css
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<script src="js/jquery-1.10.2.js" type="text/javascript"></script>
<script src="js/mousewheel.js" type="text/javascript"></script>
<script src="js/leonaScroll-min-1.1.js" type="text/javascript"></script>
<style type="text/css">
.left,.Explain,.center,.welcome,.right,.usage{ height:300px;}
.left,.Explain,.Explain_text{ width:200px;}
.right,.usage,.usage_text{ width:700px;}
.center,.welcome,.welcome_text{ width:300px;}
.left,.right,.center{ padding:10px; padding-right:0; float:left; margin-right:10px; background-color: #cac9c9;}
.Explain_text,.welcome_text,.usage_text { font-サイズ: 14px; line-height: 30px; background-color: #cac9c9; color: #000000; }
</style>
</head>
<body>
<div class="left">
<div class="Explain sss">
<div class="Explain_text">
leonaScroll-1.1.js
<br />紹介：jQueryフレームワークに基づき、mousewheelプラグインを組み合わせたカスタムスクロールバーです
<br /><span style="color:red">(表示範囲内に超えていない場合、スクロールバーを表示するように求めます)</span>
</div>
</div>
</div>
<div class="center">
<div class="welcome">
<div class="welcome_text">
leonaScroll-1.1.js
<br />leonaScrollをようこそ-1.1.js、使用中にさらに多くの問題が発見された場合は、ご指正をお待ちしております！
<br />著者：leona
<br />投稿日時：2016-6-16
<br />ブログ：<a href="http://www.cnblogs.com/leona-d/">http://www.cnblogs.com/leona-d/</a>
<br /><span style="color:red">(表示範囲内に超えていない場合、デフォルトでスクロールバーを表示しない)</span>
</div>
</div>
</div>
<div class="right">
<div class="usage">
<div class="usage_text">
leonaScroll-1.1.js
<br />leonaScrollをようこそ-1.1.js、使用中にさらに多くの問題が発見された場合は、ご指正をお待ちしております！
<br />更新：1.1バージョン
<br />1、前の初期バージョンでのバグ（例えば、ユーザーのテキスト内容に自動適応できない、CSSファイルが複雑など）が修正されました
<br />2、ユーザーはプラグインを使用するために単一のメソッドを呼び出すだけで十分で、元のclassクラス名に従ってスクロールテキストエリアや外層要素を追加や定義する必要はありません。これにより、より自由な使用が可能になります
<br />3、スクロールバーの幅、上下微調整ボタンの高さ、スクロールテキストエリアの設定が追加されました
<br />4、テキスト内容がオーバーフローしない場合にスクロールバーを表示するかどうかのオプション設定が追加されました。設定しない場合はデフォルトで表示されません
<br />5、スクロールテキスト幅のオプション設定が追加されました。設定しない場合は自動的に最適な幅に適応されます
<br />使用方法：
<br />1、HTMLを構築し、jQueryフレームワークとmousewheelプラグイン、leonaScrollを参照してください-1.1.jsプラグイン
<br />2、$("")..LeonaScroll({speed,scroll_text,sWidth,updownH})を使用してプラグインを呼び出す
<br />3、属性説明：
<br /> speed スクロール速度、必須
<br /> scroll_text スクロールテキストの内容のclass、必須
<br /> sWidth スクロールバーの幅、必須
<br /> updownH 上下微調整ボタンの高さ、必須
<br /> scrollbar テキスト内容がオーバーフローしない場合にスクロールバーを表示するかどうかのオプション、表示しない場合はfalse、表示する場合はtrue、オプション、デフォルトはtrue
<br /> text_width 滚動テキスト幅，オプション
</div>
</div>
</div>
<script type="text/javascript">
//スクロールバー呼び出しメソッド
$(".Explain").LeonaScroll({ speed: 20, scroll_text: ".Explain_text", sWidth: 14, updownH: 20, scrollbar: false});
$(".welcome").LeonaScroll({ speed: 20, scroll_text: ".welcome_text", sWidth: 14, updownH: 20 });
$(".usage").LeonaScroll({ speed: 20, scroll_text: ".usage_text", sWidth: 14, updownH: 20 });
</script>
</body>
</html>
二、Jquery
$.fn.extend({
generateUUID: function () {
//ユニークID数値生成
var d = new Date().getTime();
var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
var r = (d + Math.random() * 16) % 16 | 0; d = Math.floor(d / 16); return (c == 'x' ? r : (r & 0x7 8)).toString(16);
}); return uuid;
},
LeonaScroll: function (parameter) {
var Sname = $(this).selector;
return this.each(function () {
//変数宣言
var elem = $(this), celem = $(this).find(parameter.scroll_text), index = $(this).generateUUID(), text_hidden = $(elem).height(), con_width = $(elem).width();
//スクロールバーのHTMLを追加
var scrollHTML = "";
scrollHTML += "<div class='scroll_up leonaup" + index + "'></div>";
scrollHTML += "<div class='scroll_cen leonacen" + index + "'><div class='scroll_button leonabutton" + index + "'></div></div>";
scrollHTML += "<div class='scroll_down leonadown" + index + "'></div>";
$(elem).append("<div class='scroll leonas" + index + "'> " + scrollHTML + "</div>");
//スクロールバーのCSSを追加
var scrollStyle = "";
scrollStyle += "body { -moz-ユーザー-select: none; /*ファイアフォックス*/ -webkit-ユーザー-select: none; /*webkitブラウザ*/ -ms-ユーザー-select: none; /*IE10*/ -khtml-ユーザー-select: none; /*初期ブラウザ*/ ユーザー-select: none; }";
scrollStyle +＝ Sname + 「{ ポジション: レレーショナル; オーバーフロー-y: かくし; クリア: なしあり }」;
scrollStyle +＝ パラメータ.scroll_text + 「{ウィドス:" + (パラメータ.text_width === アンデフィンデッド ?； (コン_width - パラメータ.sWidth) : パラメータ.text_width) + 「ピクセル; ワード-ブレイク: ブレイク-ワード; ポジション: あくてつ; left: 0; top: 0; クリア:ぶろ; }」;
scrollStyle +＝「.scroll { ハイト:" + text_hidden + 「ピクセル; フロート:ライト; }\r\n」;
scrollStyle +＝「.scroll,.scroll .scroll_cen, .scroll .scroll_up, .scroll .scroll_down { ウィドス:" + パラメータ.sWidth + 「ピクセル; }」;
scrollStyle +＝「.scroll .scroll_up, .scroll .scroll_down {ハイト:" + parameter.updownH + 「ピクセル; ライン-ハイト: 「 + parameter.updownH + 「ピクセル; カラー: #ffffff; フォント-サイズ: 12ピクセル; フォント-ウェイト: bold; バックグラウンド-イメージ:URL(/img/bw.png); バックグラウンド-カラー:#161515； バックグラウンド-リピート: ノー-リピート; カーソル: ポインタ;}」;
scrollStyle +＝「.scroll .scroll_up{background"-ポジション: 0ピクセル 6ピクセル; ボーダー-radius:5ピクセル 5ピクセル 0 0; }」;
scrollStyle +＝「.scroll .scroll_down{ background"-ポジション:0ピクセル -49ピクセル; ボーダー-エッジ半径:0 0 5ピクセル 5ピクセル; }」;
scrollStyle +＝「.scroll .scroll_up:hover{background"-ポジション:0ピクセル -11ピクセル; }」;
scrollStyle +＝「.scroll .scroll_down:hover{background"-ポジション:0ピクセル -31ピクセル; }」;
scrollStyle +＝「.scroll .scroll_cen { height:" + (text_hidden - parameter.updownH * 2) + "px; background-color: #777676; position: relative; }";
scrollStyle += ".scroll .scroll_cen .scroll_button { width:" + (parameter.sWidth - 2) + "px; margin: 0px 1px; background:url(/img/tiao.jpg) repeat-y 0 0; border-radius: 5px; position: absolute; cursor: pointer; }";
$("head").append("<style type='text/css'>" + scrollStyle + "</style>");
//変数宣言
var text_show = $(celem).height(), scroll_b = $(".leonabutton" + index + ""), text_p = text_hidden / text_show, bH_max = $(".leonas" + index + " .leonacen" + index + "").height(), bH = text_p * bH_max;
if (parameter.scrollbar == true || parameter.scrollbar === undefined) {
if (text_p >= 1) $(".leonas" + index + "").css("display", "none"); else { $(".leonas" + index + "").css("display", "block"); scroll_b.css("height", bH + "px"); }
} else return;
//マウスでdivをドラッグするイベント
var needMove = false, mouseY = 0;
scroll_b.mousedown(function (event) { needMove = true; var bH_Top = scroll_b.position().top; mouseY = event.pageY - bH_Top; });
$(document).mouseup(function (event) { needMove = false; });
$(document).mousemove(function (event) {}}
if (needMove) {
var sMouseY = event.pageY, bH_Top = sMouseY - mouseY, textY = bH_Top / bH_max * text_show;
if (bH_Top <= 0) scroll_b.css("top", 0); $(celem).css("top", 0); return;
if (bH_Top >= bH_max - bH) scroll_b.css("top", bH_max - bH); $(celem).css("top", text_hidden - text_show); return;
scroll_b.css("top", bH_Top); $(celem).css("top", -textY);
}
});
//上下スクロールのルールを定義
function goGun(direction, timer) {
bH_Top = scroll_b.position().top;
var h = 0; h += parameter.speed; //調節スライド速度
if (direction == 1) { //up
var Toping = bH_Top - h;
if (bH_Top <= 0 || Toping <= 0) {
scroll_b.css("top", 0); $(celem).css("top", 0);
if (timer == 2) clearInterval(goThread); //need timer
return;
}
scroll_b.css("top", bH_Top - h);
});
if (direction == -1) { //down
var Downing = bH_Top + h;
if (bH_Top >= bH_max - bH || Downing >= bH_max - bH) {
scroll_b.css("top", bH_max - bH);
$(celem).css("top", text_hidden - text_show);
if (timer == 2) clearInterval(goThread); //need timer
return;
}
scroll_b.css("top", bH_Top + h);
}
var textY = bH_Top / bH_max * text_show;
$(celem).css("top", -textY);
});
//上下微调按钮事件
function minTiao(minTB, d, t) {
var goThread = "";
minTB.mouseup(function () { clearInterval(goThread); });
minTB.mousedown(function () {
clearInterval(goThread);
goThread = setInterval(function () { goGun(d, t); }, 300);
});
minTB.click(function () { goGun(d); });
});
minTiao($(".leonaup" + index + ""), 1, 2);//up
minTiao($(".leonadown" + index + ""), -1, 2);//down
//スクロールイベント
if (text_p < 1) {
$("elem").bind("mousewheel", function (event, delta, deltaX, deltaY) {
if (delta == 1) {//up
goGun(1, 0);
if (delta ==
return false;
} -1) {//down
goGun(-1, 0);
if (Math.ceil(scroll_b.position().top) != Math.ceil(bH_max - bH))
return false;
}
});
}
});
}
});
以上は、編集者が皆様に紹介したjQuery leonaScrollです。 1.1 カスタムスクロールバープラグインです。皆様に役立つことを願っています。何かご不明な点があれば、コメントをお願いします。編集者は迅速に回答します。
声明：本文の内容はインターネットから収集され、著作権者に帰属します。インターネットユーザーにより自発的に貢献し、自己でアップロードされたものであり、本サイトは所有権を有しません。また、人工編集は行われておらず、関連する法的責任も負いません。著作権侵害を疑う内容があれば、メールでお知らせください：notice#oldtoolbag.com（メール送信時は、#を@に変更してください）で通報してください。関連する証拠を提供し、一旦確認が取れた場合、本サイトは即座に侵害疑いのコンテンツを削除します。