Un plug-in de défilement transparent écrit par moi-même en utilisant 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 { marge : 0 ; remplissage : 0 ; list-style-type:none;}
ul,div { hauteur : 200px ; bordure : 1px rouge uni ; largeur : 300 px ; padding : 30px;margin:10px;list-style-type:none;}
li,p { hauteur : 30px; hauteur de ligne : 30 px ; marge supérieure : 10 px ; couleur d'arrière-plan : gris ; couleur : jaune ; margin-left:10px;}
#guoul1{ width:1000px; hauteur : 188 px ; marge : 0 ; padding : 0;}
#guoul1 li{ width:300px; hauteur : 188 px ; marge : 0 ; remplissage : 0 ; marge-gauche:10px;}

Code du plug-in js :

Copier le code Le code est le suivant :

; (function ($ ) {
var defaults = {
dir : "gauche", //aucun : ne bouge pas, haut : haut, droite : droite, bas : bas, droite : gauche
délai : 30, //exécuter l'heure
} ;
$.fn.gysContentDisplay = function (opt) {
opt = $.extend({}, valeurs par défaut,

// Zone de variable globale
var obj = $(this); //Objet actuel
obj.css({ "overflow": "hidden" }); //Élément d'initialisation
if (opt.dir == "aucun") return ;
var objLis = obj.children(); //Éléments enfants dans l'objet
objLis.css({ "overflow": "hidden" }); ; //Taille du cadre extérieur
var scrollEvent = "scrollLeft"; //La direction de défilement de la barre de défilement
var liTotalSize = 0, liTotalSizeOther = 0; //La taille de chaque élément li (largeur ou hauteur) , la taille totale après clonage
var scrollSize = 0, //La distance réelle de la barre de défilement
scrollSizeMax = 0, //La distance maximale de la barre de défilement
scrollSizeMin = 0 //Le minimum; distance de la barre de défilement
var interval = "" ; //Record setInterval

if (opt.dir == "up" || opt.dir == "down") {//Up et down
objSize = obj.innerHeight();
scrollEvent = "scrollTop"
obj.css({ "padding-top": 0, "padding-bottom": 0 }).height(objSize );
}
else if (opt.dir == "left" || opt.dir == "right") {//Gauche et gauche
objSize = obj.innerWidth(); >scrollEvent = "scrollLeft";
obj.css({ "padding -left": 0, "padding-right": 0 }).width(objSize);
else {
alert("Votre paramètre dir est incorrect");
}

var getChildTotalSize = function (dir) {//Définissez la méthode pour obtenir la taille totale de 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(); //Obtenir la taille totale de tous les li et l'attribuer dans la méthode

(function () {
var cloneCount = Math.ceil(objSize * 2 / liTotalSize ); //Combien de fois attribuer des éléments enfants
var cloneHtmlNow = "", cloneHtmlStart = obj.html(); // Chaîne d'élément enfant d'origine

for (var i = 0; i cloneHtmlNow = cloneHtmlStart;
obj.append(cloneHtmlNow
liTotalSizeOther); = (cloneCount 1) * liTotalSize; //Obtenir la longueur après avoir ajouté des éléments enfants
})();


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);
}


//Scroll; méthode de défilement de la barre
function scrollChange(dir) {
if (dir == "left" || dir == "up") {
obj[scrollEvent](0
scrollChange = function); () {
scrollSize;
if (scrollSize >= liTotalSize ) scrollSize = 0;
obj[scrollEvent](scrollSize); = "right" || dir == "down") {
scrollSizeMax = liTotalSizeOther - objSize;
obj[scrollSizeMax);
scrollChange = function () {
scrollSize--;
if (scrollSize obj[scrollEvent](scrollSize);
};
scrollChange(opt.dir);
interval = setInterval(scrollChange, opt.delay);
obj.children().on("mouseover", function () {
clearInterval(intervalle);
}).on("mouseleave", function () {
interval = setInterval(scrollChange, opt.delay);
}); )(jQuery);


Appel du plug-in :




Copier le code


Le code est le suivant :


$(function () {
$(" #guoul1").gysContentDisplay({ dir: "right" });

$("#guoul2").gysContentDisplay ({ dir : "gauche" });
$("#guoul3").gysContentDisplay ({ dir: "up" });
$("#guoul4").gysContentDisplay({ dir: "down" " });

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