Ein nahtloses Scroll-Plug-in, das ich mit jquery_jquery geschrieben habe

效果图:

 

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 { margin: 0; Polsterung: 0; list-style-type:none;}
ul,div { height: 200px; Rand: 1 Pixel durchgehend rot; Breite: 300px; padding: 30px;margin:10px;list-style-type:none;}
li,p { height: 30px; Zeilenhöhe: 30px; Rand oben: 10px; Hintergrundfarbe: Grau; Farbe: Gelb; margin-left:10px;}
#guoul1{ width:1000px; Höhe: 188 Pixel; Rand: 0; padding: 0;}
#guoul1 li{ width:300px; Höhe: 188 Pixel; Rand: 0; Polsterung: 0; margin-left:10px;}

js-Plug-in-Code:

Code kopieren Der Code lautet wie folgt:

; (function ($ ) {
var defaults = {
dir: "left", //none: nicht bewegt, oben: oben, rechts: rechts, unten: unten, rechts: links
Verzögerung: 30, //execute Time
};
$.fn.gysContentDisplay = function (opt) {
opt = $.extend({}, defaults, opt);

/ Globaler Variablenbereich
var obj = $(this); //Aktuelles Objekt
obj.css({ "overflow": "hidden" }); //Initialisierungselement
if (opt.dir == "none") return ;
var objLis = obj.children(); //Untergeordnete Elemente im Objekt
objLis.css({ "overflow": "hidden" }); ; //Äußere Rahmengröße
var scrollEvent = "scrollLeft"; //Die Bildlaufrichtung der Bildlaufleiste
var liTotalSize = 0, liTotalSizeOther = 0; , die Gesamtgröße nach dem Klonen
var scrollSize = 0, //Der tatsächliche Abstand der Bildlaufleiste
scrollSizeMax = 0, //Der maximale Abstand der Bildlaufleiste
scrollSizeMin = 0; //Der minimale Abstand der Bildlaufleiste
var Interval = "" ; //Record setInterval

if (opt.dir == "up" || opt.dir == "down") {//Up and down
objSize = obj.innerHeight();
scrollEvent = "scrollTop";
obj.css({ "padding-top": 0, "padding-bottom": 0 }).height(objSize );
}
else if (opt.dir == "left" || opt.dir == "right") {//Left und left
objSize = obj.innerWidth(); >scrollEvent = "scrollLeft";
obj.css({ "padding -left": 0, "padding-right": 0 }).width(objSize);
else {
warning("Ihr dir-Parameter ist falsch");
}

var getChildTotalSize = function (dir) {//Definieren Sie die Methode, um die Gesamtgröße von li zu erhalten
if (dir == " left" || dir == "right") {
objLis.css( "float", "left");
return function () {
objLis.each(function () {
liTotalSize = $(this).outerWidth(true);
}); >objLis.css("float", "none");
return function () {
objLis.each(function () {
liTotalSize = $(this).outerHeight(true);
});
}
} (opt. dir); (function () {
var cloneCount = Math.ceil(objSize * 2 / liTotalSize ); //Wie oft untergeordnete Elemente zugewiesen werden sollen
var cloneHtmlNow = "", cloneHtmlStart = obj.html(); // Ursprüngliche untergeordnete Elementzeichenfolge

for (var i = 0; i cloneHtmlNow = cloneHtmlStart;
obj.append(cloneHtmlNow); = (cloneCount 1) * liTotalSize; // Länge nach dem Hinzufügen untergeordneter Elemente abrufen
})();


if (opt.dir == "left" || opt.dir = = "right") {
obj.css({ "position": " relative", "z-index": 0 });
obj.children().css({ "position": "absolute ", "z-index": 1 });
var left = 0 ;
obj.children().each(function () {
$(this).css({ "left": left "px", "top": 0 });
left = $ (this).outerWidth(true);


); Balken-Scroll-Methode
function scrollChange(dir) {
if (dir == "left" || dir == "up") {
obj[scrollEvent](0); () {
scrollSize;
if (scrollSize >= liTotalSize ) scrollSize = 0;
obj[scrollEvent](scrollSize);
else if (dir = = "right" ||. dir == "down") {
scrollSizeMax = liTotalSizeOther - obj[scrollEvent](scrollSizeMax);
scrollSizeMin = scrollSizeMax - liTotalSize;
scrollChange = function () {
scrollSize--;if (scrollSize };
scrollChange(opt.dir);
Interval = setInterval(scrollChange, opt.delay);
obj.children().on("mouseover", function () {
clearInterval(interval);
}).on("mouseleave", function () {
interval = setInterval(scrollChange, opt.delay);
}
} )(jQuery);


Plug-in-Aufruf:




Code kopieren


Der Code lautet wie folgt :


$(function () {
$(" #guoul1").gysContentDisplay({ dir: "right" });
$("#guoul2").gysContentDisplay ({ dir: "left" });
$("#guoul3").gysContentDisplay ({ dir: "up" });
$("#guoul4").gysContentDisplay({ dir: "down " });
$("#guoul5").gysContentDisplay({ dir: "right " });
$("#guoul6").gysContentDisplay({ dir: "none" });
})