js和css3实现360旋转滚动效果

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

分享一段代码实例,它实现了利用javascript结合css3宣传滚动效果。

代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style>
body {
perspective: 1200px;
}
#box {
transform-style: preserve-3d;
transform: rotateX(-10deg);
}
ul {
width: 133px;
height: 200px;
position: relative;
margin: 10% auto;
}
ul li {
position: absolute;
left: 0;
top: 0;
text-align: center;
line-height: 200px;
float: left;
list-style: none;
width: 133px;
height: 200px;
background-image: radial-gradient( rgba(0, 0, 0,0.2),rgba(0, 0, 0,0.8));
border-radius: 5%;
border: 1px solid #000;
}
</style>
<script>
window.onload = function (argument) {
var filpPork = new Pork();
filpPork.init();
}
function Pork(argument) {
this.wrapBox = document.getElementById("box");
this.imgList = this.wrapBox.getElementsByTagName("li");
this.imgDeg = 360 / this.imgList.length;
this.lastx, this.lasty, this.changeX, this.changeY, this.roX = 0; this.roY = 0;
}
Pork.prototype.init = function (arguments) {
for (var i = 0; i < this.imgList.length; i++) {
this.imgList[i].style.transform = "rotateY(" + this.imgDeg * i + "deg)" + "translateZ(360px)"
this.imgList[i].style.transition = "transform 1s " + (this.imgList.length - 1 - i) * 0.2 + "s"
}
this.filp(this);
}
Pork.prototype.filp = function (obj) {
var _this = obj
document.onmousedown = function (e) {
var timer = null;
clearInterval(timer)
var ev = window.event || e;
_this.lastx = ev.clientX;  //当前鼠标位置
_this.lasty = ev.clientY;
this.onmousemove = function (argument) {
clearInterval(timer)
var ev = window.event || e;
var nowx = ev.clientX; //现在鼠标位置
var nowy = ev.clientY;
_this.changeX = nowx - _this.lastx;   //x轴变化了多少
_this.changeY = nowy - _this.lasty;        //y轴变化了多少
_this.roY += _this.changeX * 0.05;                //调节转的速度
_this.roX -= _this.changeY * 0.05;                //调节转的速度
console.log(_this.wrapBox)
_this.wrapBox.style.transform = "rotateX(" + _this.roX + "deg) rotateY(" + _this.roY + "deg)";
lastx = _this.nowx;  //将旧的数据更新
lasty = _this.nowy;        //将旧的数据更新
}
this.onmouseup = function () {
this.onmousemove = null;        //取消移动事件
timer = webkitRequestAnimationFrame(function () {        //设定时器逐渐减小rotateX和rotateY
_this.changeX *= 0.95;  //每30毫秒rotateX减少5%
_this.changeY *= 0.95;        //每30毫秒rotateY减少5%
_this.roY += _this.changeX * 0.2; //调节转的速度
_this.roX -= _this.changeY * 0.2; //调节转的速度
//赋值新的rotateX和rotateY
_this.wrapBox.style.transform = "rotateX(" + _this.roX + "deg) rotateY(" + _this.roY + "deg)";
}, 30)
}
return false; //取消默认事件
}
}
</script>
</head>
<body>
<div id="box">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</div>
</body>
</html>

js和css3实现360旋转滚动效果,这样的场景在实际项目中还是用的比较多的,关于js和css3实现360旋转滚动效果就介绍到这了。

js和css3实现360旋转滚动效果属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容