jquery 슬라이드 윤방도, 터치스크린wap스테이션을 지원합니다. 코드는 다음과 같습니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> jQuery （ ）</title>
<style type="text/css">
.WSCSlideWrapper{
width: 420px;
height: 180px;
position: relative;
overflow: hidden;
}
.WSCSlide{
width: 1680px;
height: 100%;
font-size: 0;
position: absolute;
-webkit-transform:translate3d(0,0,0);
}
.WSCSlideTransition{
-webkit-transition: all 0.5s 0s ease-in-out;
}
.WSCSlide_img{
width: 420px;
height: 180px;
}
</style>
</head>
<body>
<div class="WSCSlideWrapper">
<div class="WSCSlide WSCSlideTransition">
<img class="WSCSlide_img" src="logo_bg.png" />
<img class="WSCSlide_img" src="about.png" />
<img class="WSCSlide_img" src="index_bg.png" />
</div>
<div class="WSCSlideStatus"></div>
</div>
<script src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
// jQuery ， zepto with
//
// ：
// WSCSlideTransition Transition class
// WSCSlideWrapper jQuery
// WSCSlide jQuery
// WSCSlide_img jQuery
// timerNum
function WSCMobileSlide(arg_obj) {
/*
:
el jQuery
:
matrix.m41 x number
matrix.m42 y number
http://stackoverflow.com/questions/5968227/get-the-value-of-webkit-transform-of-an-element-with-jquery
https://developer.apple.com/library/safari/documentation/AudioVideo/Reference/WebKitCSSMatrixClassReference/WebKitCSSMatrix/WebKitCSSMatrix.html#//apple_ref/javascript/instp/WebKitCSSMatrix/m41
*/
function getTransform(el) {
var style = window.getComputedStyle($(el).get(0));
var matrix = new WebKitCSSMatrix(style.webkitTransform);
return matrix;
}
function slideAnimate(x, y) {
if (Math.abs(x) >= y) {
// $(".WSCSlide").removeClass("WSCSlideTransition");
$(".WSCSlide").css("-webkit-transform", "translate3d(0,0,0)");
} else {
// $(".WSCSlide").addClass("WSCSlideTransition");
$(".WSCSlide").css("-webkit-transform", "translate3d(" + x + "px,0,0)");
}
}
function getSlideTimer(timeNum) {
if(typeof(timeNum) == "undefined"){
timeNum = 3000;
}
var slideTimer = setInterval(function() {
var x = getTransform(".WSCSlide").m41;
x = x - ImgWidth;
slideAnimate(x, endPosition);
}, timeNum);
return slideTimer;
}
function touchDragMe($element) {
var gundongX = 0;
var gundongY = 0;
var d = document;
var g = 'getElementById';
var moveEle = $element;
var stx = sty = etx = ety = curX = curY = 0;
moveEle.on("touchstart", function(event) { //touchstart
$element.removeClass(transitionName);
clearInterval(slideTimer);
var event = event.originalEvent;
gundongX = 0;
gundongY = 0;
//
etx = parseInt(getT3d(moveEle, "x"));
ety = parseInt(getT3d(moveEle, "y"));
//
stx = event.touches[0].pageX;
sty = event.touches[0].pageY;
});
moveEle.on("touchmove", function(event) {
var event = event.originalEvent;
//
event.preventDefault();
//
gundongX = event.touches[0].pageX - stx;
gundongY = event.touches[0].pageY - sty;
//
curX = gundongX + etx;
curY = gundongY + ety;
//
// moveEle.style.webkitTransform = 'translate3d(' + (curX) + 'px, ' + (curY) + 'px,0px)';
// Y
// var realMoveEle = moveEle[0];
moveEle[0].style.webkitTransform = 'translate3d(' + (curX) + 'px, ' + 0 + 'px,0px)';
});
moveEle.on("touchend", function(event) {
//
var oriX = etx;
var oriY = ety;
//
etx = curX;
ety = curY;
var slidePosition = 0;
for (var i = 0; i < ImgWidth_arr_length - 1; i++) {
if (Math.abs(etx) > ImgWidth_arr[i]) {
if (oriX > etx) {
//
slidePosition = -ImgWidth_arr[i + 1];
} else {
//
slidePosition = -ImgWidth_arr[i];
}
}
}
$element.addClass(transitionName);
slideAnimate(slidePosition, endPosition);
slideTimer = getSlideTimer(timerNum);
});
function getT3d(elem, ename) {
var elem = elem[0];
var str1 = elem.style.webkitTransform;
if (str1 == "") return "0";
str1 = str1.replace("translate3d(", "");
str1 = str1.replace(")", "");
var carr = str1.split(",");
if (ename == "x") return carr[0];
else if (ename == "y") return carr[1];
else if (ename == "z") return carr[2];
else return "";
}
}
var transitionName = arg_obj["WSCSlideTransition"] || "WSCSlideTransition";
var $WSCSlideWrapper = arg_obj["WSCSlideWrapper"] || $(".WSCSlideWrapper");
var $WSCSlide = arg_obj["WSCSlide"] || $(".WSCSlide");
var $WSCSlide_img = arg_obj["WSCSlide_img"] || $(".WSCSlide_img");
var timerNum = arg_obj["timerNum"] || 3000;
$WSCSlide_img.width($WSCSlideWrapper.width());
$WSCSlide_img.height($WSCSlideWrapper.height());
var ImgWidth_arr_length = $WSCSlide_img.length;
var ImgWidth = $WSCSlide_img.width();
$WSCSlide.width(ImgWidth * ImgWidth_arr_length);
var WSCSlideWidth = $WSCSlide.width();
//
var endPosition = WSCSlideWidth - ImgWidth;
var ImgWidth_arr = [];
for (var i = 0; i < ImgWidth_arr_length; i++) {
ImgWidth_arr.push(i * ImgWidth);
}
// console.log(ImgWidth_arr);
var slideTimer = getSlideTimer(timerNum);
touchDragMe($WSCSlide, slideTimer);
return slideTimer;
}
WSCMobileSlide({
"WSCSlideTransition": "WSCSlideTransition",
"WSCSlideWrapper": $(".WSCSlideWrapper"),
"WSCSlide": $(".WSCSlide"),
"WSCSlide_img": $(".WSCSlide_img"),
"timerNum": 3000
});
</script>
</body>
</html>이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
