js和css3實現360旋轉滾動效果

antzone發表於2017-04-14
JSCSSS3

分享一段程式碼例項，它實現了利用javascript結合css3宣傳滾動效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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>

相關文章