东篱闲人 发表于 2022-7-23 17:25

【东篱音画】相逢一场，不恨不悔


<br><br>
<style>
#papa { left: -260px; width: 1400px; height: 792px; box-shadow: 3px 3px 24px #000; background: #111 linear-gradient(#FAF0E6,#FAF0E6); position: relative; }
#drawer { position: absolute; width: 900px;; height: 792px; left:250px; top: 0px; box-shadow: inherit; overflow: hidden; }
.mypic { position: absolute; top: -100%; width: 100%; height: 100%; transition: top 1.5s;}
</style>

<div id="papa">
      <div id="drawer"></div>
</div>

<script>
let step = 1, start = 0, ani = 100, last;
let pics = [
      'https://s1.ax1x.com/2022/07/16/j5nV5F.jpg',
      'https://s1.ax1x.com/2022/07/17/jIlsSS.jpg',
      'https://s1.ax1x.com/2022/07/17/jIl6yQ.jpg',
      'https://s1.ax1x.com/2022/07/17/jIlRwn.jpg',
      
];

for(pic of pics) {
      let ele = document.createElement('img');
      ele.src = pic;
      ele.alt = '';
      ele.title = pic;
      ele.className = 'mypic';
      drawer.appendChild(ele);
}

let picAr = document.querySelectorAll('.mypic');

picAni(0, picAr.length - 1);

let timer = setInterval(() => { picAni(0, picAr.length - 1); },10000);

function picAni(n1, n2) {
      if(last != undefined) picAr.style.top= ani + '%';
      let temp = start;
      last = temp;
      ani = step < 0 ? -100 : 100;
      picAr.style.top = '0%';
      start += step;
      if(start == n1 || start == n2) step = -step;
}
</script>
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=1 height=1 src="//music.163.com/outchain/player?type=2&id=1384127698&auto=1&height=66"></iframe><br><br><br><br>

蜻蜓 发表于 2022-7-23 17:41

这幅也是让人惊艳了啊{:10_402:}闲人有才{:10_402:}

瞳萤 发表于 2022-7-23 21:42

很美的古风图，很有质感

宁静 发表于 2022-7-25 16:38

看老头的图图就是一种享受{:10_401:}

一抹微蓝 发表于 2022-7-29 19:45

来欣赏美美的制作，介图我喜欢
页: [1]
查看完整版本: 【东篱音画】相逢一场，不恨不悔