jquery_jquery を使用して自分で作成したシームレススクロールプラグイン

效果图:



html代:

复制代 代価以下:

無缝滚動、向右滚動

• 


• 


• 


• 


• 


• 


• 

無缝滚動、方向左滚動

• 111111111111


• 222222222222


• 3333333333333


• 4444444444444


• 5555555555555


• 6666666666666


• 7777777777777


• 8888888888888


• 9999999999999

無缝滚動、向上滚動

• 111111111111


• 222222222222


• 3333333333333


• 4444444444444


• 5555555555555


• 6666666666666


• 7777777777777


• 8888888888888


• 9999999999999

無缝滚動、向下滚動

• 111111111111


• 222222222222


• 3333333333333


• 4444444444444


• 5555555555555


• 6666666666666


• 7777777777777


• 8888888888888


• 9999999999999

無缝滚動、非ul、li标签組合、右滚動

111111111111

222222222222

3333333333333

4444444444444

5555555555555

6666666666666

7777777777777

8888888888888

9999999999999

不動

• 111111111111


• 222222222222


• 3333333333333


• 4444444444444


• 5555555555555


• 6666666666666


• 7777777777777


• 8888888888888


• 9999999999999

css代記入:

复制代記入 代記入如下:

ul、li、h1 {マージン: 0;パディング: 0; list-style-type:none;}
ul,div {高さ: 200px;境界線: 1 ピクセルの赤一色。幅: 300ピクセル;パディング: 30px;マージン:10px;リストスタイルタイプ:なし;}
li,p { 高さ: 30px;行の高さ: 30px;マージントップ: 10px;背景色: グレー;色: 黄色; margin-left:10px;}
#guoul1{ width:1000px;高さ:188ピクセル;マージン:0;パディング: 0;}
#guoul1 li{ width:300px;高さ:188ピクセル;マージン:0;パディング: 0; margin-left:10px;}

js プラグイン コード:

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

; (function ($ ) {
var defaults = {
dir: "left", //なし: 移動なし、上: 上、右: 右、下: 下、右: 左
遅延: 30, //Time
};
$.fn.gysContentDisplay = function (opt) {
opt = $.extend({}, defaults, opt);グローバル変数 area
var obj = $(this); //現在のオブジェクト
obj.css({ "overflow": "hidden" }); //初期化要素
if (opt.dir == "none") return ;
var objLis = obj.children(); //オブジェクト内の子要素 ​​
objLis.css({ "overflow": "hidden" }); ; //外枠のサイズ
varscrollEvent = "scrollLeft"; //スクロールバーのスクロール方向
var liTotalSize = 0, liTotalSizeOther = 0; //各 li 要素のサイズ (幅または高さ) 、クローン作成後の合計サイズ
varscrollSize = 0, //スクロールバーの実際の距離
scrollSizeMax = 0, //スクロールバーの最大距離
scrollSizeMin = 0;スクロールバーの距離
var interval = "" ; //レコード setInterval

if (opt.dir == "up" || opt.dir == "down") {//Up andダウン
objSize = obj.innerHeight();
スクロールイベント = "scrollTop"
obj.css({ "padding-top": 0, "padding-bottom": 0 }).height(objSize) );
}
else if (opt.dir == "left" || opt.dir == "right") {//左と左
objSize = obj.innerWidth(); >scrollEvent = "scrollLeft";
obj.css({ "padding -left": 0, "padding-right": 0 }).width(objSize)
}
else {
alert("dir パラメータが間違っています");
}

var getChildTotalSize = function (dir) {//li
if (dir == ") の合計サイズを取得するメソッドを定義しますleft" || dir == "right") {
objLis.css( "float", "left");
return function () {
objLis.each(function () {
liTotalSize = $(this).outerWidth(true);
});
}
}
else if (dir == "up" || dir == "down") {
objLis.css("float", "none");
return function () {
objLis.each(function () {
liTotalSize = $(this).outerHeight(true);
});
}
}
} (opt. dir);
getChildTotalSize(); //すべての li の合計サイズを取得し、メソッド

に割り当てます。 (function () {
var cloneCount = Math.ceil(objSize * 2 / liTotalSize ); //子要素を割り当てる回数
var cloneHtmlNow = "", cloneHtmlStart = obj.html(); //元の子要素 ​​string

for (var i = 0; i cloneHtmlNow = cloneHtmlStart;
}
obj.append(cloneHtmlNow); = (cloneCount 1) * liTotalSize; //子要素追加後の長さを取得
})();


if (opt.dir == "left" || opt.dir = = "右") {
obj.css({ "位置": "相対", "z-index": 0 });
obj.children().css({ "位置": "絶対", "z-index": 1 });
var left = 0 ;
obj.children().each(function () {
$(this).css({ "left": left "px", "top": 0 });
left = $(this).outerWidth(true)
}


//スクロールバースクロールメソッド
functionscrollChange(dir) {
if (dir == "left" || dir == "up") {
obj[scrollEvent](0); () {
scrollSize;
if (scrollSize >= liTotalSize ) スクロールサイズ = 0;
}
}
else if (dir = = "右" || dir == "下") {
scrollSizeMax = liTotalSizeOther - objSize;
scrollSize =scrollSizeMax - liTotalSize;
scrollChange = function () {
scrollSize--;
if (scrollSize obj[scrollEvent](scrollSize);
}
};
scrollChange(opt.dir);
間隔 = setInterval(scrollChange, opt.delay);
obj.children().on("mouseover", function () {
clearInterval(間隔);
}).on("mouseleave", function () {
間隔 = setInterval(scrollChange, opt.delay);
}); )(jQuery);


プラグイン呼び出し:




コードをコピー


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


$(function () {

$(" #guoul1").gysContentDisplay({ dir: "right" });
$("#guoul2").gysContentDisplay ({ dir: "左" });
$("#guoul3").gysContentDisplay ({ dir: "上" });

$("#guoul4").gysContentDisplay({ dir: "下" }); $("#guoul5").gysContentDisplay({ dir: "right " }); $("#guoul6").gysContentDisplay({ dir: "none" }); })