detailsAnimat.js 2.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. function Animate() {
  2. this.$animatCover = document.getElementById('animatCover');
  3. this.$flashDot = this.$animatCover.children;
  4. this.t;
  5. this.flag = false;
  6. }
  7. Animate.prototype = {
  8. init: function () {
  9. console.log(this.$flashDot)
  10. var _this = this;
  11. for (var i = 0; i < _this.$flashDot.length; i++) {
  12. (function (num) {
  13. _this.$flashDot[num].addEventListener('click', function (e) {
  14. _this.paneltaggle(num);
  15. e.stopPropagation();
  16. })
  17. }(i))
  18. }
  19. },
  20. flash: function () {
  21. var num = 0;
  22. var maxlength = 5100;
  23. var _this = this;
  24. this.t = setInterval(function () {
  25. num += 100;
  26. if (num > maxlength) {
  27. num = 0;
  28. }
  29. for (var i = 0; i < _this.$flashDot.length; i++) {
  30. _this.$flashDot[i].style.backgroundPositionY = num + 'px';
  31. }
  32. }, 30)
  33. },
  34. showAll:function(){
  35. var _this = this;
  36. for (var i = 0; i < _this.$flashDot.length; i++) {
  37. (function (num) {
  38. _this.cancelFlash();
  39. var currobj = _this.$flashDot[num];
  40. currobj.children[0].style.width = '100px';
  41. currobj.children[1].classList.add("showPanel");
  42. }(i))
  43. }
  44. },
  45. paneltaggle: function (currIndex) {
  46. if (this.flag) {
  47. this.cancelFlash();
  48. var currobj = this.$flashDot[currIndex];
  49. currobj.children[0].style.width = '100px';
  50. currobj.children[1].classList.add("showPanel");
  51. } else {
  52. this.flash();
  53. this.flag = true;
  54. for (var i = 0; i < this.$flashDot.length; i++) {
  55. this.$flashDot[i].children[1].style.opacity = 0;
  56. this.$flashDot[i].children[1].classList.remove("showPanel");
  57. this.$flashDot[i].children[0].style.width = '0';
  58. }
  59. }
  60. },
  61. cancelFlash: function () {
  62. clearInterval(this.t);
  63. this.flag = false;
  64. }
  65. }
  66. var animate = new Animate();