<!DOCTYPE html>
<html>
<head>
<title>3d</title>
<meta charset="utf-8"/>
<meta id="viewport" name="viewport" content="width=device-width; initial-scale=1.0;maximum-scale=1.0; user-scalable=no;"/>
<script type="text/javascript" src="http://cdn.staticfile.org/jquery/2.1.1-rc2/jquery.js"></script>
<script type="text/javascript">
$(function(){
new Matrix3D({father:‘box3d‘,width:153,distance:20});
});
</script>
</head>
<style type="text/css">
body{background:#999;}
* {
padding: 0;
margin: 0
}
.box3d {
height: 150px;
position: relative;
margin: 0 0px;
margin-top: 150px;
}
ul li {
list-style: none;
height: 140px;
width: 153px;
position: absolute;
top: 0;
left: 0;
-webkit-backface-visibility: visible;
-webkit-transform-origin: 50% 50%;
-moz-backface-visibility: visible;
-moz-transform-origin: 50% 50%;
border: 1px solid red;
backface-visibility: visible;
transform-origin: 50% 50%;
-webkit-box-reflect: below -16px -webkit-gradient(linear, 0 0, 0 100%, from(transparent), to(white));
-moz-box-reflect: below -16px -moz-gradient(linear, 0 0, 0 100%, from(transparent), to(white));
box-reflect: below -16px -webkit-gradient(linear, 0 0, 0 100%, from(transparent), to(white));
-webkit-box-shadow: 0 4px 14px rgba(0,0,0,0.6);
-moz-box-shadow: 0 4px 14px rgba(0,0,0,0.6);
box-shadow: 0 4px 14px rgba(0,0,0,0.6);
-webkit-transition: 1s all ease;
-moz-transition: 1s all ease;
-ms-transition: 1s all ease;
-o-transition: 1s all ease;
}
.box3d li.left {
-moz-transform: perspective(300px) rotateY(40deg);
transform: perspective(300px) rotateY(40deg);
-webkit-transform: perspective(300px) rotateY(40deg);
}
.box3d li.right {
-moz-transform: perspective(300px) rotateY(140deg);
transform: perspective(300px) rotateY(140deg);
-webkit-transform: perspective(300px) rotateY(140deg);
}
.box3d li.middle {
z-index: 990;
-webkit-transform: perspective(500px) rotateY(0deg) translate3d(0px, 0px, 100px);
-moz-transform: perspective(500px) rotateY(0deg) translate3d(0px, 0px, 100px);
transform: perspective(500px) rotateY(0deg) translate3d(0px, 0px, 100px);
cursor: pointer;
}
.btn span {
width: 22px;
height: 22px;
background: url(images/btn.jpg) no-repeat;
display: inline-block;
-webkit-transform: scale(1);
-webkit-transition: 0.5s all ease;
-moz-transform: scale(1);
-moz-transition: 0.5s all ease;
-ms-transform: scale(1);
-ms-transition: 0.5s all ease;
opacity: 0.7;
-o-transform: scale(1);
-o-transition: 0.5s all ease;
filter: alpha(opacity=70);
cursor: pointer;
}
.box3d li img {
width: 100%;
height: 100%
}
.btn {
height: 22px;
width: 60px;
position: absolute;
left: 50%;
margin-left: -30px;
top: 20px;
}
.box3d li span {
position: absolute;
left: 0;
top: 0;
}
.btn span:hover {
-webkit-transform: scale(1.4);
opacity: 1;
}
.btn .prev {
background-position: left;
}
.btn .next {
background-position: right;
}
ul li:nth-child(1) {
}
ul li:nth-child(2) {
}
ul li:nth-child(3) {
}
ul li:nth-child(4) {
z-index: 99;
}
ul li:nth-child(5) {
z-index: 88;
}
ul li:nth-child(6) {
z-index: 77;
}
</style>
<body>
<div class="box3d" id="box3d">
<ul>
<li class=""> <img src="images/1.jpg" ></li>
<li class=""> <img src="images/2.jpg" ></li>
<li class=""> <img src="images/3.jpg" ></li>
<li class=""> <img src="images/4.jpg" ></li>
<li class=""> <img src="images/5.jpg" ></li>
</ul>
</div>
<div class="btn">
<span class="prev" ></span>
<span class="next" ></span>
</div>
</body>
</html>
<script type="text/javascript">
function Matrix3D(config) {
this.config = config;
this.position = [];
this.init();
};
$.extend(Matrix3D.prototype, {
init: function() {
this.setConfig();
this.addTouchChange();
},
setConfig: function() {
var that = this;
var leftValue = 0;
this.fater = this.config.father;
this.li = $(‘#‘ + this.fater).find(‘li‘);
this.count = (this.li.length - 1) / 2;
this.width = $(‘#‘ + this.fater).innerWidth() - this.config.width;
this.distc = ((this.width / 2) / this.count);
this.li.each(function(index, obj) {
if (index < that.count) {
leftValue = that.distc * index - index * (that.config.distance)
$(this).addClass("left").css(‘left‘, leftValue);
} else if (index == (that.count)) {
leftValue = that.width / 2
$(this).addClass("middle").css(‘left‘, leftValue);
} else if (index > that.count) {
var current = that.li.eq(index).addClass("right");
if (index == (that.li.length - 1)) {
leftValue = that.distc * index;
current.css(‘left‘, leftValue);
} else {
leftValue = that.distc * index + ((that.li.length - index - 1) * (that.config.distance));
current.css(‘left‘, leftValue);
}
}
that.position.push(leftValue);
});
$(".btn .prev").on("click", function() {
that.prevCurrent();
})
$(".btn .next").on("click", function() {
that.nextCurrent();
})
},
removeCurrentClass: function(obj) {
$(obj).removeClass("left").removeClass("right").removeClass("middle").css(‘left‘, 0);
},
addTouchChange: function() {
var x = 0;
var y = 0;
var xx = yy = mx = my = curX = curY = 0;
var moveEle = $(‘#‘ + this.fater);
var that=this;
moveEle.on("touchstart", function(event) { //touchstart
var event = event.originalEvent;
x = 0;
y = 0;
// 手指位置
xx = event.touches[0].pageX;
yy = event.touches[0].pageY;
});
moveEle.on("touchmove", function(event) {
event = event.originalEvent;
// 防止拖动页面
event.preventDefault();
// 手指位置 减去 元素当前位置 就是 要移动的距离
x = event.touches[0].pageX - xx;
y = event.touches[0].pageY - yy;
// 目标位置 就是 要移动的距离 加上 元素当前位置
curX = x + mx;
curY = y + my;
});
moveEle.on("touchend", function(event) {
// 手指接触屏幕的位置
var oriX = mx;
var oriY = my;
// 手指离开屏幕的位置
etx = curX;
ety = curY;
if (oriX > etx) {
// 左滑
that.nextCurrent();
} else {
// 右滑
that.prevCurrent();
}
});
},
setClass: function() {
var that = this;
that.li = ($(‘#‘ + this.fater).find(‘li‘))
that.li.each(function(index, obj) {
that.removeCurrentClass(this);
if (index < that.count) {
$(this).addClass("left").css(‘left‘, that.position[index]);
} else if (index == (that.count)) {
$(this).addClass("middle").css(‘left‘, that.position[index]);
} else if (index > that.count) {
if (index == (that.li.length - 1)) {
that.li.eq(index).addClass("right").css(‘left‘, that.position[index]);
} else {
that.li.eq(index).addClass("right").css(‘left‘, that.position[index]);
}
}
})
},
prevCurrent: function() {
var last = $(‘#‘ + this.fater).find(‘li:last‘);
var first = $(‘#‘ + this.fater).find(‘li:first‘);
last.insertBefore(first);
this.setClass();
},
nextCurrent: function() {
var last = $(‘#‘ + this.fater).find(‘li:first‘);
var first = $(‘#‘ + this.fater).find(‘li:last‘);
last.insertBefore(first);
this.setClass();
}
});
</script>