html代码:

jquery_jquery를 사용하여 직접 작성한 원활한 스크롤 플러그인

WBOY
풀어 주다: 2016-05-16 16:50:24
원래의
1117명이 탐색했습니다.

效果图:

jquery_jquery를 사용하여 직접 작성한 원활한 스크롤 플러그인 

html代码:

复system代码 代码如下:

无缝滚动,向右滚动



  • jquery_jquery를 사용하여 직접 작성한 원활한 스크롤 플러그인

  • f2

  • f3

  • f4

  • f5

  • f6

  • f7



无缝滚动,向左滚动



  • 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; 목록 스타일 유형:없음;}
ul,div { 높이: 200px; 테두리: 1px 단색 빨간색; 너비: 300px; 패딩: 30px;마진:10px;list-style-type:none;}
li,p { 높이: 30px; 줄 높이: 30px; 여백 상단: 10px; 배경색: 회색; 색상: 노란색; 여백-왼쪽:10px;}
#guoul1{ 너비:1000px; 높이:188px;여백: 0; 패딩: 0;}
#guoul1 li{ 너비:300px; 높이:188px;여백: 0; 패딩: 0; 여백-왼쪽:10px;}

js 플러그인 코드:
코드 복사 코드는 다음과 같습니다.

; (함수 ($ ) {
var defaults = {
dir: "왼쪽", //없음: 이동하지 않음, 위: 위, 오른쪽: 오른쪽, 아래: 아래, 오른쪽: 왼쪽
지연: 30, //시간 실행
};
$.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" }) var objSize = 0 ; //외부 프레임 크기
var scrollEvent = "scrollLeft"; //스크롤 막대의 스크롤 방향
var liTotalSize = 0, liTotalSizeOther = 0; //각 li 요소의 크기(너비 또는 높이) , 복제 후 전체 크기
var scrollSize = 0, //스크롤 막대의 실제 거리
scrollSizeMax = 0, //스크롤 막대의 최대 거리
scrollSizeMin = 0 //최소; 스크롤 막대의 거리
var 간격 = "" ; //setInterval 기록

if (opt.dir == "up" || opt.dir == "down") {//위 및 down
objSize = obj.innerHeight();
scrollEvent = "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(); // 원래 하위 요소 문자열

for (var i = 0; i cloneHtmlNow = cloneHtmlStart
}
obj.append(cloneHtmlNow)
liTotalSizeOther = (cloneCount 1) * liTotalSize; //하위 요소 추가 후 길이 가져오기
})()


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


//Scroll 막대 스크롤 방법
function scrollChange(dir) {
if (dir == "left" || dir == "up") {
obj[scrollEvent](0)
scrollChange = function () {
scrollSize;
if (scrollSize >= liTotalSize ) scrollSize = 0
obj[scrollEvent](scrollSize)
}
}
else if (dir = = "right" || dir == "down") {
scrollSizeMax = liTotalSizeOther - objSize;
obj[scrollEvent](scrollSizeMax);
scrollSize = scrollSizeMax - liTotalSize;
scrollChange = function () {
scrollSize--;
if (scrollSize obj[scrollEvent](scrollSize)
}
};
scrollChange(opt.dir);
간격 = setInterval(scrollChange, opt.delay)
obj.children().on("mouseover", function () {
clearInterval(interval);
}).on("mouseleave", function () {
interval = setInterval(scrollChange, opt.delay);
}); )(jQuery);


플러그인 호출:




코드 복사


코드는 다음과 같습니다. :
$(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" });
})

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿