js和css3实现的图片立体滚动切换效果代码实例

快乐打工仔 分类:实例代码

本章节分享一段代码实例,它实现了图片立体滚动切换效果。

代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style type="text/css">
html, body {
padding: 0px;
margin: 0px;
font-family: "微软雅黑";
background: #ccc;
}
.boxDom {
margin: 100px auto;
perspective: 2000px;
width: 600px;
height: 300px;
}
.boxDom ul {
padding: 0px;
position: relative;
top: 0px;
bottom: 0px;
margin: auto;
width: 600px;
height: 300px;
list-style: none;
font-size: 0px;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
}
.boxDom ul li {
position: absolute;
top: 0px;
left: 0px;  border: 2px solid #fff;
width: 600px;
height: 300px;
overflow:hidden;
}
.imgOne {
transform: translateZ(150px);
-webkit-transform: translateZ(150px);
-moz-transform: translateZ(150px);
-ms-transform: translateZ(150px);
}
.imgTwo {
transform: translateY(-150px) rotateX(90deg);
-webkit-transform: translateY(-150px) rotateX(90deg);
-moz-transform: translateY(-150px) rotateX(90deg);
-ms-transform: translateY(-150px) rotateX(90deg);
}
.imgThree {
transform: translateZ(-150px) rotateY(180deg);
-webkit-transform: translateZ(-150px) rotateY(180deg);
-moz-transform: translateZ(-150px) rotateY(180deg);
-ms-transform: translateZ(-150px) rotateY(180deg);
}
.imgfour {
transform: translateY(150px) rotateX(270deg);
-webkit-transform: translateY(150px) rotateX(270deg);
-moz-transform: translateY(150px) rotateX(270deg);
-ms-transform: translateY(150px) rotateX(270deg);
}
.boxDom div {
background: rgba(0,0,0,.6);
width: 80px;
height: 80px;
border-radius: 50%;
position: absolute;
top: 0px;
bottom: 0px;
margin: auto;
text-align: center;
font-size: 3em;
line-height: 1.5em;
color: #fff;
cursor: pointer;
}
.left {
left: 0px;
}
.right {
right: 0px;
}
</style>
<script>
window.onload = function () {
var ulDom = document.getElementById("ulBox");
var liObj = ulDom.getElementsByTagName("li");
var leftBtn = document.getElementById("leftDiv");
var rightBtn = document.getElementById("rightDiv");
var deg = 0;
var exps = null;
var info = null;
var num = null;
leftBtn.addEventListener("click", auto, false);
rightBtn.addEventListener("click", auto, false);
function auto() {
var btnStr = this.getAttribute("id");
if (btnStr == "leftDiv") {
info = setInterval(leftImg, 8);
}
else {
info = setInterval(rightImg, 8);
}
this.removeEventListener("click", auto, false);
console.log();
}
function leftImg() {
deg = deg + 1;
exps = deg / 90;
num = parseInt(exps) + 1;
if (isNum(exps)) {
clearInterval(info);
leftBtn.addEventListener("click", auto, false);
}
else {
ulDom.style.transform = "rotateX(" + deg + "deg)";
}
}
function rightImg() {
deg = deg - 1;
exps = deg / 90;
num = parseInt(exps) + 1;
if (isNum(exps)) {
clearInterval(info);
rightBtn.addEventListener("click", auto, false);
}
else {
ulDom.style.transform = "rotateX(" + deg + "deg)";
}
}
//是否为整数
function isNum(s) {
var type = "^-?\\d+$";
var re = new RegExp(type);
return re.test(s)
}
}
</script>
</head>
<body>
<div class="boxDom">
<ul id="ulBox">
<li class="imgOne"><img src="demo/js/img/2.jpg" alt="" /></li>
<li class="imgTwo"><img src="demo/js/img/2.jpg" alt="" /></li>
<li class="imgThree"><img src="demo/js/img/2.jpg" alt="" /></li>
<li class="imgfour"><img src="demo/js/img/2.jpg" alt="" /></li>
</ul>
<div class="left" id="leftDiv"><</div>
<div class="right" id="rightDiv">></div>
</div>
</body>
</html>

js和css3实现的图片立体滚动切换效果代码实例,这样的场景在实际项目中还是用的比较多的,关于js和css3实现的图片立体滚动切换效果代码实例就介绍到这了。

js和css3实现的图片立体滚动切换效果代码实例属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容